# Add the widget to your website

_Category: Widget and embeds_

Put your help center one click away on every page of your website or app. Visitors search your articles, read them and get answers without leaving the page they're on. You copy one snippet, paste it into your site and tell HelpCenter.io which website may show it.

**Who can do this:** Anyone on your team can copy the snippet, and Owners and Admins approve your website · **Plans:** All plans

## Copy the snippet

1. In the left menu, click the gear icon, then **Embeddables**. Your widget is ready the first time you open this page; there's nothing to activate.
2. On the **Widget** tab, find **Installation** and click **Copy**.
3. Paste the snippet into your website's HTML, right before the closing `</body>` tag, on every page where the widget should appear.

![Screen recording. Click the gear icon, then Embeddables. Under Installation, click Copy. Paste it just before the closing body tag on every page of your site.](https://helpcenter-io.s3.amazonaws.com/uploads/self/dnkcKwvNM82WIJwbatBgG2WBGCBrsWWw10BU6yip.gif)
The snippet you copy already contains your widget's ID.

The snippet looks like this, with your own widget ID in place of `YOUR_WIDGET_ID`:

```
<!-- HelpCenter.io smart widget code -->
<script type="text/javascript">(function(){
    var s = document.createElement('script');
    s.src = "//helpcenter.io/js/init.js";
    s.async = true;
    window.hcOptions = {
        app_id: 'YOUR_WIDGET_ID'
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->
```

Put it before `</body>`, not in the `<head>`: the snippet adds the widget to the page body, so the body has to exist when it runs.

### Using a website builder or tag manager

You don't need a plugin. WordPress, Webflow, Shopify and any other builder or CMS that lets you add custom code to every page will work: use its setting for code in the footer or before `</body>`. With Google Tag Manager, add the snippet as a Custom HTML tag that fires on all pages.

## Allow your website to show the widget

The widget only loads on websites you approve. Until yours is on the list, the widget stays hidden there.

1. In the left menu, click the gear icon, then **Settings**.
2. In the **General** card, find **Embedding origins**.
3. Type your website's host name, such as `www.example.com`, and click **Add**. A leading dot, like `.example.com`, covers the domain and all its subdomains.
4. Click **Save changes**.

This is the same list you see under **Embeddables** → **Widget** → **Configuration**. See [Choose which websites can show the widget](https://self.helpcenter.io/content/embedding-origins) for what to enter.

## Check that it works

Reload a page of your website. A round button appears in the bottom-right corner. Click it to open the widget and try a search.

Next, make it yours: [match the widget to your brand](https://self.helpcenter.io/content/widget-appearance), [change its greeting](https://self.helpcenter.io/content/widget-greeting) and [invite visitors with proactive messages](https://self.helpcenter.io/content/proactive-messages). Developers can do much more from code: see [Widget installation and options](https://developers.helpcenter.io/content/widget-options) and [Widget JavaScript API](https://developers.helpcenter.io/content/widget-javascript-api) on the developer portal.

## Troubleshooting

**The widget doesn't appear.** Check that your website's host is under **Embedding origins** exactly as it shows in the address bar: `example.com` and `www.example.com` are different. Save, wait a couple of minutes, then reload.

**Your browser console says "Parent domain is not in the allowed list."** Add the host it names to **Embedding origins**.

**The snippet is in the `<head>`.** Move it to the end of the page body, right before `</body>`.

**Your site sends a Content Security Policy.** Allow the widget's hosts, and let the snippet itself run. The details are in [Content Security Policy and allowed origins](https://developers.helpcenter.io/content/content-security-policy) on the developer portal.

Still stuck? See [The widget doesn't show up](https://self.helpcenter.io/content/widget-not-showing).

## Related articles

- [Choose which websites can show the widget](https://self.helpcenter.io/content/embedding-origins)
- [The widget doesn't show up](https://self.helpcenter.io/content/widget-not-showing)
- [What visitors see in the widget](https://self.helpcenter.io/content/widget-for-visitors)
- [Widget installation and options](https://developers.helpcenter.io/content/widget-options) on the developer portal