In this article, we discuss specific cases, which might occur in some specific usage scenarios.
For general use, use this article to send user data during the initialization.
For general use, use this article to send user data during the initialization.
Widget code structure
The first half of the widget code is widget settings, the place where you can configure it. Then goes the main widget code, which cannot be modified.
<script type="text/javascript">
// Widget settings
window.helpcrunchSettings = {
organization: 'helpcrunch',
appId: 'adc8424b-bn0f-4if4-qq81-0fb84kcf88b0',
};
</script>
// This is the main widget code, which cannot be modified
<!-- WIDGET CODE -->
<script type="text/javascript">
(function(w,d){var hS=w.helpcrunchSettings;if(!hS||!hS.organization){return;}var widgetSrc='https://'+hS.organization+'.widget.helpcrunch.com/';w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];function r(){if (d.querySelector('script[src="' + widgetSrc + '"')) { return; }var s=d.createElement('script');s.async=1;s.type='text/javascript';s.src=widgetSrc;(d.body||d.head).appendChild(s);}if(d.readyState === 'complete'||hS.loadImmediately){r();} else if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}})(window, document)
</script>Example #1
Sometimes, you might need to authorize or send user data, but they are not immediately available when entering the page. For example, they are loaded by a request after a certain time. In that case, you can postpone the initialization of the widget until the data appears and manually use the init and showChatWidget methods when the data is ready.
You can invoke HelpCrunch methods either after the main widget code or within window.helpcrunchSettings.onload (this method triggers immediately after the code is initialized).
1. Don't pass appId
2. Request the user data from your database
3. Once the user data is available for sending, call init and showChatWidget methods
<script type="text/javascript">
window.helpcrunchSettings = {
organization: 'helpcrunch',
};
</script>
<!-- WIDGET CODE -->
<script type="text/javascript">
(function(w,d){var hS=w.helpcrunchSettings;if(!hS||!hS.organization){return;}var widgetSrc='https://'+hS.organization+'.widget.helpcrunch.com/';w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];function r(){if (d.querySelector('script[src="' + widgetSrc + '"')) { return; }var s=d.createElement('script');s.async=1;s.type='text/javascript';s.src=widgetSrc;(d.body||d.head).appendChild(s);}if(d.readyState === 'complete'||hS.loadImmediately){r();} else if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}})(window, document)
</script>
<script type="text/javascript">
//Send request and only after that call 'init' with the data
HelpCrunch('init', window.helpcrunchSettings.organization, {
appId: 'adc8424b-88ff-4504-b44f-0fbJfh8f88b0',
user: {
// Add user data here
}
});
HelpCrunch('showChatWidget');
</script>In this example, we call init, and showChatWidget only because we've removed appId in step #1
Example #2
You might don't want to display chat after the initialization. In this case showWidget: false can be added to the widget settings.
This example also shows some other methods you can run in widget settings:
<script type="text/javascript">
window.helpcrunchSettings = {
organization: 'helpcrunch', // organization name is required
appId: 'adc8424b-bb2f-4504-b46d-0fb6e6cf88b0', // if appId is sent, it inits automatically
onload: () => {
HelpCrunch('setPhraseList', 'uk');
},
// all fields below can be sent only if appId is passed above. They won't work without appId
showWidget: true, // if this field is not sent, or is sent as true, showChatWidget will automatically run after the init
openWidget: false, // If sent as true, openChat will run after the init
// How to send user data:
user: {
user_id: 'userOneHash',
name: 'User One',
email: '[email protected]',
phone: '+380123456789',
company: 'my company',
custom_data: {
is_active: true,
},
},
signature: 'SIGNATURE HASH', // If security signature is enabled in HelpCrunch settings, here you need to send generated hash
};
</script>
<!-- WIDGET CODE -->
<script type="text/javascript">
(function(w,d){var hS=w.helpcrunchSettings;if(!hS||!hS.organization){return;}var widgetSrc='https://'+hS.organization+'.widget.helpcrunch.com/';w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];function r(){if (d.querySelector('script[src="' + widgetSrc + '"')) { return; }var s=d.createElement('script');s.async=1;s.type='text/javascript';s.src=widgetSrc;(d.body||d.head).appendChild(s);}if(d.readyState === 'complete'||hS.loadImmediately){r();} else if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}})(window, document)
</script>
Example #3
How to display chat widget with a delay:
<script type="text/javascript">
window.helpcrunchSettings = {
organization: 'helpcrunch', // organization name is required
appId: 'adc8424b-bb2f-4504-b46d-0fb6e6cf88b0', // if appId is sent, it inits automatically
showWidget: false,
onload: () => {
setTimeout(() => {
HelpCrunch('showChatWidget');
}, 5000); // time in milliseconds
},
// How to send user data:
user: {
user_id: 'userOneHash',
name: 'User One',
email: '[email protected]',
phone: '+380123456789',
company: 'my company',
custom_data: {
is_active: true,
},
},
}
</script>
<!-- WIDGET CODE -->
<script type="text/javascript">
(function(w,d){var hS=w.helpcrunchSettings;if(!hS||!hS.organization){return;}var widgetSrc='https://'+hS.organization+'.widget.helpcrunch.com/';w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];function r(){if (d.querySelector('script[src="' + widgetSrc + '"')) { return; }var s=d.createElement('script');s.async=1;s.type='text/javascript';s.src=widgetSrc;(d.body||d.head).appendChild(s);}if(d.readyState === 'complete'||hS.loadImmediately){r();} else if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}})(window, document)
</script>You can specify the delay in milliseconds below the 'showChatWidget'
