How to install AskHandle chat widget on a single-page website?

If you're building your website using ReactJS or another single-page application (SPA) framework, installing the chat widget requires a slightly different approach than a traditional website. Because SPAs load content dynamically without full page reloads, embedding scripts like our widget can fail if not configured correctly.

This guide walks you through the recommended installation methods, highlights common mistakes (especially when using tools like Google Tag Manager), and provides working code examples to ensure your widget displays as expected on every route.

✅ Method 1: Add to public/index.html (Most Reliable)

This is the best option if your project has access to index.html (e.g., Create React App).

Steps:

1. Open your React project.
2. Edit public/index.html.
3. Paste this just before </body>:

HtmlCopy code

✅ This ensures the config is set before the script loads, and only loads once.

⚠️ Method 2: Google Tag Manager — Use With Caution

🚫 Common Mistake

• You add the script in a Custom HTML tag with a Page View trigger.
• This causes the script to load before window.webchatConfig is available.
• Result: Widget silently fails — no error, no chat.

✅ Correct Setup

1. In GTM, create a Custom HTML Tag.
2. Paste:

HtmlCopy code

3. Set the trigger to: ✔️ “DOM Ready” (not "Page View")

✅ This ensures the script loads at the right time, with the config available.

🛠️ Method 3: Inject Widget in React (If No index.html)

If your site doesn’t use index.html — like in Next.js, Remix, or headless CMS setups — use this React-based approach:

JsxCopy code

🧠 Place this in your root component (like _app.js or Layout.jsx) to ensure it loads once.

🔁 Route Changes in SPAs

SPAs like React don't reload the page when navigating — so your widget only needs to load once, as long as you don’t remove it from the DOM. Avoid reloading the widget script on every route change.

✅ Summary