Installing the Chat Messenger on Your Website
The chat messenger works on any website: WordPress, Webflow, Shopify, a custom app, or your HelpGuides documentation. You add one short script, and a chat button appears in the corner of every page that has it.
Get your snippet
- Open your project and go to Inbox, then Messenger settings.
- In the Install section, click Copy snippet.
The snippet already contains your app ID, which is your project's ID. It looks like this:
Add it to your website
Paste the snippet just before the closing </body> tag on every page where the messenger should appear. Most sites have one place to do this:
- WordPress: your theme's footer, or a "header and footer scripts" plugin
- Webflow and Squarespace: the site-wide custom code (footer) setting
- Shopify:
theme.liquid, before</body> - Custom sites and apps: your shared layout or template
The script loads without slowing your page down. The messenger keeps its own look regardless of your site's styles, and your site's styles aren't affected by it.
Signed-in users
If visitors sign in to your site or app, pass who they are. Your team then sees their name and email, and their conversations follow them across devices:
window.HelpGuidesChatSettings = {
app_id: "YOUR_APP_ID",
user_id: "12345",
email: "jane@example.com",
name: "Jane Doe",
user_hash: "…" // required to link conversations — see Chat Identity Verification
};Always include user_hash for signed-in users. See Chat Identity Verification. When a user signs out, call HelpGuidesChat('shutdown') so the next person on that browser starts fresh.
Custom details
Add attributes to show extra details about the visitor to your team in the inbox, such as their plan or company:
attributes: { plan: "Business", company: "Northwind" }Sharing one chat across subdomains
Browsers keep chat sessions separate for each domain, so www.example.com and docs.example.com would each have their own conversations. To share one visitor across them, set Share visitors across subdomains of in Messenger settings (for example, example.com). Or add cookie_domain: "example.com" to the snippet.
Limiting where the messenger can appear
Under Allowed websites in Messenger settings, list the domains that may show your messenger, one per line. Subdomains are included. Leave it empty to allow any site. If you set it, add helpguides.io too so Try it on this page keeps working.
Check it's working
- Reload a page with the snippet. The chat button should appear in the bottom corner.
- If it doesn't, open your browser's developer console and look for a
[HelpGuides Messenger]message. See Troubleshooting Chat.
To control the messenger from your own buttons and links, see Chat Messenger JavaScript API. Back to Setting Up Chat.