How to install Instro Web Assist

For modern JavaScript apps, install the official Instro Web Assist SDK from npm and initialise it once near the root of your app.

npm install instro-web-assist

import InstroWebAssist from "instro-web-assist";

InstroWebAssist.init({
  userId: "YOUR_INSTRO_USER_ID",
});

Use the npm package when your site is built with a JavaScript bundler. Use the dashboard snippet for no-build sites, CMS platforms and simple template installs.

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

<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.

For React apps, use the React component from the `instro-web-assist` npm package and mount it once at the root.

npm install instro-web-assist

import { InstroWebAssist } from "instro-web-assist/react";

export default function App() {
  return <InstroWebAssist userId="YOUR_INSTRO_USER_ID" />;
}

You can still use the dashboard script snippet if you prefer a script-tag install.

For Next.js, install the npm package and render the React component from a small client component.

"use client";

import { InstroWebAssist } from "instro-web-assist/react";

export default function WebAssistWidget() {
  return <InstroWebAssist userId={process.env.NEXT_PUBLIC_INSTRO_USER_ID} />;
}

Keep the user ID in a public environment variable only if it is intended to be available in browser code.

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

onMounted(() => {
  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.dataset.userId = "YOUR_INSTRO_USER_ID";
  document.body.appendChild(script);
});

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

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

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

Nuxt head management supports body-close scripts directly. If you prefer package-based setup, use the npm guide above.

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

<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 self-hosted installs, the user may need permission to use unfiltered HTML.

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

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

For a chat widget, Body - end is the safest default placement.

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

<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.

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

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

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