Widget and embedding

Handle contact requests yourself

When visitors can't find an answer in the widget, send them to your own contact page, form or live chat instead of the widget's built-in form. Define onContactsRequest in your options, and the widget calls it whenever a visitor asks to contact you.

You need: the widget on your page (see Widget installation and options) · Plans: All plans

How it works

The widget offers contact in these places, with these texts unless you changed them in your dashboard:

  • I can't find what I'm looking for, on its home screen and under search results.

  • Contact our team, after a search with no results.

  • Still stuck? Message our team →, under an AI answer.

  • Contact us, when the AI assistant can't answer.

With onContactsRequest defined:

  • A click on any of them calls your function, with no arguments, instead of opening the built-in form.

  • These entry points show even when your help center has no recipient email for the built-in form.

  • The widget stays open. Close it in your function with window.hcWidget.hide() when your form or chat opens on top.

  • The widget's frame sits lower in your page's stacking order (z-index: 2147482999 instead of 2147483647), so a chat window can open above it.

Send visitors to your contact page

<script>
  window.hcOptions = {
    app_id: 'YOUR_WIDGET_ID',
    onContactsRequest: function () {
      window.open('https://www.example.com/contact', '_blank', 'noopener');
    }
  };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>

Replace the address with your contact page. The widget stays open behind the new tab.

Open your own form

This example closes the widget and opens a form in a <dialog> on your page:

<dialog id="support-dialog">
  <form method="dialog">
    <h2>Contact support</h2>
    <label>Your message <textarea name="message" required></textarea></label>
    <button type="submit">Send</button>
  </form>
</dialog>

<script>
  window.hcOptions = {
    app_id: 'YOUR_WIDGET_ID',
    onContactsRequest: function () {
      window.hcWidget.hide();
      document.getElementById('support-dialog').showModal();
    }
  };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>

Your function doesn't receive the visitor's search or email address, so ask for what you need in your form.

Open your live chat

Call your chat's own JavaScript API. This example opens HelpCenter.chat, our live chat and shared inbox, and falls back to email when its messenger hasn't loaded. Put the messenger's snippet before the widget's code:

<!-- Your HelpCenter.chat snippet goes here, before the widget's code. -->

<script>
  window.hcOptions = {
    app_id: 'YOUR_WIDGET_ID',
    onContactsRequest: function () {
      if (window.HelpCenterWidget) {
        window.dispatchEvent(new Event('helpcenter:open'));
        window.hcWidget.hide();
      } else {
        window.location.href = 'mailto:support@example.com';
      }
    }
  };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>

Replace the address with your support email. The helpcenter:open event on window opens the messenger, and window.HelpCenterWidget is there once the messenger's script has loaded. When it isn't, for example because a browser extension blocked it, the visitor's email app opens and the widget stays open.

The messenger ignores the event until it has loaded its settings, on a domain that its Allowed domains list leaves out, and while Hide when no agents are available hides it. The widget then closes and nothing opens in its place, so list your domain there and leave that setting off. Where to copy the snippet, how to keep the two launchers apart and how to test the hand-off are in Integrate the widget with HelpCenter.chat live chat.

Other chats work the same way. This example opens the Intercom Messenger, and falls back to your contact page when the chat hasn't loaded:

<script>
  window.hcOptions = {
    app_id: 'YOUR_WIDGET_ID',
    onContactsRequest: function () {
      window.hcWidget.hide();
      if (window.Intercom) {
        window.Intercom('show');
      } else {
        window.location.href = 'https://www.example.com/contact';
      }
    }
  };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>

Keep your chat's own installation code on the page. Step-by-step setups, including what to do with each chat's own launcher, are in these guides:

Without onContactsRequest

The widget shows its built-in contact form, which emails your team. The form needs a recipient email set in your dashboard; without one, the widget shows no contact entry points at all. See Let visitors message your team from the widget.

Was this article helpful?