Enabling the Salesforce rich messaging plugin for advanced AI agents

What's my plan?

Add-on

AI agents - Advanced

Rich messaging, such as buttons and carousels, are not supported by Salesforce. Therefore, we have created our own scripts for you to add in Salesforce as static resources to enable buttons as rich messages in dialogue flows. This should be done by a Salesforce Admin.

• Scripts
  • Download & Upload Scripts into Salesforce
  • Edit the chat widget to reference custom scripts
• Lightning Component
  • Download the Lightning Component
  • Install and deploy the component 
• Salesforce Settings
  • Update Embedded Chat Widget Service Deployments Setting
• Remove HTML from Chat Transcript
• Recommended Customizations

Plug-in

These scripts enable all the customization features and the CSS to render rich messaging. 

Download the Plug-in

1. Download the assets.zip from here 
2. Unzip the zip file and you'll find a folder called rich-message-plugin and you will see two files:
   • CustomEvents_AddButtons.js
   • CustomEvents_AddButtons_Stylesheet.css

Upload the Plug-in

The two files need to be added as static resources. To do so:

1. In Salesforce, go to Setup > Custom Code > Visualforce Pages -> Developer Console (this opens a new window)
2. In the new window, select File > New > Static Resource
3. Set the fields as below:
   • Name: CustomEvents_AddButtons
     • Note - (You can rename this if you wish and this is the reference you will use in the widget code later on and you don't need the .js or .css respectively)
   • MIME Type: text/javascript or text/css, depending on which file you are uploading
4. Click Submit
5. Repeat steps 2-4 for the file CustomEvents_AddButtons_Stylesheet.css

Edit the chat widget to reference custom plug-in

1. In your website's source code, locate the snap-in widget snippet
2. Add the following lines aboveembedded_svc.init():

embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];

Lightning Component

The lightning component enables the typing indicator and replaces the standard chat message component with one that can understand HTML logic.

Download the Lightning component

Within the zip folder you downloaded earlier, there is a rich-message-lightning-web-component folder.

Install and Deploy the Component

If this is your first time deploying a web component - check out the trialhead guide here.

Install

1. Create the project in VS Code - you will need the Salesforce extension enabled and Salesforce CLI downloaded

   1. Create a project by selecting SFDX: Create Project from View > Command Palette

      Accept the standard template and give it the project name lwcchatpack.

   2. Under force-app/main/default, right-click the lwc folder and select SFDX: Create Lightning Web Component.

      
      

   3. Enter lwcchatpack for the name of the new component and accept the defaults

   4. Replace the files that were auto-created with what was downloaded from the Google Drive and add the new css file. Save everything

Deploy

1. 1. Under View > Command Palette, enter SFDX: Authorize an Org.
      When prompted, accept the Project Default and press Enter to accept the default alias. If prompted to allow access, click Allow.

   2. Right-click on the default folder and select SFDX: Deploy this Source to Org.

If deploying for your code editor doesn't work, you can do it from CLI by entering the following

cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default

Update Salesforce Settings

For this new component to be utilized, it needs to be enabled on the chat widget.

This is controlled through the "embedded service" which is already being used by you today (this is the widget you’re using).

To update the settings navigate to Settings > Embedded Service Deployment select the relevant widget, click View, then edit the chat settings.

You will then see the "Customize with Lightning component" section where you can replace the default "chat message" component with the one we've installed above - remember to use the lwcchatpack project name that we used earlier.

Remove HTML from Chat Transcript

Now that we had added the capability to have all this cool customization and rich options, we want to make sure the transcript of the chat is still readable.

We can change that so that the HTML is rendered by adding a Chat Transcript Trigger.

Setup > Object Manager > Chat Transcript > Trigger > New

trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('&lt;','<').replaceAll('&gt;','>').replaceAll('&quot;','"').replaceAll('&amp;','&'); 
}
}
}

Recommendations 

Adjust the chat box width

For a better experience, we recommend increasing the width of the chat box. As a minimum, we would suggest 350px however 450px would be ideal.

To adjust this, in the widget code find the below line and set the value you would like.

embedded_svc.settings.widgetWidth = 

Adjust the default color and font

Within the css file in the widget code - find the color selector, by default it will be purple, but this can be adjusted in the CustomEvents_AddButtons_Stylesheet.css we uploaded in the beginning. 

In case you ever need to overwrite what the color you have set, for example, you want to have yellow stars but your brand purple for the rest of the colors you just need to add the tagimportant;.