How to add the AISkillHub chat with custom code

Before you start, create your widget and copy your key from its Install tab. Verify your production domain under Domain & verification. While you develop, localhost works without verification. The overview guide has the details.

In every example, replace wgt_your_widget_key with your own key. Load the script once per page. A second copy is ignored.

Plain HTML

Paste the snippet just before </body> on every page, or in the shared footer template your pages use:

<script src="https://app.aiskillhub.dev/widget.js" data-widget="wgt_your_widget_key" async></script>

React (Vite or Create React App)

Add the snippet to index.html, just before </body>. That loads it once for the whole app, and the chat follows route changes by itself.

Next.js (App Router)

Use next/script in your root layout, app/layout.tsx:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://app.aiskillhub.dev/widget.js" data-widget="wgt_your_widget_key" strategy="afterInteractive" />
      </body>
    </html>
  );
}

On the Pages Router, put the same Script in pages/_app.tsx.

Vue and Nuxt

For a Vue app, add the snippet to index.html before </body>. In Nuxt 3, add it in nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: "https://app.aiskillhub.dev/widget.js", async: true, tagPosition: "bodyClose", "data-widget": "wgt_your_widget_key" },
      ],
    },
  },
});

Google Tag Manager

1. Create a new tag of type Custom HTML.
2. Paste the snippet.
3. Set the trigger to All Pages (or Initialization - All Pages).
4. Save, then Submit and publish the container.

Content Security Policy

If your site sends a Content-Security-Policy header, allow AISkillHub:

script-src https://app.aiskillhub.dev;
frame-src https://app.aiskillhub.dev;

Add these sources to your existing directives rather than replacing them.

Single-page apps and error pages

The chat notices client-side route changes on its own. If your app renders a "not found" page without a real 404 status, add this tag to that page so visitors there use the main room:

<meta name="aiskillhub-chat-room" content="main">

Still stuck? See if the chat does not show up.