Up next in 10
Auto-Start Salesforce Agentforce Service Agent with Custom Messages in Enhanced Chat
Nov 26, 2025
Show More Show Less
View Video Transcript
0:06
Hello everyone. In this video we are
0:08
going to see how to invoke agent for
0:12
service agent in enhanced web chat with
0:17
custom messages. The out ofthe-box
0:20
solution what we get from Salesforce
0:23
will allow the users to click the chat
0:26
icon which appears on the bottom right
0:29
corner. Once they click it, it will
0:31
invoke the enhanced web chat.
0:36
Once the enhanced web chat is uh
0:38
invoked, it will wait for the agent
0:40
force agent to join the conversation.
0:43
Once the agent force agent joins the
0:46
conversation then the users can start
0:49
inputting their issues or concerns
0:55
so that the agent force agent can help
0:57
on their request.
1:01
But with the custom solution what we are
1:02
going to see in this uh video will help
1:06
in reducing the overall time for the end
1:10
users instead of waiting for uh the
1:14
users to click the chat icon waiting for
1:17
the enhanced web chat to load and uh
1:21
waiting for the agent for service agent
1:23
to join and then waiting for the users
1:26
to input the text. We can try to
1:30
automate all of these with this custom
1:33
solution what we are going to see in
1:35
this video.
1:36
Let's uh see a demo and then we will see
1:40
the
1:42
technical uh design and solution that
1:46
was done in order to achieve this use
1:47
case.
1:50
So this is my external website where my
1:54
enhanced web chat code snippet is hosted
1:57
here.
1:59
As an end user, I can click need help
2:01
with my order or I can select need help
2:04
with my case or I can also type in the
2:08
message I would like
2:13
to know my order
2:16
status. The order number is 1 2 3 4 5.
2:22
I'm giving some random number. As an end
2:24
user, I will click send icon.
2:28
It is automatically invoking my uh
2:31
enhanced web chat. The agent force agent
2:34
joined the conversation.
2:36
The message whatever I typed in is
2:39
passed to the agent for service agent.
2:41
The agent force agent is trying to
2:44
assist me with the message.
2:46
So it is asking me to provide the email
2:48
address so that it can help in uh
2:51
checking the order uh status.
2:54
If I didn't have this custom solution,
2:56
then what I would have done is I I would
2:59
have clicked the chat icon which appears
3:01
on the bottom right. I should wait for
3:03
the a enhanced chat widget to load. I
3:06
should wait for the agent for service
3:08
agent to join and then I have to type in
3:11
this message.
3:15
Now let me end the chat, close it. But
3:18
with this simple UI experience, I was
3:21
able to reduce the overall time for the
3:24
end users to vent out their issues.
3:28
Now let's look at the technical uh side
3:32
of it. So this is the CSS I have used
3:36
for this particular
3:39
uh chat UI experience. I have given
3:42
couple of suggestions and then I have
3:44
used input box with an uh send icon so
3:48
that whenever they click it, it will
3:50
send that message. Okay, I'm not going
3:53
to go deep into the HTML part of it, but
3:57
this is the CSS and also this is the
4:00
HTML uh part of it.
4:04
So the important thing here is whenever
4:07
they click the send icon or whenever
4:10
they select any of the recommendations
4:13
or suggestions that are given here,
4:17
it will invoke
4:22
hide chat container. So with the help of
4:24
hide chat container JavaScript method,
4:27
I'm hiding the chat UI. So because
4:29
whenever I select any of these options
4:31
or whenever I input the message and then
4:33
whenever I click this send icon I wanted
4:35
to hide this chat UI. So with that
4:39
particular uh JavaScript method I'm
4:41
hiding it. Once that is done
4:46
I am launching the chat with the help of
4:49
launch chat JavaScript method. In this
4:51
uh launch chat JavaScript method, I am
4:54
making use of embedded service
4:57
bootstrap.utilap
4:58
api.launch chat method. This method will
5:02
invoke the embedded uh service
5:05
deployment code snippet. It will try to
5:08
open the chat widget. Whenever I select
5:11
any of these options or whenever I input
5:14
some message and then I click send icon,
5:16
it will open the chat widget. Okay. So
5:18
with the help of that I was able to
5:20
launch it. Once that is launched I'm
5:23
using send message to chat method. So
5:25
this is the send message to chat method.
5:29
The JavaScript method. Here I'm using
5:32
set timeout. In the set timeout I'm
5:34
using embedded service bootstrap.util
5:37
API dot send text message method. with
5:41
the help of this message I am sending
5:43
the
5:45
suggestions whatever they have selected
5:47
or if they have select or if they have
5:50
entered the message and then if they
5:51
clicked send icon the message whatever
5:54
they have inputed is passed on to this
5:58
uh embedded service bootstrap utili send
6:02
text message whenever they end the
6:05
conversation
6:08
I wanted to display the chat chat I chat
6:11
UI again in order to achieve that I'm
6:14
making use of the events that are
6:16
available in enhanced chat on embedded
6:19
messaging conversation opened whenever
6:21
this event is fired I'm hiding the chat
6:24
container so whenever the chat widget is
6:27
opened I wanted to hide the chat
6:30
container so I will hide it whenever the
6:33
chat widget from the Salesforce embedded
6:35
uh uh service deployment is launched
6:38
next on embedded messaging window close
6:41
whenever they close the window or
6:43
whenever the messaging button is
6:45
created. So here the uh on the bottom
6:48
right corner the messaging uh the the
6:50
chat icon will be loaded. Whenever that
6:53
happens I'm making use of show chat
6:56
container method using this show chat
6:59
container I'm just displaying the uh
7:02
chat UI. So with the help of util API
7:05
and also with the help of event listener
7:08
I was able to achieve this particular
7:10
experience. One more important thing
7:12
here is I'm making use of embedded
7:15
service bootstrap dot settings dohide
7:18
chart button onload equal to true. I'm
7:21
making use of this particular uh
7:23
attribute to true so that whenever the
7:27
page is loaded by default the chat icon
7:30
which appears on the bottom right will
7:32
be hidden so that I'm giving an
7:35
experience to the end users to select
7:37
any of these suggestions or they can
7:41
input the message here and then they can
7:43
click the send icon.
7:46
Please check the video description. In
7:48
the video description, I have shared my
7:50
blog post. From the blog post, you will
7:53
be able to see the entire implementation
7:56
design and solution. And also, I have
7:59
shared the entire HTML code I have used
8:02
in my external website to achieve this
8:04
user experience.
8:11
I hope it was helpful.
8:18
Thank you for watching.
#Internet Software