Up next in 10
Hide Chat Icon and launch Messaging on Button Click in Salesforce Messaging for In App and Web
1K views
Dec 4, 2024
embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true; can be used to hide the Salesforce Messaging for In-App and Web chat icon when the Page loads. embeddedservice_bootstrap.utilAPI.launchChat() can be used to launch the Salesforce Messaging for In-App and Web Chat Widget. Blog Post: https://www.infallibletechie.com/2024/12/hide-chat-icon-and-launch-messaging-on-button-click-in-salesforce-messaging-for-in-app-and-web.html
View Video Transcript
0:06
hello everyone in this video we are
0:09
going to see how to hide the chat
0:12
icon and invoke or launch the Salesforce
0:15
messaging for inapp and web on a button
0:21
click in Salesforce messaging for inap
0:23
and web we can make use of embedded
0:27
servicecore bootstrap do settings dot
0:31
hide chat button on load value to true
0:35
so that it will hide the chat chat icon
0:39
which
0:41
appears for example
0:45
here if you set that attribute to true
0:49
then it will hide the chat icon which
0:52
gets displayed here so this is the chat
0:55
icon if we want to disable it or hide it
0:59
then we have to set this value to
1:04
True embedded servicecore bootstrap do
1:08
util ap. launch chat method can be
1:11
invoked to launch the Salesforce
1:14
messaging for inapp and web chat
1:17
widget since this is not hidden if we
1:19
click it it uh launches the widget and
1:23
we will be able to uh converse with the
1:26
uh service rep so in order to open that
1:30
chart widget we have to make use of
1:32
embedded servore bootstrap api. launch
1:35
chart
1:40
method in this video we are going to
1:43
see how to do that in Salesforce
1:46
experience Cloud
1:49
site in the Salesforce experience Cloud
1:53
site we have to
1:55
add this JavaScript
2:00
in the head
2:02
markup here I'm adding a event
2:06
listener for on embeded messaging ready
2:09
so whenever on embeded messaging ready
2:12
is uh fired it will set this uh hide
2:16
chart button on load to true this will
2:20
this on embeded messaging ready event
2:22
will be fired when the experience Cloud
2:25
site loads the embedded
2:28
messaging so here here I have added
2:31
embedded messaging so when this
2:33
particular component loads it will fire
2:36
on embedded messaging ready event inside
2:39
that event once that event is fired it
2:42
will listen to that event and then it
2:44
will hide the chart
2:47
icon I am adding a custom add event
2:51
listener the name is launch maaw chat
2:55
event whenever this event is fired it
2:59
will launch
3:01
chat how it is launching is it is
3:04
invoking launch chat JavaScript method
3:08
so this is the launch chart JavaScript
3:10
method I have a console.log statement
3:13
here I'm using embed servicecore
3:15
bootstrap U api. launch chart method to
3:18
invoke the chat
3:21
widget this will be fired only when this
3:24
particular event is fired in order to
3:27
fire this event
3:30
I am making use of a simple lightning
3:33
web component in the lightning web
3:35
component I have a button whenever this
3:37
button is clicked it will call this
3:40
handle click method in the handle click
3:42
method I have a console.log statement
3:45
using document. dispatch event method
3:49
I'm dis I'm firing a event I'm not going
3:52
to pass any details like I'm not going
3:54
to send any payload I have to just
3:56
invoke uh the event listener so that it
3:59
will launch the the chart widget so I'm
4:01
just
4:02
firing um a simple custom
4:05
event uh with the name launch maw chat
4:08
event once this is
4:11
fired it will invoke laun chat method
4:15
here it will invoke laun chart method
4:17
from the Salesforce messaging util API
4:20
and then it will load the uh chart
4:25
wiet in the experience Cloud site we
4:28
have to go to Advanced you have we have
4:30
to add the JavaScript code
4:34
here one more thing is go to security
4:37
and
4:39
privacy and uh set relaxed
4:43
CSP if we set it to strict CSP then any
4:47
JavaScript code inside this head markup
4:49
will not fire so that's the reason I
4:52
have
4:54
set security level for the CSP to relax
4:58
to CSP
4:59
once this is done publish your
5:01
experience Cloud
5:03
site now let's test
5:07
it as of now the chat widget is not
5:11
loading the chat icon is also not
5:13
visible to invoke so now if I click this
5:16
laun
5:16
chat this button is coming from this
5:19
particular
5:21
uh laun chat lightning web
5:26
component so in this lightning web
5:28
component when I click launch chat it
5:30
will call handle click that will fire
5:33
launch maw chat event
5:41
uh so
5:43
now it started the messaging for inapp
5:46
and web chat uh and then it loaded the
5:49
chat page and click off a
5:54
button for this head markup code please
5:58
check the video description in the video
6:00
description I have shared my blog post
6:02
from the blog post you should be able to
6:04
get this sample JavaScript code for your
6:06
reference I have also shared the
6:09
lightning web component code which I
6:11
have used to click the button and to
6:15
dispatch the launch maw chat
6:18
event to the Head markup code uh for the
6:22
ad event listener so even the lightning
6:25
web component code is available
6:34
I hope it was
6:41
helpful thank you for watching
#Internet Software