{"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.\u003C/li\u003E\u003Cli\u003EIn the \u003Cb\u003EInstall\u003C/b\u003E section, click \u003Cb\u003ECopy snippet\u003C/b\u003E.\u003C/li\u003E\u003C/ol\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  };\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\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\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, and their conversations follow them across devices:\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.\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:\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 conversations. To share one visitor across them, set \u003Cb\u003EShare visitors across subdomains of\u003C/b\u003E in Messenger settings (for example, \u003Ccode\u003Eexample.com\u003C/code\u003E). Or add \u003Ccode\u003Ecookie_domain: \u0022example.com\u0022\u003C/code\u003E to the snippet.\u003C/p\u003E\u003Ch2 id=\u0022limiting_where_the_messenger_can_appear\u0022\u003ELimiting where the messenger can appear\u003C/h2\u003E\u003Cp\u003EUnder \u003Cb\u003EAllowed websites\u003C/b\u003E 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 \u003Ccode\u003Ehelpguides.io\u003C/code\u003E too so \u003Cb\u003ETry it on this page\u003C/b\u003E keeps working.\u003C/p\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. See \u003Ca href=\u0022/article/troubleshooting-chat\u0022\u003ETroubleshooting Chat\u003C/a\u003E.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003ETo control the messenger from your own buttons and links, 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,"total_views":0,"date_published":"2026-09-26T16:45:07.44","date_updated":"2026-09-26T16:45:08.21","date_created":"2026-09-26T16:28:33.687"}}}