function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alaric WimerAlaric Wimer 

How to initialize Embedded Service Web Chat with a separate clickable button on web page?

I have an interesting use case. We are using Salesforce's Embedded Chat service, but it needs to also be able to open by the click of a button located somewhere on the page.

This means it opens in two ways:

1. The standard way (clicking the embedded chat in the bottom right of the screen)

2. A separate button on the page that should open that same embedded chat

 

I already know that using Chat Buttons and Embedded Chat on the same page is not compatible with Salesforce. However, is it possible to lauch the Embedded Chat with a button click? Essentially, we just need two ways to launch the embedded chat: button click on page, and standard way

Best Answer chosen by Alaric Wimer
Alain CabonAlain Cabon
There is a standard mechanism of "Invitation".

Otherwise; it is just a click for the element read by a querySelector like below (simple if you don't test the correct message, "Agent Offline" will do nothing and not tested here)

<span class="message">Agent Online</span>
  
<input type="button" class="button" onClick="openChat();" value="Open Chat Window" />

	<script type="text/javascript">
		function openChat() {
			var button = document.querySelector("#helpButtonSpan > span.message");
            button.click();
		}
	</script>

This code is register for the event "message" ( you open a chat window (minimized js) and not really usefull but there is embedded_svc.isMessageFromSalesforceDomain(c) ). 
b.prototype.setupMessageListener = function () {
		window.addEventListener("message",
			function (a) {
			var b = a.data,
			c = a.origin.split(":")[1].replace("//", "");
			b && b.method && embedded_svc.isMessageFromSalesforceDomain(c) && ("session.onLoad" === b.method && -1 === this.settings.iframeURL.indexOf(c) && (c = this.settings.iframeURL.split("/")[2], a = a.origin.split("/")[2], this.settings.iframeURL = this.settings.iframeURL.replace(c, a)), a = b.method.split(".")[0].toLowerCase(), -1 === this.availableFeatures.indexOf(a) ? (this.pendingMessages[a] || (this.pendingMessages[a] = []), this.pendingMessages[a].push({
						direction: "incoming",
						payload: b
					})) : this.handleMessage(b))
		}
			.bind(this), !1)
	};

All Answers

Alain CabonAlain Cabon
There is a standard mechanism of "Invitation".

Otherwise; it is just a click for the element read by a querySelector like below (simple if you don't test the correct message, "Agent Offline" will do nothing and not tested here)

<span class="message">Agent Online</span>
  
<input type="button" class="button" onClick="openChat();" value="Open Chat Window" />

	<script type="text/javascript">
		function openChat() {
			var button = document.querySelector("#helpButtonSpan > span.message");
            button.click();
		}
	</script>

This code is register for the event "message" ( you open a chat window (minimized js) and not really usefull but there is embedded_svc.isMessageFromSalesforceDomain(c) ). 
b.prototype.setupMessageListener = function () {
		window.addEventListener("message",
			function (a) {
			var b = a.data,
			c = a.origin.split(":")[1].replace("//", "");
			b && b.method && embedded_svc.isMessageFromSalesforceDomain(c) && ("session.onLoad" === b.method && -1 === this.settings.iframeURL.indexOf(c) && (c = this.settings.iframeURL.split("/")[2], a = a.origin.split("/")[2], this.settings.iframeURL = this.settings.iframeURL.replace(c, a)), a = b.method.split(".")[0].toLowerCase(), -1 === this.availableFeatures.indexOf(a) ? (this.pendingMessages[a] || (this.pendingMessages[a] = []), this.pendingMessages[a].push({
						direction: "incoming",
						payload: b
					})) : this.handleMessage(b))
		}
			.bind(this), !1)
	};
This was selected as the best answer
Alaric WimerAlaric Wimer
Thank you Alain, that's exactly the selector I was looking for. All the best
DAn EvertonDAn Everton

Hi - I would like to invoke the chatbot with a text link rather than a buton

Also - is it possible to show an alernate massage when chatbot is out of ours/off?

Thanks
 
Vijay Khot 2Vijay Khot 2
Hi Alaric Wimer
can the following scenario possible with LWC or Aura
A separate button on the page that should open that same embedded chat