Chat and support widgets
Add live chat, support inboxes, and feedback widgets from Intercom, Crisp, Tawk, and others.
Every mainstream chat / support tool ships a single JavaScript
snippet you drop into your site. Paste it into PageFork and the AI
places it at the end of <body> where chat widgets normally live.
Chat widgets make sites heavier and trigger cookie-consent rules in most regions. Only add one if you’ll actually answer messages.
The universal pattern
Copy the vendor’s snippet and paste:
Add this chat widget to every page:
<!-- (paste vendor snippet here) -->Or, for the popular ones, just ask by name:
Add the Intercom chat widget to every page. App ID: abc123.Intercom
Add Intercom to every page. App ID: abc123.Intercom offers more advanced features (user identification, events) that need extra snippet configuration — ask the AI to wire them:
Add Intercom with user identification. App ID: abc123. Use the
identity snippet with name and email from window.pagefork.visitor.Crisp Chat
Free tier available.
Add Crisp chat to every page. Website ID: abc12-3456-7890-ab.Tawk.to
Free.
Add Tawk.to chat to every page. Widget ID:
https://embed.tawk.to/abc123/def456Drift
Add Drift chat to every page. App ID: abc12345.HubSpot Chat
Paste the tracking code from HubSpot → Settings → Tracking code. It bundles chat alongside HubSpot analytics.
Add HubSpot tracking + chat. Portal ID: 12345678.LiveChat
Add LiveChat to every page. License ID: 12345678.Chatwoot (self-hosted or cloud)
Add Chatwoot to every page. Base URL: https://app.chatwoot.com. Website
token: abc123.Front Chat
Add Front Chat to every page. Chat ID: abc123.Feedback / user-input widgets
Some tools are feedback widgets rather than live chat:
- Canny — public product-feedback board; paste their embed to show it inline.
- Featurebase — similar.
- Frill — roadmap + feedback widget.
- Senja collect-testimonial widget — public review form.
Add the Canny feedback widget to the Feedback page. App ID: abc123.
Board token: def456.Only show on certain pages
By default, a chat widget appears everywhere — which is usually what you want. If not:
Show Intercom only on the Pricing and Contact pages. Remove it from
everywhere else.Hide Tawk.to on the Thank You page.Position and styling
Move the Intercom launcher to the bottom-left. Add 24px extra bottom
offset on mobile so it doesn't cover the CTA button.Make the Crisp chat bubble use brand color #E85D4E.Vendor-specific styling works when the vendor exposes configuration; the AI uses the correct API for each tool.
Mobile considerations
- Chat launcher icons overlap the bottom CTAs on many mobile layouts. Tell the AI to add a bottom offset, or hide the chat on mobile entirely.
- On tiny screens, big chat widgets that auto-expand on page load can cover the fold. Keep them collapsed by default.
Performance
Chat widgets typically add 100–400 KB of JavaScript. To keep Lighthouse scores up:
- Load them only after interaction — ask the AI to use the vendor’s deferred-load option if one exists.
- Don’t stack multiple chat widgets.
Load Intercom only after the user scrolls or clicks anywhere on the
page.Troubleshooting
- Widget doesn’t appear — open devtools → Console. Most vendors log a clear error (wrong app ID, domain not whitelisted).
- Widget appears in editor but not on published site — remember to publish. See Preview not updating.
- Domain mismatch — some vendors (Intercom, Drift) require you to add your custom domain in their dashboard.
- Chat blocked by cookie consent — make sure chat is categorized as essential or allowed by default in your consent manager. See Cookie consent and privacy.