Add IMSupporting to a Custom Website or Frontend App

Use this guide for custom HTML websites, React, Vue, Angular, Next.js-style frontends, and headless sites. The goal is simple: load the widget globally, keep it fast on mobile, and turn traffic into conversations.

Who This Guide Is For

If you do not use a dedicated plugin or store app flow, this is usually the right install path. Custom websites and JavaScript frameworks typically use one global widget placement so the launcher is available across the whole experience.

Best forCustom HTML, React, Vue, Angular, headless websites, and bespoke CMS builds
Install patternGlobal script placement in the app shell, layout, or shared template
Mobile outcomeResponsive widget across phones, tablets, and desktop screens
Conversion goalCatch visitors before they bounce and route leads to the right workflow

Recommended Installation Flow

  1. Start in your IMSupporting account. Use the main installation guide so you copy the right widget details for the correct site.
  2. Choose the shared layout layer. For custom HTML, that is usually the main template or layout. For React, Vue, Angular, or headless frontends, use the shared shell or global layout that renders across the site.
  3. Load the widget globally. Use one global placement rather than repeating it page by page. This keeps the install easier to maintain and more consistent for users.
  4. Check CSP and script policy if needed. If the app uses a restrictive Content Security Policy, follow the CSP guidance in the installation docs.
  5. Test on live pages and on mobile. Open key landing pages, pricing pages, support content, and product pages, then send a test message to confirm routing.
Single-page apps should place the widget in the shared app shell, not in a component that mounts and unmounts during route changes. That keeps the chat experience stable for users and avoids duplicate loads.

Framework and Site Examples

Custom HTMLUse the shared site template or footer include so the widget loads on every page.
ReactUse the top-level app shell or layout and avoid remounting the script on every route change.
VuePlace the widget in the global layout or root app wrapper for site-wide coverage.
AngularUse the root shell or a global layout template so the widget remains stable across navigation.
HeadlessPlace the widget in the rendered frontend shell rather than only in the CMS backend content blocks.
CSP-aware sitesReview script, frame, and connect directives if your deployment blocks third-party embeds by default.

Why This Matters for Sign-Ups

A global install means the widget appears at the exact moment a visitor has a question. That matters most on pricing pages, feature pages, booking pages, and high-intent product pages where a quick conversation can be the difference between a bounce and a new customer.

  • Route sales questions to AI or human teams automatically.
  • Capture lead details inside conversational workflows instead of forcing long forms up front.
  • Support mobile visitors with the same conversion path as desktop users.

Launch Fast, Then Optimise

Get the widget live first, then fine-tune the look, workflows, and AI behaviour once the conversations start coming in.

Start Free All Platform Guides Free Integration Help