Install the widget
The HelpShelf widget is a single script tag. It loads asynchronously, so it never blocks your page.
Get your snippet
Go to Widget in your dashboard. Your snippet is at the top of the page with a copy button:
<script src="https://app.helpshelf.com/widget/YOUR_SITE_HASH.js" data-helpshelf-site="YOUR_SITE_HASH" async></script>YOUR_SITE_HASH is the 8-character ID unique to your site. Always copy the snippet from the dashboard rather than typing it out — that way the hash is guaranteed correct.
Where to put it
Paste it into your site's HTML just before the closing </body> tag, on every page you want the widget to appear on. Most sites have a single layout or template file where this belongs.
Placing it before </head> also works — the script is async, so it won't block rendering either way. You may also see a legacy form, https://app.helpshelf.com/widget.js with only the data-helpshelf-site attribute: it loads the same widget, but the snippet above is the canonical one.
Which site should I install it on?
- Your marketing site, on day one. Pricing and feature pages are where buyers ask questions — and where sales mode and the proactive teaser earn their keep.
- Inside your app, later. Add the same snippet there and pair it with the identify call — see Identifying logged-in users — so conversations tie to real accounts and answers get personal.
- Built your app with Lovable, Bolt, v0 or similar? Then the app is the site — one snippet covers both.
Verify it worked
Load your site in a new tab. The launcher button should appear in the bottom corner within a second or two. If it doesn't, open your browser console and look for messages beginning [HelpShelf] — then see Widget isn't appearing.
Platform-specific notes
WordPress — add the snippet to your theme's footer.php before </body>, or use any "insert headers and footers" plugin. If you use a child theme, add it there so it survives theme updates.
Webflow — Project settings → Custom code → Footer code, then republish.
Shopify — Online Store → Themes → Edit code → theme.liquid, before </body>.
Squarespace — Settings → Advanced → Code injection → Footer.
Next.js / React — put the tag in your root layout (app/layout.tsx) or _document.tsx. Don't render it inside a client component that remounts, or you'll load the widget more than once.
Google Tag Manager — see Install with Google Tag Manager.
Remove your old chat widget
If you're routing visitors to Intercom, Crisp, Help Scout or similar through HelpShelf, remove that provider's own script tag from your site. HelpShelf loads it for you when a visitor asks to talk to a human. Leaving both in place shows two launcher buttons and confuses visitors.