Chat is still showing as a contact option when outside of chat hours/agents are invisible
RespondidaHi Guys
We have a new widget code that allows us to customise the answerbot, however when we check it in sandbox the behaviour is working as expected:
Chat is not shown as an option outside of chat hours/agents are invisible
However, when we check this in production it's showing chat as a contact option at all times! I'm struggling to find out what is causing this - can you help please :)
// This is upgraded Zendesk Widget handler script. Ver: 1.8 Updated: 2019-07-08
// It is intended to simplify the control of Widget behaviour through custom JavaScript configuration
// Script is using Widget JS API https://developer.zendesk.com/embeddables/docs/widget/introduction
// Script expects integrated Chat experience to be available
// To run the script follow the steps below:
// 1. update WIDGET_KEY
// 2. Decide which part of the Widget you want to run using runWidgetLogic().init({settings object});
// 3. Configure {settings object}
// 4. Copy final code to desired pages and run.
(function() {
var WIDGET_KEY = 'whereIenterwidgetkey';
function fireWidgetOnLoad() {
var zendeskScript = document.createElement('script');
zendeskScript.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + WIDGET_KEY;
zendeskScript.id = 'ze-snippet';
zendeskScript.addEventListener('load', function() {
/**
* Uncomment to automatically populate the name/emmail fields in the case of authenticated users if used in Help Center
var name, email;
try {
name = HelpCenter && HelpCenter.user.name || '';
email = HelpCenter && HelpCenter.user.email || '';
} catch(err) {
name = '';
email = '';
}
*/
/**
* Change the Widget settings.
* @params {object} Config - required object defining Widget channels and settings
*/
runWidgetLogic().init({
// REQUIRED: enable HC Search?
HCSearch: true,
// REQUIRED: enable chat?
chat: true,
// REQUIRED: enable contact form?
contactForm: true,
// REQUIRED: enable Talk (call back)?
talk: false,
// REQUIRED: enable answerBot?
answerBot: false,
// OPTIONAL: Chat department configuration
// enabled: [''] will hide Department selector
// select: 'DEPARTMENT NAME' will preset Chat department
departments: {
enabled: [''],
select: 'JDepartment'
},
// OPTIONAL: Set widget language https://developer.zendesk.com/embeddables/docs/widget/core#setlocale
locale: 'en-gb',
// load the Web Widget in the "show" state: https://developer.zendesk.com/embeddables/docs/widget/core#show
widget_visibility: 'show',
articleLabels: ['topSuggestions'],
//prefill_name: name,
//prefill_email: email,
//identify_name: name,
//identify_email: email,
// OPTIONAL: config for window.zESettings.webWidget
webWidgetConfig: {
// Specifies whether to enable or disable Google Analytics tracking. https://support.zendesk.com/hc/en-us/community/posts/360003215947
analytics: true,
zIndex: 9999999999,
contactOptions: {
enabled: true,
contactButton: {
'*': 'Get in Touch'
},
// The Chat Label on the Contact Options window
chatLabelOnline: {
'*': 'Chat with us live'
},
chatLabelOffline: {
'*': 'Chat is Offline'
},
// The Contact Form Label
contactFormLabel: {
'*': 'Email us'
}
},
// The Widget Color
color: {
theme: '#000000'
},
launcher: {
// The Web Widget button title (HC/Contact Form are On)
label: {
'*': 'Need Help?'
},
// The Web Widget button title (HC is Off)
chatLabel: {
'*': 'Chat now'
},
// Set to true if you want to display the label in mobile browsers
mobile: {
labelVisible: false
}
},
helpCenter: {
// Sets the title of the Help Center Window
title: {
'*': 'Support'
},
// Sets the visibility of the button that would redirect the user to the full HC portal
originalArticleButton: true
},
contactForm: {
title: {
'*': 'Support'
},
// Set a specific ticket form. The form ID can be found in the URL while on the form page. Uncomment the following line to enable this.
ticketForms: [{ id: 1234566 }],
// Enable to disable the attachments option in the Contact Forms
attachments: true
},
// Sets the visibility of the popout button
navigation: {
popoutButton: {
enabled: false
}
},
talk: {
nickname: 'CallBack_UK'
},
chat: {
prechatForm: {
// The Prechat greeting text
greeting: {
'*': 'In order to help you as quickly as we can, please provide a little background information in the message area below and start chat . \n\n Just to let you know we regularly review our privacy policy. To view this please head to our website.'
}
},
title: {
'*': 'Live Chat'
},
concierge: {
// the Concierge parameters
avatarPath: '',
name: 'Support',
title: {
'*': 'Here to help'
}
},
// Sets the visibility of the "Email Transcript" option on the chat window:https://dl.dropbox.com/s/e822el7vir7ur8p/Web_Widget_chat_Window_menu_options_email_transcript.png?dl=0
menuOptions: {
emailTranscript: true
},
// Add the relevant tags to the Chat session
tags: ['chatsession_bc']
},
answerBot: {
title: {
'*': 'Support'
},
avatar: {
url: '',
name: {
'*': 'Lynne'
}
},
// Set to TRUE if you want the question to be asked before other contact options are displayed
contactOnlyAfterQuery: false,
search: {
labels: ['return']
}
}
}
});
});
document.getElementsByTagName('body')[0].appendChild(zendeskScript);
}
var runWidgetLogic = function() {
'use strict';
var ze_module = {};
ze_module.init = function(config) { // init Widget logic
if (zE && config) {
window.onload = _applyWidgetConfig(config);
} else {
console.log('ERROR: Widget or Widget configuration is missing. Widget settings will not be appllied.');
return;
}
};
function _applyWidgetConfig(config) { // execute Widget logic
_updateChatSettings(config);
_setLocale(config.locale);
_ww_visibility(config.widget_visibility);
_setKBSuggestions(config.articleLabels);
_updatePath(config.path);
_setUserDetails(config.prefill_name, config.prefill_email);
_IdentifyUsers(config.identify_name, config.identify_email);
_updateGlobalSettings(config);
}
function _setLocale(locale) { // set the Widget language
locale && zE('webWidget', 'setLocale', locale);
}
function _ww_visibility(widget_visibility) { // set the Widget visibility (hide/open/show)
widget_visibility && zE('webWidget', widget_visibility);
}
function _setKBSuggestions(articleLabels) { // set the Widget language
articleLabels && zE('webWidget', 'helpCenter:setSuggestions', {
labels: articleLabels
});
}
function _setUserDetails(prefill_name, prefill_email) { // Prefills the user details
prefill_email && zE('webWidget', 'prefill', {
name: {
value: prefill_name,
readOnly: true
},
email: {
value: prefill_email,
readOnly: true
}
});
}
function _IdentifyUsers(identify_name, identify_email) { // Identifies an end user to Zendesk
identify_email && zE('webWidget', 'identify', {
name: identify_name,
email: identify_email
});
}
function _updatePath(pathObject) { // update the chat visitor’s webpath.
pathObject && zE('webWidget', 'updatePath', pathObject);
}
function _setSurpressSettingProp(prop, val) { // extend config with suppress logic
if (window.zESettings && window.zESettings.webWidget) {
var ww = window.zESettings.webWidget;
if (ww[prop]) ww[prop].suppress = val;
else ww[prop] = {
'suppress': val
}
} else console.log('ERROR: Widget is missing window.zESettings object.')
}
function _updateGlobalSettings(config) { // update global Widget settings
window.zESettings = config.webWidgetConfig ? {
webWidget: config.webWidgetConfig
} : {
webWidget: {
chat: {
departments: {}
}
}
};
if (!window.zESettings.webWidget.chat) window.zESettings.webWidget.chat = {
departments: {}
};
_setSurpressSettingProp('helpCenter', !config.HCSearch);
_setSurpressSettingProp('contactForm', !config.contactForm);
_setSurpressSettingProp('talk', !config.talk);
_setSurpressSettingProp('answerBot', !config.answerBot);
// _setSurpressSettingProp('chat', !config.chat); // suppressing chat channel is handled after chat is connected
_adjustChatLabel(config.HCSearch, config.chat, config.contactForm)
}
function _adjustChatLabel(HCSearch, chat, contactForm) { // change launcher label if contact options and chat are enabled
// when contact options and chat are enabled Widget shows "Chat now" from webWidget.launcher.chatLabel,
// however, it opens contact options instead of chat.
// this function displays "Need Help?" from webWidget.launcher.label so label will make more sense
var wwConf = window.zESettings.webWidget;
if (wwConf.contactOptions && wwConf.contactOptions.enabled && wwConf.launcher) {
if (!(chat && !HCSearch && !contactForm)) wwConf.launcher.chatLabel = wwConf.launcher.label;
}
}
function _updateChatSettings(config) { // update Chat settings when chat is connected
zE('webWidget:on', 'chat:connected', function() {
_handleChatSettings(config);
// un-suppress chat channel if visitor is chatting, otherwise follow the setting for chat channel
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
suppress: !(config.chat || (zE && zE('webWidget:get', 'chat:isChatting')))
}
}
});
// /show/hide the concierge options in the profile card area
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
profileCard: {
avatar: true,
rating: true,
title: true
}
}
}
});
zE('webWidget:on', 'chat:status', function(status) {
_handleChatSettings(config);
});
// The below 2 functions can be used to identify particular events (chat started/ended), and as a result, perform actions like update 3rd parties (Google Analytics, etc)
// execute command on Chat Started
zE('webWidget:on', 'chat:start', function() {
// your code here
});
// execute command on Chat Ended
zE('webWidget:on', 'chat:end', function() {
// your code here
});
// When visitor is chating on one page and navigates to the page where chat is supressed
// it should re-open the Widget on the chat screen. Since there is no method to show chat screen
// this workaround will supress other channels > show Widget on the chat screen > re-enable
// other channels as per the config. Visitor may need to minimize and re-open the wiget to
// see the effect of re-enabling the other channels.
// Widget will not be auto-shown on mobile devices.
var isDesktop = !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
if ((zE && zE('webWidget:get', 'chat:isChatting')) && (config.HCSearch || config.contactForm || config.answerBot) && isDesktop) {
if (zE('webWidget:get', 'display') !== 'chat') {
zE('webWidget', 'updateSettings', {
helpCenter: {
'suppress': true
},
contactForm: {
'suppress': true
},
talk: {
'suppress': true
},
answerBot: {
'suppress': true
}
});
zE('webWidget', 'open');
zE('webWidget', 'updateSettings', {
helpCenter: {
'suppress': !config.HCSearch
},
contactForm: {
'suppress': !config.contactForm
},
talk: {
'suppress': !config.talk
},
answerBot: {
'suppress': !config.answerBot
}
});
}
}
});
}
function _handleChatSettings(config) {
if (config.departments) {
var department_status,
isDepartmentOnline,
isChatting = zE && zE('webWidget:get', 'chat:isChatting'),
hasDepartmentsToFilter = (config.departments.enabled !== undefined);
if (config.departments.select) {
department_status = zE('webWidget:get', 'chat:department', config.departments.select);
isDepartmentOnline = department_status.status === 'online';
}
// Chat will be suppressed when noone is chating or when department is offline
if (isChatting || isDepartmentOnline || hasDepartmentsToFilter) {
console.log('The department is online');
// ONLINE LOGIC
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
departments: config.departments,
suppress: false
}
}
});
} else {
// OFFLINE & UNDEFINED LOGIC (undefined = a department with this name doesn't exist OR the department has been disabled)
// suppress the Chat channel as the targeted department is offline
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
suppress: true
}
}
});
}
} else {
zE('webWidget', 'updateSettings', window.zESettings.webWidget);
}
}
return ze_module;
};
window.addEventListener ? window.addEventListener('load', fireWidgetOnLoad, !1) : window.attachEvent ? window.attachEvent('onload', fireWidgetOnLoad) : window.onload = fireWidgetOnLoad
})();
</script>
-
Hey,
The widget does not really manage Chat status, it just shows the options that are setup in Zendesk.
To start, it seems your code is quite complex. Via widget.premiumplus.io you can configure code that's a lot cleaner.
Minimum I would advise is enabling the ContactFormOptions
<script type="text/javascript">
window.zESettings = {
"webWidget": {
"contactOptions": {
"enabled": true
}
}
}
</script>But for your problem:
1. Do you have a schedule setup in Zendesk Chat? https://support.zendesk.com/hc/en-us/articles/360022184014-Creating-a-schedule-with-operating-hours-Professional-and-Enterprise-
2. If all agents are offline, does the chat icon still appear?
-
HI Thomas
Thanks for the link, will have a look at it.
In answer to your questions:
1: We have a schedule set up for each department
2: No the icon doesn't show if offline or outside of chat schedule
For our current script it doesn't display the chat option if outside of chat hours/agents are off. The only difference between the scripts is the additional customisation for Answer Bot - if I use this code in Sandbox then it works as expected (chat doesn't show if not available)
Regards
Dawn
-
Hi Thomas
Follow up on the above, I have used the script creator as recommended and got the option 'hide chat when offline' yet it still showing chat as an option?
Do you know if anything has changed in the back end of Zendesk which has changed the behaviour please?
Regards
Dawn
-
If you are sure all agents are offline and the widget still shows the chat option as online, I think it's best we escalate this to proper Support so they can take a look in your setup to guide you from there.
I can only say that
If all agents are invisible or away, the widget should show either chat as offline or show a contact form.
Iniciar sesión para dejar un comentario.
4 Comentarios