Hello 👋 How can we help?

Displaying the chat widget on your site

Advanced displaying options
Written by Artem
Updated 1 month ago

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 onNewUnreadMessages event:

HelpCrunch('onNewUnreadMessages', 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. Remove HelpCrunch('showChatWidget'); from your HelpCrunch chat widget JS code: 

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

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

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

Did this answer your question?