Rich Messages

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 display interactive content. 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

Card

[card image="URL" header="TITLE" description="Lorem ipsum dolor sit amete" link="URL" link-text="Purchase" extra="$599" target="_blank"]

Display a single product. Replace id with the catalog ID and product_id with a product ID. The attributes body and footer are optional.

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=""]

A form to collect the user's email and phone number. All attributes are optional. Follow-up settings are 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.

Registration

[registration]

Registration form.

Timetable

[timetable]

Timetable.

Articles

[articles link="https://dashboard.nulu.chat/articles-demo"]

Articles with search area. The link attribute is used as a 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 the same context but replace the training phrases and the custom payload to { "rating": -1, "force-message": true }. The shortcode must also include a title or message.

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://nuluai.com" name="Click here" target="_blank" style="link"]

Display a link or open an article. The attribute target="_blank" is optional and opens the link in a new window. The attribute style="link" is optional and changes the button design. To open an article on click, the link value must be #article-ID, replace ID with the article ID.

Video

[video type="youtube" id="0TImic4N1ko" height="350"]

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.

Image

[image url="https://dashboard.nulu.chat/custom/icon.svg"]

Display an image.

Share

[share fb="https://nuluai.com/" tw="https://nuluai.com/" li="https://nuluai.com/" pi="https://nuluai.com/" wa="https://nuluai.com/"]

Social share buttons.

Commas

If your texts include commas you need to replace all commas with the characters \,.

Global Parameters

All of the rich messages support the following parameters:

Use Rich Messages in the Chatbot

You have to create a Dialogflow chatbot, then simply enter the rich message shortcode into the text response of the Intent.

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 and column payload. Example:

{"rich-messages":{"4Voyu":{"type":"email","result":{"email":["example@gmail.com","Your email..."]}}}}

Rich Message Translations

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.

Dialogflow Rich Messages

To allow Dialogflow to send rich messages, simply enter the rich message shortcode into the TEXT RESPONSE field or add a new Custom Payload response and insert this JSON code: { "rich-message": "shortcode" }. Replace "shortcode" with the rich message shortcode. To have a valid JSON code you need to replace all " chars with \". To obtain the shortcodes or to learn how to create a rich message, [please click here](link to instructions).

Dialogflow Rich Message Response

When the user interacts with rich messages via the Nulu Business chat (e.g. by clicking a button), the rich message response is sent to Dialogflow in the following format: ID|response, or ID if the rich message type is registration, email, follow up, in this case, the rich message values are sent as an array in the queryParams['payload'] key. ID is the rich message ID, which can be set by adding the attribute id="YOUR-ID" to the shortcode. If no ID has been set, a random ID will be used instead. response is the input or selection of the user. To block Dialogflow from replying to a rich message add a new intent with ID as the only user expression and no response.

If the user is interacting with the chatbot via a messaging app (e.g. WhatsApp), the response of the rich message does not contain the rich message ID and Dialogflow contexts must be used to allow Dialogflow to understand which Intent to activate for a specific rich message response.