Content - Card
  • 07 Jun 2024
  • 2 Minutes to read
  • PDF

Content - Card

  • PDF

Article summary

A card is a message with a title and an optional subtitle that contains an image and action buttons. Refer the sample screenshot below:

Figure: Card content

Add a Card in a Node

  1. In the Flow Editor, click the node where you want to add your card.
  2. Choose where to put your card: On Enter, On Receive, or Transitions.
  3. Click +.
  4. Under Message, click the box.
    1. In the Pick Content dialog, under Search In, select Card.
    2. You can either:
      1. Select an existing card in the list.
        Note:
        This will bring you directly to step 5.
      2. Click the Create new Card button.
    3. A new window will be displayed where you can modify the following options:
      1. The Title box.
      2. The Subtitle box.
      3. The Image button.
    4. Click Submit.
  5. Click Add Action (Alt+Enter).

Options

When adding a Card content, you can modify some options:

Note:
When hovering a box where you can type, the </> symbol appears. This button helps you easily insert variables within your message. When you click it, it shows a list of variables that you can use such as temp., user., session., or event..

Video

There are two ways to add a video:

  • Under Video, click the square with an up arrow. Then, you can choose which video you want to add there from your storage.
  • Under Video, click the Or enter URL button at the bottom right of the square. A box will appear and you can type the URL of your video.
Note:
When loading a video from a variable URL, you might need to use triple braces. Example: {{{temp.imageUrl}}}

Title

This is the most important information regarding your card. It will be displayed in bold and just under the selected image.

Best Practice
Title should be short, precise, and relevant.

Subtitle

The subtitle gives extra information (that couldn't be in the title) about the card.

Note:
The subtitle should be a complement for the title. It should add relevant information for the user.

Image

There are two ways to add an image:

  • Under Image, click the square with an up arrow. Then, you can choose which image you want to add there from your storage.
  • Under Image, click the Or enter URL button at the bottom right of the square. A box will appear and you can type the URL of your image.
Note:
Don't forget to take a look at the list of supported formats.

Add an Action Button

An action button is a button that triggers an action.

  1. When creating your card, there is a Add Action Button button that you can click. This will open a new dialog box.
    1. Under Title of the button, type the name you want to give to your button.
    2. Under Action, you can select either:
      1. Say something;
      2. Open URL;
      3. Postback.
    3. The last box is about entering a text or the ID of a content element that you want to show in the conversation.
  2. Click Submit.

Options

When adding an action button, you can modify some options:

Title of the button

This title is what the user will see on the button. They will click the button and it will trigger one of the three possible actions.

Note:
Make sure that the title is something relevant to the user.

Actions

  • Say something: when the user clicks the button, it will answer with a text.
  • Open URL: when the user clicks the button, they will be redirected to a website, opening a new window in their browser.
  • Postback: when the user clicks the button, the desired data (typed in the payload box) will be sent back to the server. For example, your button could be titled Buy with idOfMyItem as a payload.

Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.