Installation Guide

Add Instro Web Assist to almost any website

Generate your widget in the dashboard, copy your Instro snippet, and then place it using the pattern that matches your stack.

Open dashboard Back to Web Assist

Universal snippet

Copy the exact code from your dashboard

The safest option is to copy your generated snippet exactly as Instro gives it to you. The example below shows the general shape and placement only.

<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>

Install it once, publish your site, and then test on a live page.

Rules

Keep the install simple

Copy your own snippet

Use the exact code generated in your Instro dashboard so the right widget URL and user ID are preserved.

Load it once

Install the widget a single time in your global layout, footer, or root app file so it does not duplicate across pages.

Prefer client-side loading

For framework apps, load third-party scripts after the app mounts or with the framework's official script helper.

Publish, then test

After deployment, open a real page, confirm the launcher appears, and send one test message from the live site.

Platforms

HTML React Next.js Vue Nuxt WordPress Wix Shopify PHP

HTML

HTML website

`index.html` or footer include

For plain HTML or simple server-rendered pages, paste the Instro snippet just before the closing body tag.

How to install

1Open the HTML file or shared footer template used by your site.
2Paste your Instro dashboard snippet just before `</body>`.
3Save, upload, and refresh a live page to verify the widget loads.

Example

HTML

<!-- Paste your Instro dashboard snippet just before </body> -->
<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>
</body>

Using `defer` keeps the script from blocking the initial HTML parse in standard websites.

React

React site

`App.tsx` or a root layout component

For React apps, add the widget once at the root and inject the script inside an effect so it only runs in the browser.

How to install

1Create a small `InstroWidget` component in your React app.
2Append the script inside `useEffect()` and guard against duplicates with an element id.
3Render that component once near the bottom of your root app component.

Example

TSX

import { useEffect } from "react";

