Up next in 10
Salesforce Enhanced Chat v2 Inline Mode in Experience Cloud Site
Jan 6, 2026
Show More Show Less
View Video Transcript
0:07
Hello everyone,
0:09
happy new year 2026.
0:13
In this video, we are going to see how
0:16
to make use of Salesforce enhanced chat
0:20
v2
0:21
with the inline mode in experience cloud
0:24
site.
0:29
In my previous uh video for the inline
0:32
mode in uh Salesforce enhanced chart
0:35
version two, I was able to demo using
0:39
external third party website. We made
0:41
use of uh uh GitHub preview
0:46
uh site using which we were able to
0:49
achieve it. But if you have a
0:52
requirement where you wanted to achieve
0:54
the same
0:56
inline mode in Salesforce enhanced chat
0:58
version 2 in experience cloud site then
1:01
you can make use of this video as a
1:03
reference.
1:05
Let's see a demo and then we will see
1:08
the
1:10
technical uh design b behind that. Okay,
1:14
this is my experience cloud site and I'm
1:17
able to achieve inline mode for my
1:22
enhanced
1:23
me uh enhanced chat um and it is hosted
1:27
in my experience cloud site. So let's
1:29
see a demo. So I'm going to type test
1:33
as an agent.
1:35
Let me go available in omni channel so
1:37
that I can receive that messaging
1:39
session.
1:49
So I'm sending a message as an agent
1:53
and I'm able to see that message
1:59
and I can end the chat also when I'm
2:02
using inline mode in Salesforce enhanced
2:06
chat.
2:08
In order to achieve this uh
2:11
inline mode in Salesforce enhanced chat
2:14
in in the experience cloud site,
2:17
I made use of lightning web component.
2:25
We get embedded service code uh snippet.
2:30
when we create a channel uh the embedded
2:33
service deployment is automatically
2:34
created and we get the code from the
2:37
embedded service deployment. So for
2:39
example here
2:42
this is in version two it is not in
2:45
version one. I get the code snippet from
2:48
my embedded service deployment
2:54
in my experience cloud builder.
2:58
I dragged and dropped the lightning web
3:00
component so that I can achieve inline
3:03
mode in Salesforce enhanced chat in the
3:06
experience cloud site.
3:11
This is the lightning uh web component.
3:15
This is the CSS
3:18
for the chart container. In order to
3:21
achieve this uh look and feel, I made
3:24
use of this CSS file. And in the HTML
3:28
file, we will just have the chart
3:30
container class and a simple div.
3:39
So this is where
3:42
I have made use of this uh
3:46
code snippet
3:48
so that I can render that in my
3:50
lightning web component.
3:56
So if you want to compare so this is the
3:59
init embedded messaging method instead
4:01
of function I am making use of window
4:05
dot init embedded messaging so that I
4:08
can call this method when my script is
4:11
loaded because here
4:14
when this script is loaded they are
4:16
calling that init embedded messaging
4:18
function. So in order to achieve it I'm
4:21
making use of window init embedded
4:25
messaging
4:27
here in order to display inline and to
4:30
target that uh
4:33
div I made use of these two lines of
4:36
code
4:38
rest are everything uh from the code
4:40
snippet. Next in order to load the
4:44
script I am making use of
4:46
document.createelement create element
4:49
and the type is script and the source is
4:52
uh the source what we get it from the
4:56
code snippet
5:00
and the type I have set it to text or
5:02
JavaScript. I have made use of differ
5:05
attribute. If you wanted to know more
5:07
about the defer attribute uh search in
5:09
uh uh JavaScript uh uh library or or
5:13
from any external website so that you
5:15
will get more understanding of why we
5:17
need this script differ even if you
5:19
don't use it will work without an issue
5:23
and uh script.onload I'm calling that
5:26
window init embedded messaging.
5:29
So this is the method that will be
5:31
invoked once the script is loaded
5:33
successfully
5:34
and then using document.body.appen
5:37
child I'm adding the script.
5:44
Okay.
5:46
In the meta.xml XML file. I'm using
5:49
community uh lightning community page
5:51
and lightning community default so that
5:54
I will be able to add the lightning web
5:56
component in the experience cloud site.
6:07
Please check the video description. In
6:09
the video description, I have shared my
6:10
blog post. From the blog post, you
6:13
should be able to get the sample
6:14
lightning web component code for your
6:16
reference.
6:30
I hope it was helpful.
6:39
Thank you for watching.
Internet Software
Science