Frameworks

Copy-paste CDN recipes for React, Vue, Nuxt, Angular, WordPress, Shopify, Webflow, and plain HTML.

Last updated 2026-05-25

Same one-line snippet, different homes: load the script from the GitHub Releases CDN with your data-assistant-id on it, and the widget auto-injects its floating launcher. The recipes below cover the most common stacks.

Always the CDN

Zupport.chat's embed loads directly from GitHub Releases — no package manager needed. Pinning a version for production is the recommended habit. The embed script is open source (MIT) — issues at github.com/pavelsima/zupport-embed/issues.

Plain static HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script
      src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js"
      data-assistant-id="YOUR_ASSISTANT_ID"
      defer
    ></script>
  </head>
  <body>
    <h1>My support page</h1>
  </body>
</html>

React (Vite, Next.js, CRA)

// Add the script tag to your public index.html <head>:
//
//    <script
//      src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js"
//      data-assistant-id="YOUR_ASSISTANT_ID"
//      defer
//    ></script>
//
// The widget auto-injects its launcher — no JSX needed. If you want to
// mount it inline (e.g. as a preview), declare the custom element:

export function Zupport.chatWidget() {
  return <zupport-chat data-assistant-id="YOUR_ASSISTANT_ID" data-preview />
}

If TypeScript complains about <zupport-chat>, add a tiny ambient declaration:

// types/zupport.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'zupport-chat': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        'data-assistant-id'?: string
        'data-config-url'?: string
      },
      HTMLElement
    >
  }
}

Vue 3

<!-- Add the script tag to your index.html <head>:
       <script
         src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js"
         data-assistant-id="YOUR_ASSISTANT_ID"
         defer
       ></script>

     The widget auto-injects its launcher — no template change required.
     If you want to mount it inline, tell Vue that <zupport-chat> is a
     native custom element (Vite config below): -->

<template>
  <zupport-chat data-assistant-id="YOUR_ASSISTANT_ID" data-preview />
</template>

Vue 3 needs to know zupport-chat is a native custom element so it doesn't try to resolve it as a component:

// vite.config.ts
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('zupport-'),
        },
      },
    }),
  ],
}

Nuxt 3 / 4

Add the CDN script and whitelist the custom element in one config block:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{
        src: 'https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js',
        'data-assistant-id': 'YOUR_ASSISTANT_ID',
        defer: true,
      }],
    },
  },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('zupport-'),
    },
  },
})

Then drop the element anywhere in a page:

<!-- Optional: only needed for inline preview embeds. -->
<template>
  <zupport-chat data-assistant-id="YOUR_ASSISTANT_ID" data-preview />
</template>

Angular

// Add to your angular.json "scripts" array, OR add the tag
// directly to src/index.html <head>:
//
//    <script
//      src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js"
//      data-assistant-id="YOUR_ASSISTANT_ID"
//      defer
//    ></script>
//
// The widget auto-injects its launcher. For inline embeds, register the
// custom element schema in your module:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use the element in any component template:

<!-- only needed for inline preview embeds -->
<zupport-chat data-assistant-id="YOUR_ASSISTANT_ID" data-preview></zupport-chat>

WordPress

Easiest: a header/footer-code plugin like WPCode, pasted into the footer box. If you'd rather code it, add this to your theme's functions.php:

<!-- functions.php (in your theme) -->
<?php
add_action('wp_footer', function () {
  echo '<script src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js" data-assistant-id="YOUR_ASSISTANT_ID" defer></script>';
});

Shopify

<!-- layout/theme.liquid, just before </body> -->
<script
  src="https://github.com/pavelsima/zupport-embed/releases/latest/download/embed.js"
  data-assistant-id="YOUR_ASSISTANT_ID"
  defer
></script>

Path: admin → Online Store → Themes → Actions → Edit code → layout/theme.liquid.

Webflow

Project settings → Custom code.
Paste the script tag (with data-assistant-id on it) into Before </body> tag.
Save, then publish the site. The launcher auto-injects on every page.

One snippet per page is enough

The widget mounts once. Loading the script twice (e.g. in dev and via a plugin) is harmless but wastes a network request — pick one.