My site uses CSP — what do I need to add?

Add *.imsupporting.com to script-src, frame-src, connect-src, and img-src directives. Include blob: in worker-src if needed.

Add Live Chat to a Custom Website or Frontend App

Place the widget in your global layout or app shell once — it loads on every page, works on any framework, and takes under 5 minutes to set up.

Under 5 minutes Any HTML / JS framework Beginner

Get Started Free Full Install Guide

At a Glance

Where to add code Root layout, app shell, or shared template

Applies to Entire site — all pages and routes

Works with HTML, React, Vue, Angular, headless

Final step Deploy changes and test on live pages

Framework agnostic Mobile responsive CSP compatible

Get Your Widget Code

Sign in to your IMSupporting account.
Go to Settings → Website Integrations.
Copy the full widget code shown for your site.

Always use the code from your own account — it contains your specific site settings and routing configuration.

Open Your Global Layout or App Shell

Find the single file that wraps your entire site — this is where you'll add the widget once so it loads everywhere.

Custom HTML Main template, layout, or shared footer include

React App.js or root layout component

Vue App.vue or global layout wrapper

Angular app.component.html or shell template

Headless Frontend shell or shared page layout

Next.js / Nuxt _app.js, app.vue, or layout.tsx

For SPAs: mount the widget in the root component, not in a component that mounts/unmounts during route changes. This keeps the chat stable for users and avoids duplicate loads.

Paste the Widget Code Before `</body>`

In your layout file, locate the closing </body> tag (or equivalent in your framework) and paste the widget code just before it.

Open the global layout file identified in Step 2.
Find the closing </body> tag or the end of your root template markup.
Paste your IMSupporting widget code on the line directly above </body>.
Save the file.

For React/Vue/Angular — if there is no literal </body>, paste the script tag or use a script injection approach (e.g. useEffect in React, or mounted in Vue) in your root component.

Deploy and Test

Deploy your changes and verify the widget loads correctly on your live site.

Deploy or build your project as normal.
Open key pages on your live site (home, pricing, product, support).
Confirm the chat widget launcher appears and is working correctly on desktop and mobile.
Send a test message to verify it routes to your IMSupporting dashboard.

Using CSP? If your site enforces a Content Security Policy, add *.imsupporting.com to script-src, frame-src, and connect-src. See the CSP guide for details.

Frequently Asked Questions

Which file do I edit in React, Vue, or Angular?

For React, add the widget script in App.js (or your root layout) using useEffect. For Vue, use the mounted() lifecycle in App.vue. For Angular, add the script to app.component.ts via ngOnInit. The goal in all cases is to load it once in the root component that persists across all routes.

My site uses Content Security Policy (CSP) — what do I need to add?

Add *.imsupporting.com to your script-src, frame-src, connect-src, and img-src directives. If you use a worker-based approach, also include blob: in worker-src. See the full CSP requirements for all domains needed.

Will it work on single-page apps with client-side routing?

Yes — as long as you mount the widget in the root component that stays mounted across route changes. Do not add it in a page component that unmounts on navigation, as this would cause duplicate loads or missing chat sessions.

Can IMSupporting help with the custom site setup?

Absolutely. Use the free integration assistance service and the team will validate the correct placement for your specific framework and setup.

Ready to Add Live Chat to Your Custom Site?

Set up your IMSupporting account in minutes and start converting visitors into conversations today — on any framework.

Start Free All Platform Guides Free Setup Help