Widget and embedding

Handle contact requests yourself

Export
Download Markdown Use with AI

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 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 hiding each chat's 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?