Installing Appzi

To make Appzi work on your site, the portal identifier must be specified.

One Line Script Tag

The Appzi script (found under Portal Settings) must be included on every page where you want the survey to appear using a simple <script src="..."> tag.

You can place it traditionally in either the <head> or just before the closing </body> tag.

<html>
<head>
  <!-- ..other scripts.. -->
  <script async src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"></script>
</head>
<body>
  <h1>My Fantastic site</h1>
  <!-- Your page content -->
</body>
</html>

Do not omit the token parameter from the URL — it’s required to load the correct configuration. The Appzi survey is distributed HTTPS-only, so protocol relative urls like <script src="//w.appz... will not work.

Javascript function

This method is suitable if you prefer not to modify the page directly and are using a script manager like Google Tag Manager.

(function injectAppziScript(document) {
  const script = document.createElement("script");
  script.src = "https://w.appzi.io/w.js?token=PORTAL_TOKEN";
  script.async = true;
  document.head.appendChild(script);
})(document);

Via the Settings Object

This option is recommended if you want to configure additional features using the window.appziSettings object. The Appzi bundle loads only once, so make sure the settings object is defined before loading the Appzi script.

<html>
<head>
  <script>
    window.appziSettings = {
      portal: "PORTAL_TOKEN",
      data: {
        // ...
      },
    };
  </script>
</head>
<body>
  <h1>My Fantastic site</h1>
  <!-- Your page content -->
  <script async src="https://w.appzi.io/w.js"></script>
</body>
</html>

Finding Your Portal Token

Your portal token can be found in the Appzi Portal:

Log in to portal.appzi.com
Select your portal from the dashboard
Navigate to Settings → Portal Settings
Copy the token from the “Installation Code” section

Replace PORTAL_TOKEN in the examples above with your actual portal token.

Verifying Installation

After adding the Appzi script to your site, verify it’s working:

Open your website in a browser
Open the browser’s Developer Console (press F12)
Type appzi in the console and press Enter
You should see an object with methods like openSurvey

If you see undefined, check that:

The script tag is present in your HTML
The token parameter is correct
There are no JavaScript errors in the console
Your site’s Content Security Policy (CSP) isn’t blocking the script (see CSP Configuration)

Client-Side Frameworks

For client-side frameworks without server-side rendering (Create React App, Vue CLI, Angular), add Appzi using one of these approaches:

Add the script to your public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <script async src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Or load it dynamically in your component:

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://w.appzi.io/w.js?token=PORTAL_TOKEN';
  script.async = true;
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

Add to your public/index.html or load in main.js:

const script = document.createElement('script');
script.src = 'https://w.appzi.io/w.js?token=PORTAL_TOKEN';
script.async = true;
document.head.appendChild(script);

Add to src/index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your App</title>
<script async src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

Server-Side Rendering (SSR)

Appzi is a client-side library and does not support server-side rendering. When using SSR frameworks, you must ensure Appzi only loads on the client side to avoid errors and hydration mismatches.

App Router - Use client components:

'use client';

import { useEffect } from 'react';

export default function AppziScript() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://w.appzi.io/w.js?token=PORTAL_TOKEN';
  script.async = true;
  document.head.appendChild(script);
}, []);

return null;
}

// app/layout.tsx
import AppziScript from './components/AppziScript';

export default function RootLayout({ children }) {
return (
  <html>
    <body>
      {children}
      <AppziScript />
    </body>
  </html>
);
}

Pages Router - Add to _document.js:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
  <Html>
    <Head>
      <script
        async
        src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);
}

Use the <ClientOnly> component to prevent server-side execution.

Step 1: Create a component to load Appzi (components/AppziScript.vue):

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
const script = document.createElement('script');
script.src = 'https://w.appzi.io/w.js?token=PORTAL_TOKEN';
script.async = true;
document.head.appendChild(script);
});
</script>

<template>
<div></div>
</template>

Step 2: Use it in your layout with <ClientOnly> (app.vue or layout):

<template>
<div>
  <NuxtPage />
  <ClientOnly>
    <AppziScript />
  </ClientOnly>
</div>
</template>

Check for browser environment before loading:

<script>
import { browser } from '$app/environment';
import { onMount } from 'svelte';

onMount(() => {
  if (browser) {
    const script = document.createElement('script');
    script.src = 'https://w.appzi.io/w.js?token=PORTAL_TOKEN';
    script.async = true;
    document.head.appendChild(script);
  }
});
</script>

<slot />

Add the Appzi script to your layout file:

<!DOCTYPE html>
<html>
<head>
  <script async src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"></script>
</head>
<body>
  {{ content }}
</body>
</html>

Jekyll generates static HTML at build time, so the Appzi script will only execute when users visit your site in their browser.

Client Bundles

Self-hosted Appzi bundles are available upon request. Please 📧 reach out for details.