Turn a plain reply into something people can tap
Rich messages are interactive components you drop into a message with a shortcode. The person you are talking to sees a card, a set of buttons or a small form, fills it in, and their answer is saved to the conversation.
Typing out a list of options and hoping someone replies with the right words creates work for both of you. Rich messages give them something to click instead, which is useful for choices, product cards, contact details, price tables and video.
Step by step
Write a message and add a shortcode
Rich messages are inserted with shortcodes in the panel's text editor. Type or paste the shortcode you want, for example [buttons options="A,B,C"], and send the message as normal. The person on the other side sees the rendered component rather than the shortcode text.
Fill in the parameters
Each shortcode takes its own parameters. A product card looks like [card image="URL" header="TITLE" description="..." link="URL" link-text="Purchase" extra="$599" target="_blank"], while a video is [video type="youtube" id="VIDEO_ID" height="350"] and accepts youtube or vimeo.
Add the global parameters if you need them
Every rich message also accepts id, title, message, success and settings. Use title and message to introduce the component, and success for what is shown once the person has responded.
Escape any awkward characters
Commas, colons and quotation marks have meaning inside a shortcode, so escape them in your own text with a backslash: \, for a comma, \: for a colon and \" for a quotation mark. Skipping this is the most common reason a rich message renders in pieces.
Translate the text if you serve more than one language
The original text of a rich message must be English. Add the English string and its translation at Settings > Translations > Front End.
Build a custom one when the shortcodes do not cover it
Static rich messages made from your own HTML are created at Settings > Miscellaneous. Useful classes are sb-rich-btn sb-btn for a button link, sb-rich-btn sb-btn-text for a text link, and sb-image to let people zoom an image on click.
Settings reference
| Setting | What it does |
|---|---|
| [card] | A product-style card with an image, header, description, price or extra text, and a link button. |
| [slider] and [slider-images] | A swipeable set of cards, up to 10 slides, or a simple image slider written as [slider-images images="URL,URL,URL"]. |
| [chips] | Small tappable option chips, written as [chips options="A,B,C"]. |
| [buttons] | A set of reply buttons, written as [buttons options="A,B,C"]. |
| [select] | A drop-down list of options, written as [select options="A,B,C"]. |
| [inputs] | A small form of text fields with a send button, written as [inputs values="A,B,C" button="Send now"]. |
| [email] | Collects contact details, for example [email name="true" last-name="true" phone="true" phone-required="false" placeholder=""]. |
| [timetable] | Shows your opening times as a component inside the message. |
| [articles] | Shows articles in the message, written as [articles link="..."]. |
| [list] and [list-image] | A plain, numbered, two-column or image list, for example [list values="A,B,- C,- D,E" numeric="true"] or [list-image values="URL:A,URL:B"]. |
| [table] | A data table, written as [table header="A,B,C" values="A:B:C,A:B:C"]. |
| [button], [image] and [share] | A single link button, an image via [image url="..."], or social sharing icons via [share fb="" tw="" li="" pi="" wa=""]. |
Good to know
Raw HTML is blocked in normal messages
For security, raw HTML and JavaScript are not allowed in ordinary messages. If you need your own markup, create a custom rich message at Settings > Miscellaneous instead.
Nested list items need a dash
In [list], prefix an entry with a dash and a space to make it an inner item, as in [list values="A,B,- C,- D,E"]. For a two-column list with titles, use colons: [list values="A:X,B:Y,C:Z"].
Buttons can open an article
A button is written as [button link="..." name="Click here" target="_blank" style="link"]. To open one of your articles, use #article-ID as the link value.
Forcing contact details on messaging apps
Add required-messaging-apps="true" to the [email] shortcode to require the email or phone number on messaging apps as well.
Formatting and links in the editor
The editor understands *bold*, __italic__, ~strikethrough~, `code` and ```code block```. Links are turned into links automatically; to give one a name, append #sb-example to it, with spaces written as double dashes.
Line breaks are not the Enter key
Pressing Enter sends the message. Use SHIFT+ENTER or CTRL+ENTER to add a line break inside one.
Common questions
Where do I type a rich message?
What happens to what someone selects or types?
My card came out broken in the middle of a sentence. Why?
How many slides can a slider hold?
Can rich messages appear in other languages?
What if I need a component you do not offer?
Ready to end the chaos?
Unify your messages, automate the repetitive questions, and turn conversations into revenue — starting today.
Get Started