Deciding when to display HelpCrunch Live Chat

By default, HelpCrunch chat widget appears on your page after initialization because of showChatWidget method in your widget’s JS code:

HelpCrunch('showChatWidget');

You can change that by cutting out that part of the code and displaying the widget right after your custom event (like a button click).

Also you can hide the widget by calling hideChatWidget method:

HelpCrunch('hideChatWidget');

Force open/close chat after custom event

If you want to open or hide HelpCrunch chat by some custom event on your page – just call openChat / closeChat methods when your event fires:

HelpCrunch('openChat');
HelpCrunch('closeChat');

How to create a custom chat widget

There is a chat widget available by default. However, you can create your own widget that fits better with your design.

Copy API code (See integration) 

Exclude showChatWidget call from from copied API code:

HelpCrunch('showChatWidget');

Once SDK is loaded, use onReady event to show your custom widget:

HelpCrunch('onReady', function() {
  // Show your widget
});

To open the chat use the openChat:

HelpCrunch('openChat');

If you need to change your widget view depending on your chat is open or closed, use onChatOpen and onChatClose events: 

HelpCrunch('onChatOpen', function() {});
HelpCrunch('onChatClose', function() {});

To display a number of unread messages use onNewUnreadChat event:

HelpCrunch('onNewUnreadChat', function(event) {
  // event.unreadMessages
});

Example: open chat by clicking on a button or link

If you don’t want to display the widget on all your website/product pages by default, but you still want to open the chat if a visitor/user clicks on a “Contact Us” button – do the following: 

1. Remove HelpCrunch('showChatWidget'); from your HelpCrunch chat widget JS code:


This will make the chat hidden by default.

2. To show the chat on the button/link click, add this JS code to your website:

HelpCrunch('onReady', function() {
  document.getElementById('contact-us').onclick = function() {
    HelpCrunch('openChat');
  }
});

That’s it. Now go to your website and check how it works.

Example: Hide chat until the first message from agent or first proactive chat message

If you don’t want to display the widget on all your website/product pages by default, but you still want to open the chat if a visitor/user clicks on a “Contact Us” button – do the following:

1. Widget is shown by default, so make sure to add  showWidget: false, to the widget settings. Example:

<script type="text/javascript">
  window.helpcrunchSettings = {
    organization: 'helpcrunch', // your organization name here is required
    appId: 'adc8424b-bb2f-4104-b48d-0fb48аcf88b0',  // Add your appId here
    showWidget: false,
</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>

2. To show the chat only after the first chat message, add this JS code to your website: 

HelpCrunch('onNewUnreadChat', function() {
  HelpCrunch('showChatWidget');
});

That’s it. Now go to your website and check how it works.

Example: Create a link, which will open chat automatically

If you want to create a page, by visiting which chat will open automatically, you can add this to the page URL:

?HelpCrunchOpenChat=1

Final result: https://yourwebsite.com/some_page/?HelpCrunchOpenChat=1

Example: pre-fill message in the customer's typing area with a link

Let's say you have a page, where you want your customers to create a chat and send some specific message to the chat. For example, "request pricing quote" button, by clicking on which, chat opens automatically and some message is pre-filled in the typing area, so user needs only click "send' button, let's say the message would be "Can you provide some pricing quote?"

The easiest way to achieve that, is adding that to the page link:

?HelpCrunchInputText=test

Final result: https://yourwebsite.com/some_page/?HelpCrunchInputText=test