How to integrate LWC in Chatbot

We know Chatbots are used on websites, Facebook, and Whatsapp to assist customers even if the agents are unavailable in the office at that time.

The Salesforce CRM platform also provides the Chatbot Functionality to help customers manage clients in an effective way. You will find it in the quick find box just by entering “bot”.
It is very easy to use. We can call flows, Apex classes and also directly access the objects available in Salesforce.

But for some purpose what will happen if we have to show our custom messages or any image with some custom change?

So, here in this blog, we are going to show you how to call your Lightning Web Component in your chatbot. And believe us it is very easy. Let’s go step by step on this journey.

So first we are going to set up a chatbot on our public site. So let’s create one.

Step 1. Go to the Quick find box and type Einstein Bots

Step 2. Then click the New button to create a new chatbot or you can proceed with your created one.

Step 3. Select the standard bot then click next

Step 4.  After creating the chatbot our dialog page looks like this

After creating the bot now is the time to integrate our bot with the community site.

Step 5.  Go to the Quick find box and type all sites.

Step 6.  Go to the builder page of the community site

Step 7.  Go to the builder page and click on the gear icon. Go to security and privacy add a trusted URL and enable the security level.

Step 8.  To Add a trusted URL go to the quick find box and type chat settings and copy the Chat API endpoint URL.

Step 9. Set the bot to the community page.

After adding the chat API endpoint URL it’s time to set our bot to the community page.

Go to component and scroll down and go to the support section and drag the embedded service chat to the community page

Step 10. Create an LWC component

After integrating our Einstein Bot into the community site. Let’s create an LWC component just to show an image on page

Step 11. Create an LWC component to make changes in the chat

Now we have finished setting up the chatbot. Let’s Create an LWC component to make changes in the chat as per our choice. For reference have a look at this URL Link: Base Chat Message.

i) Here, We will create an LWC component to show the image whenever a client asks for the product image.
ii) For this we have created some dialogues and at a certain point, we have called the LWC component.
iii) To use the LWC component we have used “lightningSnapin__ChatMessage” in target and imported “lightningsnapin/baseChatMessage” module in the javascript class.
iv) We have created some custom CSS to modify our message and chat theme.
v) Here is the code for the LWC component that we have used in our chatbot after creating this lwc we have deployed it into org.

HTML File

JavaScript File

XML File

CSS File

Step 12.  After deploying your LWC to your org go to quick find box and type Embedded Service Deployment

Step 13. Click on dropdown and select View

Step 14.  Select Chat setting and click on edit

Step 15.  Add your lightning web component in Chat Messages and save it.

Here are some sample snaps of our working bot:

  • When we select Order Details the bot show this message.
  • When we select Product Image the bot shows the image

Please Test our chatbot! Click Here

Conclusion:

Now our Einstein Bot is ready to go. Try to create your own Bot by performing the above steps and share your experience with us. Stay tuned to our blogs for more interesting Salesforce development solutions. Until the next, Keep Learning!

Our Location worldwide
India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
SR Tower 2nd Floor Hydel Gate Haldwani Uttarakhand 263126 +91-5946359996
USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818