# Handle contact requests yourself

_Category: Widget and embedding_

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](https://developers.helpcenter.io/content/widget-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](https://self.helpcenter.io/content/integrate-the-widget-with-helpcenter-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:

- [Integrate the widget with HelpCenter.chat live chat](https://self.helpcenter.io/content/integrate-the-widget-with-helpcenter-chat)
- [Integrate the widget with the Intercom Messenger](https://self.helpcenter.io/content/integrate-the-helpcenter-io-widget-with-the-intercom-messenger)
- [Integrate the widget with Chatra](https://self.helpcenter.io/content/integrate-the-helpcenter-io-widget-with-the-chatra-chat-widget)
- [Integrate the widget with tawk.to](https://self.helpcenter.io/content/integrate-the-helpcenter-io-smart-widget-with-the-tawk-to-chat-widget)
- [Integrate the widget with Gorgias Chat](https://self.helpcenter.io/content/integrate-the-helpcenter-io-widget-with-gorgias-chat)

## 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](https://self.helpcenter.io/content/widget-contact-form).

## Related

- [Widget JavaScript API](https://developers.helpcenter.io/content/widget-javascript-api)
- [Widget installation and options](https://developers.helpcenter.io/content/widget-options)