# Add the chat widget to your Help Center, and the Help Center to your website Section: Help Center Description: Show your Tidio chat widget on every Help Center page (and add the Help Center to your trusted domains in one click), or embed the whole Help Center on your website or Shopify store with one line of code. Verified against Tidio panel 12.304.0 Last updated: 2026-11-02 Source: https://help.tidio.com/articles/chat-widget-and-embed/ Your Help Center and your chat work best together. If a customer can't find the answer in an article, they can start a chat with you (or Lyro) right from the Help Center page. And instead of sending customers to a separate site, you can show your whole Help Center on a page of your own website or Shopify store. Both options are in the **Setup** tab of your Help Center. **In this article, you'll learn:** - [How to show the chat widget on your Help Center]() - [How to add your Help Center to your trusted domains]() - [How to embed your Help Center on your website]() [Video]() Silent walkthrough. Add the chat widget to your Help Center, and the Help Center to your website. 💡 **Please note:** the **Setup** tab is only visible to team members with the **Help center settings** permission. ## Showing the chat widget on your Help Center Head over to the **Help Center** section, open your Help Center, and go to the **Setup** tab. In the **Chat widget** card, switch on **Show the Tidio chat widget on your Help Center**: ![The Chat widget card in the Setup tab with the Show the Tidio chat widget on your Help Center switch turned on, and no warning below it]() Then hit the **Save changes** button at the bottom of the tab. That's it\! Your visitors can now start a chat from any page of your Help Center. The widget on your Help Center is the same chat widget you use on your website, so you don't need to install anything. Its own display settings still apply here - including whether it hides when you're offline, and which devices it appears on. You can change them in **Settings \> Live Chat \> Appearance**, as described in [Customize your chat widget](). ## Adding your Help Center to your trusted domains [Video]() Silent walkthrough. See the trusted domains warning. In Settings \> Live Chat \> Appearance, under Visibility and position, set Trusted domains to Show only on listed domains, add your website's domain and save. Open the Help Center's Setup tab and scroll to the Chat widget card: a warning says the Help Center's address isn't on your list of trusted domains, with an Add to trusted domains link. Back in the widget settings, remove the domain, set Trusted domains to Show on every domain and save. In your chat widget settings, you can choose to **Show only on listed domains** (under **Visibility and position \> Trusted domains**). If you do, your Help Center's address has to be on that list too - otherwise, the widget won't appear on your Help Center. Tidio checks this for you. When you switch the widget on, and your Help Center's address (or your [custom domain](), once it's verified) isn't on the list, you'll see a warning in the **Chat widget** card. Simply click on **Add to trusted domains** in the warning: ![The Chat widget card with the switch on and the yellow warning "yourbrand.tidio.help is not on your list of trusted domains. The widget won't be visible on your Help Center." with the Add to trusted domains link at its end]() You'll see an **Added to your trusted domains.** confirmation, and the warning disappears. Now you can save your changes. 💡 **Please note:** while the warning is shown, the **Save changes** button stays inactive, so you can't turn on a widget that your visitors wouldn't see. The same goes for the moment Tidio is checking your trusted domains - and if the check fails, the card will say so, and you can simply try again in a moment. If you'd rather manage the list yourself, add your Help Center's address in **Settings \> Live Chat \> Appearance**, under **Visibility and position \> Trusted domains**. Remember to add your custom domain as well if you've connected one. ## Embedding your Help Center on your website Want your customers to find answers without leaving your website? You can place your whole Help Center on any page of your website or Shopify store with a single line of code. In the **Setup** tab, go to the **Embed Help Center** card. Under **Embed with code**, you'll find your snippet - click on the copy icon on its right (**Copy to clipboard**) to copy it: ![The Embed Help Center card of a published Help Center, showing the Embed with code snippet (a script tag ending in /embed.js) with the copy icon on its right and its Copy to clipboard tooltip showing]() Then paste the snippet into the HTML of the page where you'd like your Help Center to appear - for example, a page of your Shopify theme, or of your website. Your Help Center will show up in that spot, across the full width of the page. If you'd like to choose the exact spot on the page, add an empty element with the id ` tidio-help-center ` (for example, `
`), and your Help Center will be placed inside it. Your visitors can browse the Help Center right on your page, and the page address keeps track of where they are - so they can share a link to an article, or use the browser's **Back** button as usual. 💡 **Please note:** the snippet only works once your Help Center is published. Before that, you'll see the code, but you won't be able to copy it - hover over it to see why. Publishing your Help Center requires the **Help Center add-on** (see [The Help Center add-on]()). The snippet always points to your Help Center's current address. If you connect a custom domain or change your tidio.help address later, simply copy the new snippet and replace the old one on your website (see [Your Help Center's address and custom domain]()). ## Further reading - [Your Help Center's address and custom domain]() - [Use Help Center articles with Lyro and Copilot]() - [The Help Center add-on]() - [Customize your chat widget]()