Hello everyone. In this video, we are
going to see how to implement Salesforce
enhanced chat inline mode.
Before we get started, let's try to find
the difference between floating mode and
inline mode.
When we test the enhanced web chat,
we get a chat icon on the bottom right
corner. End users can can click this uh
chat icon which appears on the bottom
right corner so that they can start the
conversations.
But if you wanted to have a rich user
experience where you wanted to have a
div element in your HTML DOM and then
you wanted to have your chat widget
directly loaded into that div element
then you can make use of the inline
mode.
So in the inline mode it will be
displayed like this.
Instead of giving a chat icon which
appears on the bottom right corner and
loading the uh chat conversation, we can
directly
display the chat widget within a div
element.
So if you have a dedicated contact us
page or if you wanted to have a sidebar
with the chat
and then if you have a member portal
where you wanted to show the chat widget
based on your branding then you can
definitely make use of this inline mode.
In order to achieve this inline mode,
you have to use embedded service
bootstrap dot settings dot display mode
equal to inline. Once we set this uh
along with the code snippet what we get
from the embedded code uh embedded code
snippet then you will be able to achieve
the inline mode. Let's say you wanted to
hide the header. So this is the header
we get and then if you wanted to hide
the header then you can make use of
embedded service bootstrap dot settings
dot header enabled equal to false. So if
you set this along with the code snippet
what we get from the embedded uh
embedded service deployment then we will
be able to hide the header.
Uh so the key benefits are seamless
integration. it makes use of the div
element which you are uh going to um uh
uh target it. So for example here this
is the div
element uh I'm using it in my HTML in
order to
uh target this u particular div element
I am making use of embedded
service.bootstrap bootstrap dots
settings dotarget element equal to
document dot getelement by id of chat
container here the div element id is a
chat- container so I'm targeting I'm
making use of the target element
attribute and then I'm passing what I
get from document getelement by id
okay next we have full dom control uh so
that we can uh uh achieve the user
interface consistency.
Instead of having the uh widget on the
uh bottom right corner, you can control
where and how the chat widget should be
loaded on your HTML page.
Let's see a demo.
as a service agent. I'm going to be
available in omni channel
and I'm going to refresh my page here.
So I'm as a service agent I'm able to
see the messages from the end user
need to check
my order status.
So
instead of having this chat widget on
this uh bottom right corner, I'm able to
control it and have it in the middle of
the page.
Please check the video description. In
the video description, I have shared my
blog post. From the blog post, you
should be able to get the sample code
along with the embedded service codes
code snippet for your reference. When
you make use of this code snippet as a
reference, please try to replace all uh
the placeholders whatever I have given
here like your domain,
the URL and also
there should be one more. Yeah. So here
and here also it should be your
force.com site URL. So try to use all
those um when you try to reference this
code and implement it.
I hope it was helpful.
Thank you for watching.