Skip to main content

Rich Messages

Rich messages are special messages with interactive elements such as buttons, dropdowns, or input fields. They allow an agent to request information from the user via forms, or display interactive content.

Rich messages are inserted into chat messages using shortcodes. Shortcodes accept various parameters like title, message, success, and more.

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 in the admin area. Customize all the parameters with your content and send the message.

  2. Message is displayed
    When the shortcode is sent, the user sees the rendered rich message (not the shortcode) and can select or enter the required information.

  3. User's response is submitted
    Once the rich message form has been filled out and sent, a success message is shown and the form data is saved.

Rich Messages​

NameShortcodeDescription
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.
Slider images[slider-images images="URL,URL,URL"]Slider of images.
Chips[chips options="A,B,C"]List of buttons.
Buttons[buttons options="A,B,C"]List of buttons.
Select[select options="A,B,C"]Dropdown list of options.
Inputs[inputs values="A,B,C" button="Send now"]List of text inputs.
Email[email name="true" last-name="true" phone="true" phone-required="false" placeholder=""]Form to collect the user's email and phone number. All attributes are optional and use follow-up settings as default values. Add required-messaging-apps="true" to force users to provide email and phone on messaging apps.
Registration[registration]Registration form.
Timetable[timetable]Timetable.
Articles[articles link="https://chat24plus.com/articles-demo"]Articles with search area. The link attribute is used as fallback message for Facebook Messenger, WhatsApp, and Telegram messages.
Rating[rating label-positive="Helpful" label-negative="Not helpful" label="Rate and review" success-negative=""]Agent rating form. For WhatsApp, Messenger, and Telegram you must use Dialogflow: create a new Intent with rating as input context, no output context, positive/negative training phrases, and a JSON custom payload (see notes below).
List[list values="A,B,C"]Text list.
List double[list values="A:X,B:Y,C:Z"]Text list with titles.
List image[list-image values="URL:A,URL:B,URL:C"]Text list with titles and images.
Table[table header="A,B,C" values="A:B:C,A:B:C,A:B:C"]Table.
Button[button link="https://chat24plus.com" name="Click here" target="_blank" style="link"]Display a link or open an article. target="_blank" is optional and opens the link in a new window. style="link" is optional and changes the button design. To open an article, set link="#article-ID" (replace ID with the article ID).
Video[video type="youtube" id="0TImic4N1ko" height="350"]Display a YouTube or Vimeo video. The type attribute can be youtube or vimeo. The id attribute is the video ID from the URL. The height attribute is optional and sets the video height in pixels.
Image[image url="https://chat24plus.com/media/admin.png"]Image.
Share[share fb="https://chat24plus.com/" tw="https://chat24plus.com/" li="https://chat24plus.com/" pi="https://chat24plus.com/" wa="https://chat24plus.com/"]Social share buttons.

Dialogflow setup for Rating (optional, WhatsApp/Messenger/Telegram)​

To make the rating shortcode work on WhatsApp, Messenger, or Telegram using Dialogflow:

  • Create a new Intent with:

    • Input Context: rating

    • Output Context: (empty)

    • Training phrases: common positive rating messages (e.g., good, positive)

    • Custom Payload response:

      { "rating": 1, "force-message": true }

  • Create another Intent for negative rating with:

    • Same contexts

    • Negative training phrases (e.g., bad, not good)

    • Custom Payload:

      { "rating": -1, "force-message": true }

The rating shortcode must also include a title or message parameter.

Global Parameters​

All rich messages support the following parameters:

ParameterDescription
id="123"The ID of the rich message (also used to save JSON data).
title="ABC"The rich message title.
message="ABC"The rich message description that appears underneath the title.
success="ABC"The message that appears when the user completes and sends the rich message. User input is appended.
settings="ABC"Extra field for optional values.

Rich Message Response​

When a user completes a rich message, the response data is saved in JSON format in the database, under table sb_messages, column payload.

Example:

{
  "rich-messages": {
    "4Voyu": {
      "type": "email",
      "result": {
        "email": [
          "[email protected]",
          "Your email ..."
        ]
      }
    }
  }
}

Custom Rich Messages​

You can create custom rich messages with your own static content by going to:

Settings → Miscellaneous

  • Custom rich messages are static and do not support interactive options like shortcodes do.
  • However, you can insert custom HTML to design your own layouts.

HTML Codes​

When creating a custom rich message, you can use the following HTML snippets:

CodeDescription
<a href="https://www.google.com" target="_blank" class="sb-rich-btn sb-btn">Click here</a>Link with button design.
<a href="https://www.google.com" target="_blank" class="sb-rich-btn sb-btn-text">Click here</a>Simple text-style link.
<div class="sb-image"><img src="https://via.placeholder.com/1500x600" class="sb-image" /></div>Image that zooms on click.