Hello everyone,

We are currently deploying the salesforce livechat agent on some pages of our website. But I have some difficulties to make it work properly, as it randomly doesn't show up on loaded page.

- I am connected at the Omni channel on our Lightning Experience platform while performing the tests
- Our website is on Jahia
- We load the livechat agent through TagCommander for it to load when the visitor accepts the associated cookies

First things first, here is the code we implemented on TagCommander :
 

<script src="https://ourcompagnyprivateurl.my.salesforce.com/embeddedservice/5.0/esw.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
	function loadScript(url, callback) {
		// Adding the script tag to the head as suggested before
		var head = document.head;
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = url;

		// Then bind the event to the callback function.
		// There are several events for cross browser compatibility.
		script.onreadystatechange = callback;
		script.onload = callback;
		
		// Fire the loading
		head.appendChild(script);
	}
	
	var livechat = function() {
		// GDPR Link
		console.log('function livechat');
		var rgpdDiv = document.createElement("div");
		var rgpdLink = document.createElement("a");
		var rgpdSpan = document.createElement("span");
		rgpdLink.setAttribute('href', 'https://compagny-specific-url.html');
		rgpdLink.setAttribute('target', '_blank');
		rgpdLink.innerHTML = 'Cliquez ici';
		rgpdSpan.innerHTML = '&#160; pour en savoir plus sur la protection de vos données personnelles';
		rgpdDiv.appendChild(rgpdLink);
		rgpdDiv.appendChild(rgpdSpan);
		rgpdDiv.setAttribute('style', 'margin-bottom: 15px;margin-left: 15px; margin-right: 15px');
		var rgpdDisp = new Boolean(true);
		
		embedded_svc.addEventHandler("onAgentMessage", function(data) {
			console.log('function onAgentMessage');
			if (document.getElementsByClassName("chatSessionStartTime").length !== 0 && rgpdDisp) {
				document.getElementsByClassName("chatSessionStartTime")[0].appendChild(rgpdDiv);
				rgpdDisp = false;   
			}
		});
		
		setTimeout(function () {
			console.log('function setTimeout');
			if (/Android|iPhone|iPod|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
				if (document.getElementsByClassName("helpButtonEnabled").length !== 0 ) {
					document.getElementsByClassName("helpButtonEnabled")[0].style.setProperty( 'display', 'block', 'important' );
				} else {
					console.log('mobile: no helpButtonEnabled found');
				}
			} else {
				if (document.getElementsByClassName("helpButtonEnabled").length !== 0 ) {
					document.getElementsByClassName("helpButtonEnabled")[0].click();
				} else {
					console.log('desktop: no helpButtonEnabled found');
				}
			}
		}, 2000);
		
		var initESW = function(gslbBaseURL) {
			console.log('initESW');

			embedded_svc.settings.displayHelpButton = true; // Or false
			embedded_svc.settings.language = ''; // For example, enter 'en' or 'en-US'

			embedded_svc.settings.defaultMinimizedText = 'Chatter avec nous'; //(Defaults to Chat with an Expert)
			embedded_svc.settings.disabledMinimizedText = 'Aucun conseiller disponible'; //(Defaults to Agent Offline)
			embedded_svc.settings.loadingText = 'Chargement en cours'; //(Defaults to Loading)

			embedded_svc.settings.enabledFeatures = ['LiveAgent'];
			embedded_svc.settings.entryFeature = 'LiveAgent';
		
			embedded_svc.settings.avatarImgURL = "https://personalized-url/xpLiveAgentResilAvatar";
			embedded_svc.settings.chatbotAvatarImgURL = "https://personalized-url/xpLiveAgentResilBotAvatar";

			embedded_svc.init(
				'https://personalized-url.my.salesforce.com',
				'https://personalized-url.force.com/liveAgentChatResil',
				gslbBaseURL,
				'00D7Z0000004qe4',
				'xpLAREmbeddedService',
				{
					baseLiveAgentContentURL: 'https://c.la3-c1cs-cdg.salesforceliveagent.com/content',
					deploymentId: 'XXXXXXXX',
					buttonId: '5737Z000000Gmas',
					baseLiveAgentURL: 'https://d.la3-c1cs-cdg.salesforceliveagent.com/chat',
					eswLiveAgentDevName: 'XXXXXXX',
					isOfflineSupportEnabled: false
				}
			);
		};

		if (!window.embedded_svc) {
			console.log('create script');
			var s = document.createElement('script');

			s.setAttribute('src', baseSFUrl + '/embeddedservice/5.0/esw.min.js');
			s.onload = function() {
				initESW(null);
			};
			document.body.appendChild(s);
		} else {
			console.log('call initESW');
			initESW('https://service.force.com');
		}
	};
	
	// Simplified for example, we test here the baseSFUrl according to the environment
	var baseSFUrl = 'https://our-company-url.salesforce.com';
	loadScript(baseSFUrl + '/embeddedservice/5.0/esw.min.js', livechat);


	/**
	 * Utility function to add CSS in multiple passes.
	 * @param {string} styleString
	 */
	function addStyle(styleString) {
		var style = document.createElement('style');
		style.textContent = styleString;
		document.body.appendChild(style);
	}

	addStyle("\
		// ... inline css
	");
</script>

Now, here are the problems : we come through 3 different cases :

1. It works
2. I've got the console log error "desktop: no helpButtonEnabled found" from the setTimeout function, and no chat appears
3. I've got in the console the error "ReferenceError: embedded_svc is not defined", and no chat appears

Most of the time, when it works one time, I can reload the page and it will still work, as every JS are cached. But it often takes a lots of try before working.

Looking in the network, I've got the esw.min.js loaded, with liveagence.esw.min and others JS from salesforce.
Is there something I am missing ? It seems to come from loading order, but I can't find where and how to solve this.
Any help would be appreciated on this !