Custom card

A Custom card is a navigational element available for dialogs on a Facebook channel that shows images in a carousel, and clicking an image takes the user to a conversation or URL. Optional buttons provide additional navigation actions.

Custom card with call-outs to the customizable elements: image, title, subtitle, URL, two buttons, and two Quick Reply buttons

Important: Custom cards are for navigational purposes only; they do not collect information.

Custom cards are horizontally scrollable. Each card includes a title, subtitle, image and optional target URL, and up to three navigational buttons.

Custom cards are scrollable: image shows same cards on a mobile device in portrait and landscape orientations

Create a custom card

  1. In the Conversation editor, click Add Dialog.

  2. Choose Custom Cards for the type.

  3. Provide a Name that reflects the purpose of the card.

  4. Define one or more cards. For each card:

    1. Provide:

      • Title — To appear on the card.

      • Subtitle — Text to appear below the Title

      • Image — Image to appear at the top of the card

    2. Optionally, if tapping on the card, it should open a web page:

      1. Turn on Go to URL and provide the URL where the respondent will be directed when the image is clicked.

      2. Set the Webview type (see examples below). Tapping the image will open a web view in the messenger to show the web page.

    3. Optionally, define one or more Buttons to appear below the image. Clicking a button performs its associated action.

      When Resume Dialog is selected, the conversation flow returns to this dialog when the action finishes, and any Post Conditions are then evaluated.

      The button must have a short label defined by the Button property.

      These are the actions:

      Go to Dialog
      Jump to the selected dialog in this conversation.
      Response
      An acknowledgement message to send to the respondent
      Go to URL
      Opens a web page in a web view in front of the message. Choosing this option also provides the following options:
      URL
      Where the respondent will be directed when the image is clicked.
      Webview type
      The height of the web view in front of the dialog. The heights are:

      • Compact — the card appears in the bottom half of the messenger view; the messenger view is visible behind and above the card

      • Tall — fills most of the view and includes the image at the top of the card; the messenger view is visible behind and above the card

      • Full — fills the view with each card's image at the top of the display

      Examples of compact, tall, and full webview types

      Fallback URL (Facebook Messenger only)
      A URL to a Facebook page to present when the URL is not available.
      Send User Input
      Send the associated text to Medallia Conversations to trigger a new conversation. The text is a Keyword assigned to the target conversation. 
      Call Phone Number
      Dials a phone number when tapped. Use to initiate a phone call, such as to a customer-care representative.
      Share
      Allows respondent to share content of the card with other people on Facebook.
      Restriction: Facebook has strict guidelines on how to use this option. See https://developers.facebook.com/policy#properuse for details. Of note:

      • The button text must be "Share".

      • You may not incent sharing, require it, or lead respondents to share in a deceptive manner.

  5. Optionally, define one or more Quick Reply buttons to appear below the custom card(s). Clicking these buttons immediately abandons the current conversation and navigates the respondent to a new conversation.

    Each button is a simple text label, where the text is a Keyword of the target conversation. Clicking the button triggers the conversation that has the keyword.

  6. Do not define labels.

    Note: There are no Labels for this dialog type.

  7. Optionally, add pre-conditions that determine whether or not to present this dialog to the respondent. For more information, see Condition rules.

  8. Optionally, add post-conditions that determine whether to say an acknowledgment message or navigate to another dialog or conversation. For more information, see Condition rules.

  9. Click Add Dialog to save the dialog to the conversation.

    Optionally, Add another dialog to the conversation.

    1. When finished, click Add Dialog.

    2. Click Cancel to close the Dialog editor.

  10. When finished, click Save.

You can now add another dialog to the conversation.

Tips and best practices

These are from the Facebook development guide:

  • Use the correct aspect ratio for your image. Photos in the generic template that aren't 1.91:1 is scaled or cropped.

  • The first card should be the most interesting and the one respondents are most likely to tap.

  • Keep button text under 20 characters (including spaces), and no more than three words.

  • Start button labels with a verb to help people understand the action they are taking.

  • Do not mix types of content. If you include an article next to a list of products, your experience could cause confusion.