Predefined answer templates
Last updated
Last updated
Tous droits réservés @ 2023 dydu.
You can make your content more attractive by using the appropriate answer template.
According to the message you want to deliver to your audience, you can choose between:
Quick reply
Product card
Carousel
Quick replies are pre-defined responses that chatbots offer to their users. They offer users simple, guided ways to reply to a message.
You can present up to 9 buttons within an answer that contain a title and optional image (or emoji).
These buttons can be used to redirect the audience to a new piece of knowledge or an external URL.
A product card allows you to show off a product or a service in a visual way.
It allows to include:
an image or a gif
a title
an integer
a subtitle that can be used as a description
up to 3 buttons
Note: when there is more than 1 button, the first one will always have a different color (the same one as the chatbot's primary color).
A product card template displays only one card, while a carousel template consists of as many product cards as you want.
Go to Content > Advanced > Templates
Click on Import
Choose the template you want to use in your answer
Go back to the answer edition page and click "more options"
In the "Template" section, choose the template you want to use
For Quick Reply template, fill out the button box you want to show by creating a personalized text that must contain a redirection link (to an external URL or a piece of knowledge). If you don't need 9 buttons, just leave the box empty so that it will not be shown in the chatbot.
For Product card / Carousel template, fill out the fields you want to show in the edition box of each card (title, description, buttons...).
Buttons should always contain a redirection link (to an external URL or a piece of knowledge).
Empty fields will not show in your card(s).
Use quick replies to prompt for specific next steps.
Be brief — long quick replies will be truncated.
If you want to add an image in a button, make sure it is a square image up to 18 x 18px.
Each button can contain up to 15 characters.
Each button must contain a redirection to a URL or a piece of knowledge.
For this type of template, consistency of design elements is essential to deliver quality messages.
You need to pay attention to the image ratio
As one of the most eye-catching components of the carousel, images should be chosen with an appropriate aspect ratio to ensure overall aesthetics.
An aspect ratio of an image is the proportional relationship between its width and height. The first number represents the width and the second represents the height. Essentially, the ratio defines the shape of an image.
For example, a square image has a ratio of 1:1, whether its dimensions are 50 x 50px or 1500 x 1500px.
Another example, a horizontal image (landscape style) might have a ratio of 16:9. It could be 1920 x 1080px or 1280 x 720px.
In the Carousel model, since images can be scaled up or down to fit different content and chatbox widths, they may not always have the same dimensions but will always maintain the same shape. This is why you should pay attention to the shape rather than the size
Don't forget the "Safe Area"
In addition to the shape, you need to take into account the "safe area" when choosing an image.
A safe area of an image is the part that will always show regardless of the shape or size of the screen.
Images inside the carousel cards may have their aspect ratio modified depending on the content. That's why the most important detail must be kept in the "safe area" to avoid it being cut off.
For example, if you want to use an image with two people chatting, we recommend having them at the center of the image. Just keep in mind: the more centered the subject of your image is, the better!
Our recommendations on card elements and image ratio
General tips:
We recommend using up to 3 buttons per card.
No more than 35 characters for the text corresponding to each button.
Buttons must contain a redirection to a URL or a piece of knowledge.
The text zone only shows up to 85 characters (including spaces). Beyond that limit, the rest of the text will be reduced with "...read more".
