Integrating LWC in Einstein Bot
Let’s consider a use case where we need to display a custom file upload LWC component in the middle of a chat conversation in Einstein Bot. As we know currently there is a limitation that we can’t call Aura/LWC from Einstein Bot. Even we can’t call a screen flow as well. So below are the steps that we need to follow to achieve above use case.
Step 1: Create the LWC component for file upload which extends BaseChatMessage
<?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>
import { track } from ‘lwc’;
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];
const LWC_PREFIX = ‘lwc:’
export default class FileUploadExample extends BaseChatMessage {
@track content = ‘’;
showNow=false;
showNoContent=false;
connectedCallback()
{
if(this.messageContent.value.startsWith(‘LWC_PREFIX’))
{
if(this.messageContent.value.split(‘:’)[1]===”Yes”)
{
this.showNow=true;
}
else{
this.text=’The file upload option is not available’;
this.showNoContent=true;
}
}
else{
this.showNoContent=true;
this.text=this.messageContent.value;
}
}
handleUploadFinished() {
const uploadedFiles = event.detail.files;
}
}
<template>
<template if:true={showNoContent}>
<lightning-formatted-rich-text value={text}>
</lightning-formatted-rich-text>
</template>
<template if:true={showNow}>
<lightning-file-upload
label=”File Upload”
name=”fileUploader”
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</template>
<template if:false={showNow}>
<lightning-formatted-rich-text value={content}>
</lightning-formatted-rich-text>
</template>
</template>
Step 2: We need to create an embedded service deployment and in the chat message(text) area we will select our custom LWC component. Below is the screenshot for the same. We can also control the chat screen height and width by changing aspect ratio in the additional branding section of below screenshot.
Step3: We need to create an Einstein bot which uses the above embedded service deployment and call the LWC component in the middle of conversation using below format. Please note we need to use a regex of your choice to call LWC. As of now in below screenshot I am using “Vision:”.
Step4: For Testing the Bot we can use the preview feature of Bot or we can create a community and use the embedded service chat component there to test out the functionality.