function InstroWidget() {
  useEffect(() => {
    if (document.getElementById("instro-web-assist")) return;

    const script = document.createElement("script");
    script.id = "instro-web-assist";
    script.src = "YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js";
    script.defer = true;
    script.setAttribute("data-user-id", "YOUR_INSTRO_USER_ID");
    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return null;
}

export default function App() {
  return (
    <>
      {/* your app */}
      <InstroWidget />
    </>
  );
}

This follows React's effect model for connecting to external systems on the client.

Next.js

Next.js site

`app/layout.tsx` or `pages/_app.tsx`

For Next.js, use the framework's built-in `next/script` component and load the widget once from your top-level layout.

How to install

1Import `Script` from `next/script`.
2Add the widget script in your root layout or `_app` so it appears across the site.
3Use `afterInteractive` or `lazyOnload`; for a chat widget, `lazyOnload` is a good default.

Example

TSX

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="instro-web-assist"
          src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
          data-user-id="YOUR_INSTRO_USER_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

This assumes “XJS” meant Next.js. If you meant a different stack, I can add that variant too.

Vue

Vue site

`App.vue` or a global layout component

For Vue, load the widget after mount so the DOM exists and the script only runs on the client.

How to install

1Add the script in `onMounted()` inside `App.vue` or your global layout.
2Guard against duplicates with a fixed script id.
3Clean it up in `onUnmounted()` if that root component can be replaced.

Example

Vue

<script setup>
import { onMounted, onUnmounted } from "vue";

let scriptEl;

onMounted(() => {
  const existing = document.getElementById("instro-web-assist");
  if (existing) return;

  scriptEl = document.createElement("script");
  scriptEl.id = "instro-web-assist";
  scriptEl.src = "YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js";
  scriptEl.defer = true;
  scriptEl.setAttribute("data-user-id", "YOUR_INSTRO_USER_ID");
  document.body.appendChild(scriptEl);
});

onUnmounted(() => {
  scriptEl?.remove();
});
<\/script>

<template>
  <RouterView />
</template>

Vue's `onMounted()` hook is intended for DOM-related side effects and does not run during SSR.

Nuxt

Nuxt site

`app.vue`

For Nuxt, register the external script with `useHead()` and place it at the end of the body so it loads globally.

How to install

1Open `app.vue` so the widget loads across every route.
2Add the script through `useHead()` with `tagPosition: 'bodyClose'`.
3Keep the `data-user-id` on the script element and publish the site.

Example

Vue

<script setup lang="ts">
useHead({
  script: [
    {
      key: "instro-web-assist",
      src: "YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js",
      defer: true,
      tagPosition: "bodyClose",
      "data-user-id": "YOUR_INSTRO_USER_ID",
    },
  ],
});
<\/script>

<template>
  <NuxtPage />
</template>

This assumes "Mug" meant Nuxt. Nuxt's head management supports body-close scripts directly.

WordPress

WordPress site

Custom HTML block or theme footer

For WordPress, the quickest path is a Custom HTML block on the page you want. For a site-wide install, place the snippet in your footer template or code injection area.

How to install

1In the block editor, add a Custom HTML block where you want the widget to be available.
2Paste your Instro dashboard snippet into that block and update the page.
3If you want it site-wide, add the same snippet to your footer template or site-wide code injection area instead.

Example

HTML

<!-- Custom HTML block or footer.php -->
<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>

On WordPress.com, script tags require hosting-enabled plans. On WordPress.org or self-hosted installs, the user adding the block may need permission to use unfiltered HTML.

Wix

Wix site

Site dashboard custom code settings

For Wix, add the Instro snippet through the platform's Custom Code settings so it loads globally without editing raw template files.

How to install

1Publish the site and make sure it has a connected domain, because Wix requires that before site-wide custom code can run.
2Open your site's dashboard, go to Settings, then Custom Code in Development & integrations.
3Click Add Custom Code, paste your Instro snippet, apply it to All pages, and place it at Body - end.
4Choose to load it once per visit unless you have a specific reason to reload it on every page open, then apply and test the live site.

Example

HTML

<!-- Wix dashboard > Settings > Custom Code -->
<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>

Wix's recommended placement options are Head, Body - start, or Body - end. For a chat widget, Body - end is the safest default.

Shopify

Shopify store

`layout/theme.liquid`

For Shopify, edit the theme code and place the widget in `theme.liquid` before the closing body tag so it loads across the storefront.

How to install

1From Shopify admin, go to Online Store, Themes, then Edit code.
2Open `layout/theme.liquid` in your active theme.
3Paste the Instro snippet just before `</body>`, save, and preview the storefront.

Example

Liquid / HTML

{%- comment -%} Paste before </body> in layout/theme.liquid {%- endcomment -%}
<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>
</body>

Duplicate your theme before editing code so you have a rollback point if you need one.

PHP

PHP website

`footer.php` or a shared layout include

For PHP sites, add the widget to the shared footer or layout partial so every page inherits it automatically.

How to install

1Open the shared footer include used by your PHP templates.
2Paste the Instro snippet just before the closing `</body>` tag.
3Deploy the updated file and test a live page.

Example

PHP / HTML

<!-- footer.php or a shared PHP layout partial -->
<?php /* Paste your Instro widget just before </body> */ ?>
<script
  src="YOUR_INSTRO_WIDGET_URL/MudDt5Fdr.js"
  data-user-id="YOUR_INSTRO_USER_ID"
  defer
><\/script>
</body>

If your PHP site uses multiple layout files, install the widget in the one shared by every page so it only loads once.

Troubleshooting

Widget does not appear

Check that the script is present in the final page HTML, that it only appears once, and that you published the change to the live site instead of only saving locally.

Console shows script or CSP errors

If your site uses a Content Security Policy, allow the Instro script origin in `script-src` and the API origin used by your widget in `connect-src`.

It loads twice

This usually means the snippet was added both in a global layout and on an individual page. Keep only one installation path.

Framework route changes behave oddly

Move the install to the root app layout so the script stays attached once instead of reloading on every page transition.