Voicegram

Framework recipes

Drop-in install snippets for React, Next.js, WordPress, Webflow, Squarespace, Wix, and Shopify.

On this page

The Voicegram widget is a plain ES-module script, so any framework or site builder that lets you inject a <script> tag can host it. This page collects the canonical install location for each common framework, plus the per-page bubble-suppression pattern where it differs.

For setup details, see Quickstart and Customization.

Plain HTML, Webflow, WordPress, Squarespace, Wix, Shopify

Drop the script tag into the site's global header or footer. Most site builders expose a "custom head code" or "site-wide HTML" field for exactly this.

html
<script type="module" src="https://cdn.voicegram.io/w/pk_xxx.js"></script>

Where to put it per platform:

  • WordPress. Add to your theme's header.php or use a plugin like WPCode that exposes a "custom HTML" head field.
  • Webflow. Project Settings › Custom Code › Footer Code.
  • Squarespace. Settings › Advanced › Code Injection › Footer.
  • Wix. Settings › Custom Code › Add Custom Code › Body (end).
  • Shopify. Online Store › Themes › Edit code › theme.liquid, just before </body>.

For per-page bubble suppression, add the meta tag to that page's <head> via the platform's "custom head code" field.

Next.js (App Router)

In app/layout.tsx:

tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          type="module"
          src="https://cdn.voicegram.io/w/pk_xxx.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Per-page bubble suppression with App Router metadata:

tsx
// app/products/[id]/page.tsx
export const metadata = {
  other: { 'voicegram-bubble': 'off' },
};

The widget re-evaluates the meta tag on every route change, so the bubble hides and shows automatically as visitors navigate between pages.

Next.js (Pages Router)

In pages/_app.tsx or a custom pages/_document.tsx:

tsx
import Script from 'next/script';

<Script
  type="module"
  src="https://cdn.voicegram.io/w/pk_xxx.js"
  strategy="afterInteractive"
/>

Per-page bubble suppression via next/head:

tsx
import Head from 'next/head';

export default function ProductPage() {
  return (
    <>
      <Head>
        <meta name="voicegram-bubble" content="off" />
      </Head>
      {/* page contents */}
    </>
  );
}

React (Vite, Create React App, or any non-Next setup)

Add the script tag directly to index.html:

html
<!-- index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="https://cdn.voicegram.io/w/pk_xxx.js"></script>
</body>

For per-page bubble suppression, use a small effect to manage the meta tag (or use React Helmet / react-helmet-async if you already have it):

tsx
import { useEffect } from 'react';

function HideBubbleOnThisPage() {
  useEffect(() => {
    const meta = document.createElement('meta');
    meta.name = 'voicegram-bubble';
    meta.content = 'off';
    document.head.appendChild(meta);
    return () => {
      meta.remove();
    };
  }, []);
  return null;
}

Vue 3 / Nuxt 3

In nuxt.config.ts:

ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          type: 'module',
          src: 'https://cdn.voicegram.io/w/pk_xxx.js',
        },
      ],
    },
  },
});

Per-page bubble suppression with useHead:

vue
<script setup>
useHead({
  meta: [{ name: 'voicegram-bubble', content: 'off' }],
});
</script>

SvelteKit

In app.html:

html
<head>
  <script type="module" src="https://cdn.voicegram.io/w/pk_xxx.js"></script>
</head>

Per-page bubble suppression in a +page.svelte:

svelte
<svelte:head>
  <meta name="voicegram-bubble" content="off">
</svelte:head>

Astro

In src/layouts/Layout.astro (or whichever shared layout your pages use):

astro
<head>
  <script type="module" src="https://cdn.voicegram.io/w/pk_xxx.js"></script>
</head>

Per-page bubble suppression in a page's frontmatter:

astro
---
// In a page's frontmatter
---
<head>
  <meta name="voicegram-bubble" content="off" />
</head>

Next steps

Need help? Email support@voicegram.io.