How to show Dynamic content in Salesforce Einstein Bot using LWC?

How to show Dynamic content in Salesforce Einstein Bot using LWC?

1. Create a Lightning Web Component that extends lightningSnapin__ChatMessage.

HTML:

<template>
    <div class={messageStyle}>
        <lightning-formatted-rich-text
            value={messageContent.value}>
        </lightning-formatted-rich-text>
    </div>
    <template if:true={showPhoneBool}>
        <div class={messageStyle}>
            Contact us through phone: 111-111-1111.
        </div>
    </template>
</template>

JavaScript:

import BaseChatMessage from 'lightningsnapin/baseChatMessage';

const CHAT_CONTENT_CLASS = 'chat-content';
const AGENT_USER_TYPE = 'agent';
const CHASITOR_USER_TYPE = 'chasitor';
const SUPPORTED_USER_TYPES = [AGENT_USER_TYPE, CHASITOR_USER_TYPE];

export default class ChatLWC extends BaseChatMessage  {
    
    messageStyle = '';
    showPhoneBool = false;

    isSupportedUserType(userType) {

        return SUPPORTED_USER_TYPES.some( ( supportedUserType ) => supportedUserType === userType );

    }

    connectedCallback() {

        console.log( 'Message Content is ' + JSON.stringify( this.messageContent ) );

        if ( this.isSupportedUserType( this.userType ) )
            this.messageStyle = `${CHAT_CONTENT_CLASS} ${this.userType}`;
        else
            throw new Error( `Unsupported user type passed in: ${this.userType}` );

        if ( this.messageContent.value === "You have chosen - Yes" )
            this.showPhoneBool = true;
        else
            this.showPhoneBool = false;
            
    }

}

CSS:

.chat-content {
    position: relative;
    font-weight: 400;
    line-height: 1.3;
    max-width: 70%;
    padding: 10px;
    font-size: 0.875em;
    border-radius: 10px 10px 0;
    float: right;
    margin-left: 40px;
    white-space: pre-wrap;
}

.agent.chat-content {
    color: rgb(192, 192, 192);
    background: #ff6060;
    border-radius: 10px 10px 10px 0;
    float: left;
}

.chasitor.chat-content {
    background: rgb(206, 51, 203);
    color: #fff;
    margin-left: auto;
}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightningSnapin__ChatMessage</target>
    </targets>
</LightningComponentBundle>

2. Configure the LWC in Embedded Service.

Embedded Chat Configuration:

3. Configure the BOT so that it messages with the option chosen. If the message is “You have chosen – Yes”, it will show the Phone number to contact.

Output:

Leave a Reply