Using rich messaging in advanced AI agents with Salesforce

What's my plan?

Add-on | AI agents - Advanced

Everyone likes having an experience that is visually appealing and easy for visitors to use, however, rich messaging, such as buttons and carousels, is not supported by Salesforce natively.

We believe the user experience is so important that we have created our own plug-in and scripts for you. By installing our plug-in (please reach out to your CSM to request the plug-in) you can leverage these dynamic designs as rich messages in your dialogue flows. This can then be implemented within your Salesforce embedded chat experience.

The customizations this unlocks include;

Buttons

Carousels

HTML

These capabilities are also customizable to your brand so they can match your brand's look and feel.
In this article, we will cover how to leverage all the rich options within our dialogue builder.

In order to achieve these rich options, please follow the enabling Salesforce Rich Messaging Plugin Instructions with a salesforce admin.

Buttons

Buttons were already available with Salesforce, so what's the difference with ours?

They are customizable and can be formatted to suit your brand and the experience you want to design. Take a look at the different possibilities below.

Type & How to Use | Visual Example

Default Vertical

How to use

This will be the standard view if no version is specified.

Horizontal Binary Buttons

How to use

Use &&version1&& in the AI agent message before the button.

Horizontal Row Buttons

How to use

Use &&version2&& in the AI agent message before the button.

CSAT - Stars

How to use

Use &&version3&& in the AI agent message before the buttons.

The buttons should be 1 - 5 + “not now”.

CSAT - Emojis

How to use

Use &&version4&& in the AI agent message before the buttons.

Carousels

Carousels allow you to display more content in a visual manner with the visitor being able to choose the respective option that is relevant to them, but they are larger, more dynamic, and visual compared to buttons.
Below you can find the versions we unlock with our plug-in.

Type & How to use | Visual Example

Default Carousel

How to use

This could be used with or without images.

When using images, you can add an array of image URLs to create a “collage”.

Supports regular buttons + external buttons.

Wide and Dark Carousel

How to use
The image acts as a background for the entire card. Supports multiple images per card, similar to the default carousel.

Use &&version2&& in the title of the first card of the carousel
This also works with dynamic carousels

Imageless, formatted offer-style Carousel

How to use

could typically be used for carousels that show multiple “packages”, levels, or other offers.

Use &&version3&& in the title of the first card of the carousel (would work also with dynamic carousels).

Use the following HTML structure in the description of the card

7.99€/month
1 Week fre Trial
then 9.99€/month. Cancel anytime

HTML Examples

In case the options we covered thus far aren't enough, we've got you covered with being able to convert HTML into really cool messages as well as just transforming text.

Type & How to use | Visual Example

External Link Button

How to use

When using a single “external link” button, it will render like in the example to the left

Embedded Media

How to use

Put the HTML in the AI agent message without other content

>

>

Full-Width Button

How to use

To stretch the button to the width of the entire AI agent, you need to add the class "btn-full"

Some text



Purple button-link

Information Box with Buttons

How to use

Custom AI agent message with two levels of text hierarchies and a button.
This can be used to provide important information (like delivery date), some side information, and a big CTA (external link)

Could be combined with the V2 button as well - this time with the version within the AI agent message.


🚚 Delivered on 30 June 2022
📦 4 item(s) shipped by Ultimate




Haven't received it yet? Your parcel may have been delivered to a neighbor or pickup-point.


🔍 Track parcel


This can, of course, be customized to your heart's content and the HTML components are an inspiration for whatever you might want to achieve.