Skip to main content
oh this is my 5th brand
/**
* Proactive Chat Widget | Page-level JS
*
* @created 7/1/2020
* @author David Anaya
*/
/**
* Zendesk Web Widget custom settings
*
* @type {Object}
*/
window.zESettings = {
webWidget: {
color: {
theme: '#03363d',
},
position: {
horizontal: 'right',
vertical: 'bottom',
},
launcher: {
label: {
'*': 'Get help',
},
chatLabel: {
'*': 'Get help',
},
mobile: {
labelVisible: true,
},
},
contactForm: {
attachments: false,
ticketForms: [{ id: 360004155813, subject: false }],
},
helpCenter: {
suppress: true,
},
talk: {
suppress: true,
},
answerBot: {
suppress: true,
},
chat: {
suppress: true,
departments: {
select: 2147699369, // Set 'Sales-EN' Department ID by default
},
},
},
};
/**
* Custom PreChat Form and chat widget setup
*
* @type {Object}
*/
var zsc = {
/**
* Alias to the Preflight form
*
* @type {jQuery}
*/
$preflightForm: $('#preflight-form'),
/**
* Stores the separate contact form IDs for the default and GDPR users.
*
* @type {Object}
*/
contactForms: {
defaultForm: 360004155813, // Z1 Default form
gdprForm: 360004175914, // Z1 GDPR form
},
/**
* Names of fields that may be enriched by Clearbit
*
* @type {Array}
*/
enrichableFields: ['account[name]', 'account[help_desk_size]'],
/**
* Stores the separate department IDs. Used to route messages to different chat departments.
*
* @type {Object}
*/
departments: {
sales: {
en: 'Sales', //2147699369, Sales-EN
de: 2147879921,
es: 2147879841,
fr: 2147879801,
jp: 2147880001,
nl: 2147879961,
pt: 2147879881,
},
zoz: 'ZoZ', //2147865961, // 'ZoZ' (Zendesk on Zendesk) Department ID
},
/**
* Pages to show the Chat launcher, set to the Sales department
*
* @type {Array}
*/
salesPages: [
'/',
'/product/pricing/',
'/support/',
'/support/overview/',
'/support/features/',
'/support/pricing/',
'/support/compare/',
'/guide/',
'/guide/pricing/',
'/guide/compare/',
'/chat/',
'/chat/features/',
'/chat/pricing/',
'/chat/compare/',
'/chat/enterprise/',
'/chat/live-chat-sales/',
'/talk/',
'/talk/pricing/',
'/talk/compare/',
'/support-suite/',
'/support-suite/features/',
'/support-suite/pricing/',
'/support-suite/compare/',
'/omnichannel/',
'/customer-experience/',
'/sell/',
'/sales-suite/',
'/sales-suite/pricing/',
'/sales-suite/features/',
],
/**
* Pages to show the Chat launcher, set to the zoz department
*
* @type {Array}
*/
zozPages: ['/self-service/', '/smb/', '/why-zendesk/customers/', '/about/'],
/**
* List of URL parts to block the web widget from showing up on, if found.
* Can be a Regex or String.
*
* @type {[](String|RegExp)} string or regex to match against the current URL
*
*/
DENYLIST: [
/\/support\/?(overview|compare|features|pricing)?\/?\?.*utm_medium=poweredbyzendesk/,
'/support/apple-business-chat',
],
/**
* Prohibited countries that receive the Contact Form Widget instead of chat
*
* @type {Array}
*/
PROHIBITED_COUNTRIES: [
'Afghanistan',
'Albania',
'Algeria',
'Angola',
'Azerbaijan',
'Belarus',
'Bulgaria',
'Cameroon',
'Czech Republic',
'Egypt',
'Estonia',
'Ethiopia',
'France',
'Georgia',
'Greece',
'Iran',
'Italy',
'Jordan',
'Kuwait',
'Latvia',
'Morocco',
'Nicaragua',
'Nigeria',
'Oman',
'Poland',
'Qatar',
'Russia',
'Saudi Arabia',
'Slovakia',
'Spain',
'Sudan',
'Tunisia',
'Turkey',
'Ukraine',
'United Arab Emirates',
],
/**
* Flag if chat notes should be set (e.g. new chat
* session, or chat in session)
*
* @type {Boolean}
*/
shouldSetNotes: false,
/**
* Store the GeoData, once retrieved
*
* @type {Object}
*/
geoData: {},
/**
* Is the user in a chat-prohibited country?
* Checks against an array of countries
*
* @param {String} country User's country returned by geoUtils
* @type {Function}
* @returns {Boolean}
*/
isUserInProhibitedCountry: function(country) {
if (zsc.PROHIBITED_COUNTRIES.indexOf(country) !== -1) {
return true;
} else {
return false;
}
},
/**
* Hide preflight form
* Suppresses it so the preflight form is not visible
*
* @type {Function}
*/
hidePreflight: function() {
zsc.$preflightForm.hide();
},
/**
* Localizes the Help Center link based on the current locale
*
* @type {Function}
*/
localizeHCLink: function() {
var $helpCenterLink = $('.js-localized-hc-link'),
helpCenters = {
'de-de': 'https://support.zendesk.com/hc/de/',
'es-es': 'https://support.zendesk.com/hc/es/',
'es-la': 'https://support.zendesk.com/hc/es/',
'fr-fr': 'https://support.zendesk.com/hc/fr/',
'ja-jp': 'https://support.zendesk.com/hc/ja/',
'ko-kr': 'https://support.zendesk.com/hc/ko/',
'pt-br': 'https://support.zendesk.com/hc/pt-br/',
},
localHelpCenter = helpCenters[geoUtils.getLocale()];
if (localHelpCenter) {
$helpCenterLink.attr('href', localHelpCenter);
}
},
/**
* Set user info
* Uses information gathered from the preflight form to set things for the
* live chat software
*
* @param {Object} profile the preflight form information
* @type {Function}
*/
setInfo: function(profile) {
zE('webWidget', 'identify', {
name: profile['owner[name]'],
email: profile['owner[email]'],
organization: profile['account[name]'],
phone: profile['address[phone]'],
});
},
/**
* In the SDR's chat window, make note of the user's
* Company name,
* company size,
* page where chat was initiated,
* if they're a current customer (checkbox),
* Marketing Opt-In
*
* @param {Object} profile the preflight form information
* @type {Function}
*/
setNotes: function(profile) {
if (!zsc.shouldSetNotes) return;
zE('webWidget', 'chat:addTags', [
'Company: ' + profile['account[name]'],
'Band: ' + profile['account[help_desk_size]'],
'Chat initiated on: ' + window.location.href,
window.location.pathname,
'Current customer: ' + profile['currentZendeskCustomer'],
'Marketing opt-in: ' + profile['optinToMarketing'],
]);
},
/**
* Captures the user's message typed in the custom PreChat form.
* Removes the last newline from the message before sending.
*
* @type {Function}
*/
captureAndSendMessage: function() {
zsc.userMessage = $('#chat-text-box')
.val()
.replace(/\n$/, '');
zE('webWidget', 'chat:send', zsc.userMessage);
},
/**
* Sets various informations and kicks off a real chat.
*
* @param {Object} profile containing the users email, name, phone, etc
* @type {Function}
*/
kickOffRealChat: function(profile) {
zE('webWidget', 'open');
zsc.setInfo(profile);
zsc.captureAndSendMessage(); // Kickoff chat
zsc.setNotes(profile);
// Listens for chat connection, then hides the Prechat form and shows the chat window
zE('webWidget:on', 'chat:start', function() {
zsc.hidePreflight();
zE('webWidget', 'show');
});
},
/**
* Initialization of the preflight form
*
* Attaches listeners and functionality to make the preflight form
* appear to function like the real zendesk Preflight form
*
* @type {Function}
*/
preflightInit: function() {
webutils.track({
siteCategory: 'ProactiveChat',
eventName: 'Impression',
});
zsc.localizeHCLink();
// Custom minimize click handler for prechat form
zsc.$preflightForm
.find('.preflight-header .minimize')
.on('click', function() {
zsc.hidePreflight();
zE('webWidget', 'close');
zE('webWidget', 'show');
});
// On launcher click
zE('webWidget:on', 'open', function() {
if (!zE('webWidget:get', 'chat:isChatting')) {
zE('webWidget', 'hide');
zsc.$preflightForm.show();
zsc.$preflightForm.addClass('active');
}
});
// Handle enrichment if email is valid
zsc.$preflightForm.find('[name="owner[email]"]').on('blur', function() {
if (webutils.isFieldValid($(this))) {
formUtils
.preflightEnrich($(this).val(), true)
.then(function(enrichmentResponse) {
var enrichmentMap = {};
// Set clearbit val for each enrichable field
zsc.enrichableFields.forEach(function(field) {
var index = enrichmentResponse.mappedFields.indexOf(field),
value = enrichmentResponse.values[index],
$field = zsc.$preflightForm.find('[name="' + field + '"]'),
enrichedClass = 'js-enriched';
if (value && !$field.hasClass(enrichedClass)) {
enrichmentMap[enrichmentResponse.mappedFields[index]] = value;
$field.val(value).addClass(enrichedClass);
}
});
});
}
});
// Attach handlers
formUtils.defaultInlineValidation(zsc.$preflightForm);
zsc.$preflightForm.find('.js-livechat-submit-btn').on('click', function(e) {
e.preventDefault();
// Validate visible required fields
var valid = formUtils.preflightValidate(zsc.$preflightForm);
if (!valid) {
return;
}
var profile = {};
zsc.$preflightForm.find('input').each(function() {
if (this.type === 'checkbox') {
profile[$(this).attr('name')] = this.checked;
} else {
profile[$(this).attr('name')] = $(this).val();
}
});
// Add marketing opt-in value to profile
function isOptIn() {
// Refresh opt in field since it possibly changed from a checkbox to a radio button
var $optInField = zsc.$preflightForm.find(
'input[name="optinToMarketing"]'
);
var optInVal = null;
if ($optInField.attr('type') === 'radio') {
optInVal = $optInField.filter(':checked').val();
} else if ($optInField.attr('type') === 'checkbox') {
optInVal = $optInField.prop('checked');
}
return optInVal;
}
profile['optinToMarketing'] = isOptIn();
// This has to do a fresh query of the dom, so cant use a previous reference to the form
if (zsc.$preflightForm.find('.error').length === 0) {
zsc.kickOffRealChat(profile);
dataLayer.push({
event: 'proactive_chat_valid_form_submission',
});
webutils.track({
siteCategory: 'RegisterLead',
eventName: 'ProactiveChat',
});
}
});
},
/**
* Handles the Contact Form switch if the form needs to include a GDPR checkbox
*
* @param {String} continentCode
* @type {Function}
*/
determineContactForm: function(continentCode) {
var ticketId = 'defaultForm';
if (continentCode === 'EU') {
ticketId = 'gdprForm';
}
zE('webWidget', 'updateSettings', {
webWidget: {
contactForm: {
ticketForms: [{ id: zsc.contactForms[ticketId], subject: false }],
},
},
});
},
/**
* Returns chat department information
*
* @param {String} department
* @type Function
* @returns Object
*/
isDepartmentOnline: function(department) {
var departmentInfo = zE('webWidget:get', 'chat:department', department);
return departmentInfo.status === 'online';
},
/**
* Inject Zopim
* Normally this is added in the HTML template, but will use JS to inject in
* case we want to attach this to an event (e.g. scrolling)
*
* @type {Function}
*/
injectZopim: function() {
window.zE ||
(function(e, t, s) {
var n = (window.zE = window.zEmbed = function() {
n._.push(arguments);
}),
a = (n.s = e.createElement(t)),
r = e.getElementsByTagName(t)[0];
(n.set = function(e) {
n.set._.push(e);
}),
(n._ = []),
(n.set._ = []),
(a.async = true),
a.setAttribute('id', 'ze-snippet'),
// (a.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + s), // Z1
(a.src =
'https://static-staging.zdassets.com/ekr/snippet.js?key=' + s), // Z3nwebwidget-staging
(n.t = +new Date()),
(a.type = 'text/javascript'),
r.parentNode.insertBefore(a, r);
// })(document, 'script', '7e7de6fa-f07e-4231-8f8d-454e095d1794'); // Z1
})(document, 'script', '5f8dc3fa-bef3-4572-b516-e7d428a5f10f'); // Z3nwebwidget-staging
},
};
zsc.injectZopim();
formUtils.setGeoByIP().then(function(data) {
zsc.geoData = data;
zsc.determineContactForm(data.continent_code);
});
// Callback for when chat is connected
zE('webWidget:on', 'chat:connected', function() {
var chatDepartment = zsc.departments.sales.en; // Sales by default
var isChatting = zE('webWidget:get', 'chat:isChatting');
var isSalesPage = zsc.salesPages.indexOf(window.location.pathname) !== -1;
var isZozPage = zsc.zozPages.indexOf(window.location.pathname) !== -1;
var isZozDomain =
window.location.hostname === 'www.zendesk.com' ||
window.location.hostname === 'partycorgi.zendesk.tv';
var isChatEnabled = isSalesPage || isZozPage;
var isSalesOnline = zsc.isDepartmentOnline(zsc.departments.sales.en);
var isZozOnline = zsc.isDepartmentOnline(zsc.departments.zoz);
var isChatProhibited = zsc.isUserInProhibitedCountry(zsc.geoData.country);
// Skip all the checking to force the preflight form to show
if (window.location.hash === '#forceChatAppear') {
zsc.preflightInit();
return;
}
// Don't show on mobile
if (webutils.isMobile()) {
return;
}
// Add custom event listeners
zE('webWidget:on', 'userEvent', function(event) {
// When the Contact Us Form loads fire impression event:
if (event.action === 'Contact Form Shown') {
webutils.track({
siteCategory: 'ContactFormWidget',
eventName: 'Impression',
});
}
// When the Contact Us Form is submitted:
if (event.action === 'Contact Form Submitted') {
dataLayer.push({
event: 'contact_us_widget',
});
webutils.track({
siteCategory: 'RegisterLead',
eventName: 'ContactFormWidget',
});
}
});
// Don't activate chat in prohibited country
if (isChatProhibited === true) {
return;
}
// Don't activate chat on excluded page
for (var i = 0; i < zsc.DENYLIST.length; i++) {
var exclusion = zsc.DENYLIST[i];
if (window.location.href.search(exclusion) > -1) {
return;
}
}
// Don't activate chat if chat session isn't happening and
// if chat isn't enabled for the page
if (!isChatting && !isChatEnabled) {
return;
}
// Use the ZOZ department, if available
if (isZozPage && isZozDomain && isZozOnline) {
chatDepartment = zsc.departments.zoz;
}
// If Sales is still selected, ensure they're online
if (chatDepartment === zsc.departments.sales.en && !isSalesOnline) {
return;
}
console.log('The chat department is ' + chatDepartment);
// Activate chat! SDRs are ready to assist
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
suppress: false,
departments: {
select: chatDepartment,
},
},
},
});
if (isChatting) {
// Open web widget if already chatting
zE('webWidget', 'open');
} else {
// This is a new session, activate the web widget normally
zsc.shouldSetNotes = true;
zsc.preflightInit();
}
});