How to reopen Web Chat Widget v2 on page navigation

[Colton_Young]

Hi there,

I currently have the chat feature included on all of my pages. My config file (GenesysChatConfig.js) looks like this:

window._genesys = {
		widgets : {
			main : {
				theme : 'light',
				preload: ['webchat'],
			},
			webchat : {
				emojis : true,
				autoInvite : {
					enabled : true,
					timeToInviteSeconds : 300,
					inviteTimeoutSeconds : 15,
				},
				actionsMenu : true,
				uploadsEnabled : true,
				confirmFormCloseEnabled : true,
				charCountEnabled : true,
				chatButton: {
			    	enabled: false
			    },
				transport : {
					type : 'purecloud-v2-sockets',
					dataURL : 'https://api.mypurecloud.com',
					deploymentKey : [KEY_HERE],
					orgGuid : [ORG_GUID_HERE],
					interactionData : {
						routing : {
							targetType : 'QUEUE',
							targetAddress : [CHAT_QUEUE_NAME_HERE],
							priority : 2
						}
					}
				},
				userData : {
					addressStreet : dataToStartChat.address,
					addressCity : dataToStartChat.city,
					addressPostalCode : dataToStartChat.zip,
					addressState : dataToStartChat.state,
					phoneNumber : dataToStartChat.phone + ' Ext: ' + dataToStartChat.extension,
					phoneType : 'Work',
					// These fields should be provided via advanced
					// configuration
					// firstName: first,
					// lastName: last,
					// email: email,
					// subject: 'Chat subject'
				},
				// form : {
				// autoSubmit : false,
				// firstname : dataToStartChat.firstName,
				// lastname : dataToStartChat.lastName,
				// email : dataToStartChat.email,
				// subject : ""
				// },
				form : {
					wrapper : "<table></table>",
					inputs : [

						{
							id : "cx_webchat_form_firstname",
							name : "firstname",
							maxlength : "100",
							placeholder : "@i18n:webchat.ChatFormPlaceholderFirstName",
							label : "@i18n:webchat.ChatFormFirstName",
							value: dataToStartChat.firstName,
							validateWhileTyping: true, 
							validate: function(){
								return document.getElementById('cx_webchat_form_firstname') === null || document.getElementById('cx_webchat_form_firstname').value !== "";
							}
						},

						{
							id : "cx_webchat_form_lastname",
							name : "lastname",
							maxlength : "100",
							placeholder : "@i18n:webchat.ChatFormPlaceholderLastName",
							label : "@i18n:webchat.ChatFormLastName",
							value: dataToStartChat.lastName,
							validateWhileTyping: true, // default is false
							validate: function(){
								return document.getElementById('cx_webchat_form_lastname') === null || document.getElementById('cx_webchat_form_lastname').value !== "";
							}
						},

						{
							id : "cx_webchat_form_email",
							name : "email",
							maxlength : "100",
							placeholder : "@i18n:webchat.ChatFormPlaceholderEmail",
							label : "@i18n:webchat.ChatFormEmail",
							value: dataToStartChat.email,
						},

						{
							id : "my_custom_subject_field",
							name : "customField2",
							maxlength : "100",
							placeholder : "How can we help you?",
							label : "Subject",
						} ]
				},
			}
		}
	};

Which is loaded in like this on each page:

<script src="https://apps.mypurecloud.com/widgets/9.0/cxbus.min.js" 
 onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.com/widgets/9.0/plugins/'}); 
 CXBus.loadFile('<%=request.getContextPath()%>/resources/js/GenesysCloudChat/GenesysChatConfig.js')
 .done(function(){CXBus.loadPlugin('widgets-core')});">
</script>

I then have a custom button that I show on each page that executes the following code when clicked:

const customPlugin = CXBus.registerPlugin('Custom');
customPlugin.command('WebChat.open');

This works fine when the customer first starts a chat, but when I navigate to a different page in my application (with an ongoing chat still open), the chat doesn't automatically re-open and calling the "customPlugin.command('WebChat.open');" command again doesn't re-open the existing chat (or start a new chat, for that matter).

I can see all of the cookies are still set correctly.

Any ideas what I'm missing?

Thanks!
-Colton

[Ranjith_Manikante_Sa]

Hi Colton,

On page load, Widgets tracks for cookie existence and auto opens when there is an active chat session. In this case, it appears it's not able to parse the cookie existence and thats why it's failing to restore. This could happen when it's not able to parse the domain/subdomain correctly, the requirement is that all the pages should fall under the same domain/subdomain. Here is the documentation link explaining in detail https://all.docs.genesys.com/WID/Current/Developer/GWCCookies.

Please let us know if this helps, thanks.

[Colton_Young]

This worked, thank you!

[Michael_Wang]

Hi Colton and Ranjith, I am trying to do something extremely similar by having the chat widget and existing chat with a Dialog Engine bot flow follow with the user and reopen when they navigate to a different page in the same domain. I am also using chat widget V2 and my config and script are essentially the same except for differences in the form and user data. However, unlike in your situation, I do not see the cookies being stored properly. May I ask what you changed and how you reached a solution? I read through the documentation that Ranjith sent and I could not come to a solution.