Skip to main content
ChatAutomation

Using Rich Messaging - Salesforce

  • Updated

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;

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.

 Screenshot_2023-01-24_at_09.50.30.png

Horizontal Binary Buttons

 

How to use

Use &&version1&& in the bot message before the button.

Screenshot_2023-02-03_at_17.19.28.png

 Screenshot_2023-01-24_at_09.52.37.png

Horizontal Row Buttons

 

How to use

Use &&version2&& in the bot message before the button.

 

Screenshot_2023-02-03_at_17.17.16.png

 Screenshot_2023-01-24_at_09.50.42.png

CSAT - Stars

 

How to use

Use &&version3&& in the bot message before the buttons.

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

Screenshot_2023-02-03_at_17.23.00.png

 Screenshot_2023-01-24_at_13.26.23.png

CSAT - Emojis

 

How to use

Use &&version4&& in the bot message before the buttons.

Screenshot_2023-02-03_at_17.23.37.png

 Screenshot_2023-01-24_at_13.26.34.png

 

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.

Screenshot_2023-01-24_at_10.09.15.png

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

Screenshot_2023-01-31_at_12.55.03.png

 Screenshot_2023-01-24_at_09.53.07.png

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


<h2>7.99€/month</h2>
<h5>1 Week fre Trial</h5>
<p>then 9.99€/month. Cancel anytime</p>

Screenshot_2023-01-31_at_12.56.02.png

 Chat.png

 

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

Screenshot_2023-01-24_at_13.33.33.png

Embedded Media

 

How to use

Put the HTML in the bot message without other content

<iframe src="https://www.youtube.com/embed/8dvFVEHKvrI" frameborder="0" allowfullscreen></iframe>>

<img src="https://www.ultimate.ai/hs-fs/hubfs/Website/Visuals/hp2-2.png">>

 Screenshot_2023-01-24_at_13.32.20.png

Full-Width Button

How to use

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

<div class="info">Some text</div>

<div class="buttons-wrapper buttons-wrapper-v0 btn-full">

<a target="_blank" href="https://www.google.com" class="oneElement">Purple button-link</a></div>

 Screenshot_2023-01-24_at_13.32.35.png

Information Box with Buttons

How to use

Custom bot message with two levels of text hierarchies & 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 bot message.

<div class="titlesBlock">
<p>🚚 Delivered on 30 June 2022</p>
<p>📦 4 item(s) shipped by Ultimate</p>
</div>

<div class="buttonBlock">
<div class="buttonBlock_text">
Haven't received it yet? Your parcel may have been delivered to a neighbor or pickup-point.
</div>

<div class="buttons-wrapper buttons-wrapper-v1"><a class="btn-default" href="https://www.google.com" target ="_blank">🔍 Track parcel</a>
</div>

Screenshot_2023-02-03_at_17.21.21.png

 Screenshot_2023-01-24_at_13.31.46.png

 

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.

Related articles