Up next in 10
Show More Show Less
View Video Transcript
0:06
Hello everyone. In this video, we are
0:09
going to see how to implement Salesforce
0:12
enhanced chat inline mode.
0:16
Before we get started, let's try to find
0:19
the difference between floating mode and
0:22
inline mode.
0:25
When we test the enhanced web chat,
0:32
we get a chat icon on the bottom right
0:35
corner. End users can can click this uh
0:39
chat icon which appears on the bottom
0:41
right corner so that they can start the
0:44
conversations.
0:46
But if you wanted to have a rich user
0:49
experience where you wanted to have a
0:52
div element in your HTML DOM and then
0:55
you wanted to have your chat widget
0:57
directly loaded into that div element
1:00
then you can make use of the inline
1:02
mode.
1:04
So in the inline mode it will be
1:06
displayed like this.
1:10
Instead of giving a chat icon which
1:12
appears on the bottom right corner and
1:14
loading the uh chat conversation, we can
1:18
directly
1:19
display the chat widget within a div
1:22
element.
1:26
So if you have a dedicated contact us
1:29
page or if you wanted to have a sidebar
1:32
with the chat
1:36
and then if you have a member portal
1:37
where you wanted to show the chat widget
1:41
based on your branding then you can
1:43
definitely make use of this inline mode.
1:46
In order to achieve this inline mode,
1:49
you have to use embedded service
1:51
bootstrap dot settings dot display mode
1:54
equal to inline. Once we set this uh
1:58
along with the code snippet what we get
1:59
from the embedded code uh embedded code
2:02
snippet then you will be able to achieve
2:04
the inline mode. Let's say you wanted to
2:07
hide the header. So this is the header
2:10
we get and then if you wanted to hide
2:12
the header then you can make use of
2:16
embedded service bootstrap dot settings
2:19
dot header enabled equal to false. So if
2:22
you set this along with the code snippet
2:24
what we get from the embedded uh
2:27
embedded service deployment then we will
2:29
be able to hide the header.
2:32
Uh so the key benefits are seamless
2:35
integration. it makes use of the div
2:37
element which you are uh going to um uh
2:42
uh target it. So for example here this
2:45
is the div
2:48
element uh I'm using it in my HTML in
2:51
order to
2:52
uh target this u particular div element
2:57
I am making use of embedded
3:00
service.bootstrap bootstrap dots
3:01
settings dotarget element equal to
3:04
document dot getelement by id of chat
3:07
container here the div element id is a
3:11
chat- container so I'm targeting I'm
3:14
making use of the target element
3:15
attribute and then I'm passing what I
3:19
get from document getelement by id
3:25
okay next we have full dom control uh so
3:29
that we can uh uh achieve the user
3:33
interface consistency.
3:36
Instead of having the uh widget on the
3:40
uh bottom right corner, you can control
3:43
where and how the chat widget should be
3:47
loaded on your HTML page.
3:51
Let's see a demo.
3:55
as a service agent. I'm going to be
3:57
available in omni channel
4:03
and I'm going to refresh my page here.
4:14
So I'm as a service agent I'm able to
4:16
see the messages from the end user
4:30
need to check
4:34
my order status.
4:40
So
4:42
instead of having this chat widget on
4:45
this uh bottom right corner, I'm able to
4:48
control it and have it in the middle of
4:50
the page.
4:58
Please check the video description. In
5:00
the video description, I have shared my
5:02
blog post. From the blog post, you
5:05
should be able to get the sample code
5:10
along with the embedded service codes
5:12
code snippet for your reference. When
5:15
you make use of this code snippet as a
5:17
reference, please try to replace all uh
5:21
the placeholders whatever I have given
5:23
here like your domain,
5:25
the URL and also
5:29
there should be one more. Yeah. So here
5:32
and here also it should be your
5:34
force.com site URL. So try to use all
5:37
those um when you try to reference this
5:40
code and implement it.
5:48
I hope it was helpful.
5:56
Thank you for watching.