How do I simulate omnichannel chat in Sandbox?

Salesforce developers who have implemented Service cloud with Omni channel features might know this hack very well. This article is for those who have been onboarded into a project that extensively uses chat and chatbot features. In order to test any small change on chat, – need to launch the chat functionality most of the time on the client website (can be done on Experience builder too). That means the deployed chat button Java script code is hosted on a website. Then how do I test my changes to the chat button in Sandbox without taking help from the web portal team to unit test my changes.

To get the chat initiation form as shown in above picture – need to follow few quick steps.

1. Navigate Set Up –> Embedded Service –> Embedded Service Deployments click on the Name to navigate to Embedded Service Deployment Settings
2. Go to the section – Embedded Service Code Snippets – click on Get code button which will display the the java script code as below

<style type='text/css'>                                                                                                              .embeddedServiceHelpButton .helpButton .uiButton { background-color: #8c1e41; font-family: "Arial", sans-serif; } .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #8c1e41; } </style> 
script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>
<script type='text/javascript'>
	var initESW = function(gslbBaseURL) {
		embedded_svc.settings.displayHelpButton = true; //Or false
		embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'

		//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
		//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)

		//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
		//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)

		// Settings for Chat
		//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
			// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
			// Returns a valid button ID.
		//};
		//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
		//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
		//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)

		embedded_svc.settings.enabledFeatures = ['LiveAgent'];
		embedded_svc.settings.entryFeature = 'LiveAgent';

		embedded_svc.init(
			'https://orgname--uat.sandbox.my.salesforce.com',
			'https://orgname--uat.sandbox.my.salesforce-sites.com/liveAgentSetupFlow',
			gslbBaseURL,
			'00D7f000000AEPZ',
			'Web_Chat',
			{
				baseLiveAgentContentURL: 'https://c.laxx-core1.sfdc-yfeipo.salesforceliveagent.com/content',
				deploymentId: '5728a000000xxxxx',
				buttonId: '5738a000000xxxxx',
				baseLiveAgentURL: 'https://d.la2s-core1.sfdc-yfeipo.salesforceliveagent.com/chat',
				eswLiveAgentDevName: 'Web_Chat',
				isOfflineSupportEnabled: false
			}
		);
	};

	if (!window.embedded_svc) {
		var s = document.createElement('script');
		s.setAttribute('src', 'https://orgname--uat.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js');
		s.onload = function() {
			initESW(null);
		};
		document.body.appendChild(s);
	} else {
		initESW('https://service.force.com');
	}
</script>

3. Navigate to setup – Developer console –> Click on File New to create Visual force page and copy and paste the above code between the tags <Apex:page></Apex:page>. Click on Preview which would take you to the sameple Chat button page to trigger chats in sandbox.

Initiating the chats here would trigger incoming chats to the agents with the required skills in the sandbox .

Sometimes it won’t work as expected in that scenario. Add the VF page URL to the CORS. Do the magic!!