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>

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>