Rich messages let you send interactive content like buttons, dropdowns, forms, and more during chat. These can be used in both manual and automated messages to collect user input or guide them through actions.
๐ How Rich Messages Work
- Create the message
Insert a shortcode into the text editor with your details (like title, description, etc.). - The user sees the rich message
Instead of code, users see a clickable or interactive element (like a form or button). - User submits a response
Once the user fills it out, they see a confirmation message, and the data is saved.
๐งฉ Rich Message Types Available
| Type | Example Use |
| Card | Image, title, description + call-to-action button. |
| [card image=”URL” header=”Title” description=”Text” link=”URL” link-text=”Buy Now”] | |
| Slider | Showcase multiple cards. |
| Buttons / Chips | Show options as clickable buttons. |
| [buttons options=”Option 1, Option 2″] | |
| Select | Drop-down menu of options. |
| Inputs | Collect text responses. |
| Email Form | Collect name, email, and phone. |
| [email name=”true” phone=”true”] | |
| Timetable | Show your availability. |
| Articles | Show links to help articles. |
| Lists / Tables | Display info in list or table format. |
| Video | Embed YouTube/Vimeo videos. |
| Image | Display a single image. |
| Share | Social share buttons. |
Tip: Use Shift + Enter to add a new line in your message.
๐ง Customize Rich Messages
All shortcodes can be customized with:
- title=”” โ The title shown at the top.
- message=”” โ A description under the title.
- success=”” โ Text shown after form submission.
- id=”” โ ID used to track or save responses.
๐ Use in Chatbots
To use rich messages in chatbot replies:
- Go to your Dialogflow intent.
- Paste the shortcode into the text response.
๐ฆ Where Data is Stored
All rich message responses are saved in your SmartAI database, under:
- Table: sb_messages
- Column: payload (in JSON format)
๐ Translations
To translate rich messages:
- Make sure the original text is in English.
- Go to Settings > Translations > Front End to add your translated version.
โ๏ธ Custom Rich Messages
You can create static custom messages using HTML by going to:
Settings > Miscellaneous
You can add:
- Clickable buttons
<a href=”URL” class=”sb-rich-btn sb-btn”>Click here</a> - Images
<div class=”sb-image”><img src=”URL” class=”sb-image” /></div>
Note: Custom HTML messages are staticโno forms or dynamic fields.
โ ๏ธ Special Characters Tip
If your text includes commas ,, colons :, or quotes “, use a backslash \ before them:
Example: \,, \:, \”
