You can use Cards to create beautiful, visual experiences within a conversation. The Cards are primarily used to present users with a visual menu that will either send the user forward within the conversation or enhance the conversation with links to pages with additional info.
There are two types of Cards: Generic Cards and Dynamic Cards. In this article, we will focus on Generic Cards and go through:
How to create a Card
To create a Card, you will have to be in the message of a module. Press the "Add Cards" button. Here you can add an image, a title, a subtitle, and a URL. Images will be cropped automatically to fit the Card, so make sure the content you want to show is centered vertically. Images should be 224x112px or proportionally the same (2:1).
How to add buttons to a Card
You can add up to three buttons to your Card. In 'Label' you add the name of the button that the end user will see.
Under 'Action', you choose what you want to do when an end user clicks on a button. If you press ‘Send Message’ then you can send the user to another module. You can also choose to send the end user to a webpage in a new browser window by choosing "Open URL" or open the webpage within the chat by choosing "In chat: Full size / Medium".
If you choose to use In chat, you can choose how much the webpage should take up of the window size. You can choose between 'Full' - all of the window size or 'Medium' - approximately 50% of the window size. Please keep in mind that when you choose “Open URL” and “In chat: Full size / Medium”, you must use a secure URL. It will not work otherwise. If the URL you use has special characters, such as ampersand (&), you must convert the characters into a valid ASCII format.
It is possible to create more than one Card within a message, which is perfect if you want to create a visual menu in your bot.
'Share in Facebook' makes the Card shareable in Facebook Messenger.
This is how your Cards should look like when you are done setting them up. Have fun!