📚 Learn how to use rich messages with interactive features like buttons and forms in your chat. This tutorial covers creating, sending, and displaying rich messages using shortcodes and various parameters.
💡 PRO TIP:Click here to hire an expert to guide you in the step by step. Book a call now to learn all the tips and tricks for training your AI, or let us handle it all for you instead.
Welcome to our guide on utilizing rich messages in OmniChat. This tutorial will walk you through creating interactive messages, using shortcodes, and integrating these features to enhance user engagement and streamline interactions.
Rich messages are special messages with interactive features like buttons, dropdowns, or inputs. They allow an agent to request information from the user via a user input form or to diplay interactive contents. Rich messages can be inserted into a chat message using shortcodes. Shortcodes accept various parameters like title and description. The available rich messages are listed below.
How it works:
1.Create and send
Create a rich message by inserting the shortcode into the text editor of the admin area. Customize all of the parameters with your information and send your message.
2.Message is displayed
When a shortcode is used, the user sees the rich message (not the shortcode) and can select or enter the required information to complete the form submission.
3.User’s response is submitted
Once the rich message form has been filled out and sent by the user, a success message is shown and the form data is saved.
Rich Messages
Name
Shortcode
Description
Card
[card image=”URL” header=”TITLE” description=”Lorem ipsum dolor sit amete” link=”URL” link-text=”Purchase” extra=”$599″ target=”_blank”]
Call-to-action card with an image, title, description, link, and more.
Slider
[slider image-1=”URL” header-1=”TITLE” description-1=”Lorem ipsum dolor sit amete” link-1=”URL” link-text-1=”Purchase” extra-1=”$599″ image-2=”URL” header-2=”TITLE” description-2=”Lorem ipsum dolor sit amete” link-2=”URL” link-text-2=”Purchase” extra-2=”$599″ target=”_blank”]
Slider of call-to-action cards with an image, title, description, link, and more. You can add up to 10 slides.
Form to collect the user’s email and phone number. All attributes are optional. Follow up settings used as default values. Add the attribute required-messaging-apps=”true” to force users to provide their email and phone on messaging apps. Merge fields are supported.
Articles with search area. The link attribute is used as fallback message for Facebook Messenger, WhatsApp, Telegram messages.
Rating
[rating label-positive=”Helpful” label-negative=”Not helpful” label=”Rate and review” success-negative=””]
Agent rating form. To make the rating shortcode work on WhatsApp, Messenger, and the other channels, you need to use Dialogflow and the chatbot, create a new Intent with rating as input Context, nothing as output Context, a list of the user’s most common messages for a positive rating as Training phrases(e.g. good, positive) and { “rating”: 1, “force-message”: true } as Custom Payload response. For the negative rating create a new intent with same context but replace the training phrases and the custom payload to { “rating”: -1, “force-message”: true } The shortcode must include also a title or message.
List
[list values=”A,B,- C,- D,E” numeric=”true”]
Text list. Prefix an item with the – char to make it an inner item.
Display a link or open an article. The attribute target=”_blank” is optional and open the link in a new window. The attribute style=”link” is optional and change the button design. To open an article on click the link value must be #article-ID, replace ID with the article ID.
Display a YouTube or Vimeo video. The value of the attribute type can be youtube or vimeo. The attribute id is the ID of the video, get it from the URL. The attribute height is optional and sets the video height in px.
To translate a rich message string, the original rich message text must be in english, add the exact english text and its translations in Setting > Translations > Front End.
Show a rich message on chat initialization
To display a rich message, such as a list of buttons, when a user initiates a chat for the first time, insert the rich message shortcode into the welcome message.
Custom rich messages
You can create custom rich messages with your own custom content by going to Settings > Miscellaneous. Currently, custom rich messages are static and there are no interactive options available as there are with shortcodes. However, you can insert custom HTML codes.
HTML codes
When creating a custom rich message, you can use the following codes: