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!

Share This Blog
Table of contents
Related Articles

In this detailed guide, we will walk you through the significant yet easy steps to configure Email to Salesforce. Without any further ado, let’s get started! About Email to Salesforce As the term refers, Email to Salesforce is valuable for any organization that businesses use as their Customer Relationship Management (CRM) platform. It helps streamline […]

Read More
Guide on CRUD Operations in Node.js with jsForce

CRM developers typically need to integrate Salesforce with Node.js apps. One well-known library for this purpose is jsForce, which provides a comprehensive set of tools for interacting with Salesforce data and performing CRUD tasks effectively. Let’s dive into the blog, where you will understand the use of jsForce to execute key CRUD tasks within Salesforce, […]

Read More
How to Implement Round Robin Assignments in Salesforce Using Apex

Ensuring a proper workload balance and quick follow-ups from internal or external team members, leads, opportunities, or task distributions is crucial. To achieve this, all you need is a Round Robin assignment. In this step-by-step guide, we will walk you through the process of implementing a round-robin assignment in Salesforce using Apex. Here, we’ve used […]

Read More
Best Salesforce Developments Services Provider

In this step-by-step guide, we will walk you through the significant role of Large Data Volumes in Salesforce, and what strategies or practices you should keep in mind. What is Large Data Volumes? In Salesforce, Large Data Volumes (LDV) refers to managing a huge amount of records available in the platform. LDV usually comes into […]

Read More

Salesforce Apex includes numerous built-in text handling classes, and in addition to them, the Pattern and Matcher classes are good for performing complex string operations. These classes enable us to define and work with regular expressions, which are of particular importance for data validation, searching, and modification. In this technical blog, we will find out […]

Read More

Maintaining security and compliance in Salesforce requires effective user access management. This article will lead you through the process of creating expiration dates for Permission Sets and Permission Set Groups, allowing you to automate access removal while minimizing manual work. Know how this functionality simplifies workflows, guarantees compliance, and improves security procedures. Why Use Expiration […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818