{"Status":true,"Message":"","Response":{"post":{"postuid":"1c68d3a6-729f-4f80-b373-031cc13d079c","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"fc6490ac-7527-4f49-b06e-46f701280e85","title":"Installing the Chat Messenger on Your Website","slug":"article/installing-the-chat-messenger-on-your-website","html":"\u003Cp\u003EThe 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.\u003C/p\u003E\u003Ch2 id=\u0022get_your_snippet\u0022\u003EGet your snippet\u003C/h2\u003E\u003Col\u003E\u003Cli\u003EOpen your project and go to \u003Cb\u003EInbox\u003C/b\u003E, then \u003Cb\u003EMessenger settings\u003C/b\u003E, then the \u003Cb\u003EInstall \u0026amp; security\u003C/b\u003E tab.\u003C/li\u003E\u003Cli\u003EUnder \u003Cb\u003EInstall\u003C/b\u003E, click \u003Cb\u003ECopy snippet\u003C/b\u003E.\u003C/li\u003E\u003C/ol\u003E\u003Cfigure\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/fc6490ac-7527-4f49-b06e-46f701280e85/images/8b36d521c1b24e03a37ee77c5789c8aa.png?v=-817742886\u0022 data-width=\u0022986\u0022 data-height=\u0022428\u0022 style=\u0022max-width: 100%;\u0022 alt=\u0022The Install section of the Install and security tab, with the install snippet and the Copy snippet and Try it on this page buttons\u0022/\u003E\u003Cfigcaption\u003EInstall and security tab, Install\u003C/figcaption\u003E\u003C/figure\u003E\u003Cp\u003EThe snippet already contains your app ID, which is your project\u0027s ID. It looks like this:\u003C/p\u003E\u003Ccode\u003E\u003Cscript\u003E\n  window.HelpGuidesChatSettings = {\n    app_id: \u0022YOUR_APP_ID\u0022\n    // Signed-in users (recommended):\n    // user_id: \u0022123\u0022, email: \u0022jane@example.com\u0022, name: \u0022Jane Doe\u0022,\n    // user_hash: \u0022\u003CHMAC-SHA256 of user_id, computed on your server\u003E\u0022\n  };\n  (function(w,d){var c=w.HelpGuidesChat=w.HelpGuidesChat||function(){(c.q=c.q||[]).push(arguments)};\n  var s=d.createElement(\u0027script\u0027);s.async=1;s.src=\u0027https://helpguides.io/chat/messenger.js\u0027;\n  d.head.appendChild(s);c(\u0027boot\u0027,w.HelpGuidesChatSettings);})(window,document);\n\u003C/script\u003E\u003C/code\u003E\u003Cp\u003EIf your visitors never sign in, a one-line install also works:\u003C/p\u003E\u003Ccode\u003E\u003Cscript async src=\u0022https://helpguides.io/chat/messenger.js\u0022 data-app-id=\u0022YOUR_APP_ID\u0022\u003E\u003C/script\u003E\u003C/code\u003E\u003Ch2 id=\u0022add_it_to_your_website\u0022\u003EAdd it to your website\u003C/h2\u003E\u003Cp\u003EPaste the snippet just before the closing \u003Ccode\u003E\u0026lt;/body\u0026gt;\u003C/code\u003E tag on every page where the messenger should appear. Most sites have one place to do this:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EWordPress:\u003C/b\u003E your theme\u0027s footer, or a \u0022header and footer scripts\u0022 plugin\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EWebflow and Squarespace:\u003C/b\u003E the site-wide custom code (footer) setting\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EShopify:\u003C/b\u003E \u003Ccode\u003Etheme.liquid\u003C/code\u003E, before \u003Ccode\u003E\u0026lt;/body\u0026gt;\u003C/code\u003E\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ECustom sites and apps:\u003C/b\u003E your shared layout or template\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EThe script loads without slowing your page down. The messenger keeps its own look regardless of your site\u0027s styles, and your site\u0027s styles aren\u0027t affected by it.\u003C/p\u003E\u003Cp\u003EThe messenger only appears while \u003Cb\u003ETurn the messenger on\u003C/b\u003E is switched on, on the \u003Cb\u003EGeneral\u003C/b\u003E tab. When it\u0027s off, the snippet shows nothing, so you can install it before you go live.\u003C/p\u003E\u003Cp\u003EVisitors see \u003Cb\u003EHome\u003C/b\u003E and \u003Cb\u003EMessages\u003C/b\u003E tabs, plus a \u003Cb\u003EHelp\u003C/b\u003E tab for browsing and searching your help center when \u003Cb\u003EShow help articles in the messenger\u003C/b\u003E is on. The chat follows visitors from page to page: if it was open, it\u0027s still open on the next page, on the same conversation, with anything half-typed still in the box. See \u003Ca href=\u0022/article/what-visitors-see-in-the-chat-messenger\u0022\u003EWhat Visitors See in the Chat Messenger\u003C/a\u003E.\u003C/p\u003E\u003Ch2 id=\u0022signedin_users\u0022\u003ESigned-in users\u003C/h2\u003E\u003Cp\u003EIf visitors sign in to your site or app, pass who they are. Your team then sees their name and email, their conversations follow them across devices, and the messenger greets them by first name (\u0022Hi Jane \uD83D\uDC4B\u0022):\u003C/p\u003E\u003Ccode\u003Ewindow.HelpGuidesChatSettings = {\n  app_id: \u0022YOUR_APP_ID\u0022,\n  user_id: \u002212345\u0022,\n  email: \u0022jane@example.com\u0022,\n  name: \u0022Jane Doe\u0022,\n  user_hash: \u0022\u2026\u0022   // required to link conversations \u2014 see Chat Identity Verification\n};\u003C/code\u003E\u003Cp\u003EAlways include \u003Ccode\u003Euser_hash\u003C/code\u003E for signed-in users. See \u003Ca href=\u0022/article/chat-identity-verification\u0022\u003EChat Identity Verification\u003C/a\u003E. When a user signs out, call \u003Ccode\u003EHelpGuidesChat(\u0027shutdown\u0027)\u003C/code\u003E so the next person on that browser starts fresh. Otherwise they could see the previous user\u0027s conversations, and actions set to \u003Cb\u003EOnly for signed-in customers\u003C/b\u003E would still run as the previous user.\u003C/p\u003E\u003Ch2 id=\u0022custom_details\u0022\u003ECustom details\u003C/h2\u003E\u003Cp\u003EAdd \u003Ccode\u003Eattributes\u003C/code\u003E to show extra details about the visitor to your team in the inbox, such as their plan or company. \u003Ca href=\u0022/article/chat-actions\u0022\u003EChat Actions\u003C/a\u003E can also use an attribute as a parameter, for example the account a signed-in customer belongs to. Attributes come from the browser and aren\u0027t signed, so never rely on one alone to decide whose data an action returns.\u003C/p\u003E\u003Ccode\u003Eattributes: { plan: \u0022Business\u0022, company: \u0022Northwind\u0022 }\u003C/code\u003E\u003Ch2 id=\u0022sharing_one_chat_across_subdomains\u0022\u003ESharing one chat across subdomains\u003C/h2\u003E\u003Cp\u003EBrowsers keep chat sessions separate for each domain, so \u003Ccode\u003Ewww.example.com\u003C/code\u003E and \u003Ccode\u003Edocs.example.com\u003C/code\u003E would each have their own visitor and conversations. To share one visitor across them, go to the \u003Cb\u003EInstall \u0026amp; security\u003C/b\u003E tab and, under \u003Cb\u003EAllowed websites\u003C/b\u003E, set \u003Cb\u003EShare visitors across subdomains of\u003C/b\u003E (for example, \u003Ccode\u003Eexample.com\u003C/code\u003E). Or add \u003Ccode\u003Ecookie_domain: \u0022example.com\u0022\u003C/code\u003E to the snippet. The messenger then keeps the visitor\u0027s session in a cookie on that domain.\u003C/p\u003E\u003Ch2 id=\u0022limiting_where_the_messenger_can_appear\u0022\u003ELimiting where the messenger can appear\u003C/h2\u003E\u003Cp\u003EOn the \u003Cb\u003EInstall \u0026amp; security\u003C/b\u003E tab, under \u003Cb\u003EAllowed websites\u003C/b\u003E, 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 \u003Ccode\u003Ehelpguides.io\u003C/code\u003E too so \u003Cb\u003ETry it on this page\u003C/b\u003E keeps working.\u003C/p\u003E\u003Cfigure\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/fc6490ac-7527-4f49-b06e-46f701280e85/images/807a496eff7340459b2f19ec16f2315b.png?v=-818825345\u0022 data-width=\u0022986\u0022 data-height=\u0022357\u0022 style=\u0022max-width: 100%;\u0022 alt=\u0022The Allowed websites section with a list of allowed domains and the Share visitors across subdomains of box\u0022/\u003E\u003Cfigcaption\u003EInstall and security tab, Allowed websites\u003C/figcaption\u003E\u003C/figure\u003E\u003Ch2 id=\u0022check_its_working\u0022\u003ECheck it\u0027s working\u003C/h2\u003E\u003Cul\u003E\u003Cli\u003EReload a page with the snippet. The chat button should appear in the bottom corner.\u003C/li\u003E\u003Cli\u003EIf it doesn\u0027t, open your browser\u0027s developer console and look for a \u003Ccode\u003E[HelpGuides Messenger]\u003C/code\u003E message. The usual causes are that the messenger is switched off, the site isn\u0027t in \u003Cb\u003EAllowed websites\u003C/b\u003E, or \u003Cb\u003ERequire verification\u003C/b\u003E is on and the \u003Ccode\u003Euser_hash\u003C/code\u003E is missing or wrong. See \u003Ca href=\u0022/article/troubleshooting-chat\u0022\u003ETroubleshooting Chat\u003C/a\u003E.\u003C/li\u003E\u003C/ul\u003E\u003Cfigure\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/fc6490ac-7527-4f49-b06e-46f701280e85/images/389ea6463fa5484d94cc3c8dcdebfa96.png?v=-1877867598\u0022 data-width=\u00221100\u0022 data-height=\u0022720\u0022 style=\u0022max-width: 100%;\u0022 alt=\u0022A website with the chat button in the bottom-right corner\u0022/\u003E\u003Cfigcaption\u003EOnce installed, the chat button appears in the corner of the page\u003C/figcaption\u003E\u003C/figure\u003E\u003Cp\u003ETo control the messenger from your own buttons and links, or to send customers a link that opens the chat (\u003Ccode\u003E?chat=1\u003C/code\u003E), see \u003Ca href=\u0022/article/chat-messenger-javascript-api\u0022\u003EChat Messenger JavaScript API\u003C/a\u003E. Back to \u003Ca href=\u0022/article/setting-up-chat\u0022\u003ESetting Up Chat\u003C/a\u003E.\u003C/p\u003E","publish_status":0,"post_type":"Article","author":{},"featured_image_updating":false,"meta_description":"Easily add HelpGuides Chat Messenger to any website with one script. Supports user identity, custom details, subdomain sharing, and domain restrictions.","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":9,"total_views":4,"date_published":"2026-09-26T16:45:07.44","date_updated":"2026-10-07T16:01:08.037","date_created":"2026-09-26T16:28:33.687"}}}