Help CenterInstalling the Widget

Installing the Widget

A single script tag adds voice feedback to any website. Step-by-step guides for WordPress, Shopify, Webflow, and popular frameworks.

The Voiseback widget is a lightweight script that adds a feedback collection button to your website. Installation takes about a minute — paste a single script tag and the widget handles everything else, from recording audio to uploading submissions.

Not a developer?

If you don't want to touch any code, you can skip widget installation entirely and share your Feedback Page link instead. Find it on the Integrate → Install Widget page in your dashboard — copy the link and send it to customers via email, social media, QR codes, or anywhere else.

Getting Your Embed Code

Your project-specific embed code is available in the dashboard:

Go to Integrate → Install Widget in the sidebar.
Copy the script tag displayed on the page. It includes your unique project key.

The embed code looks like this:

Widget embed code

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

Replace YOUR_PROJECT_KEY with the actual key shown in your dashboard (this is pre-filled when you copy from the Install Widget page).

Adding the Script to Your Site

A script tag is a small line of code that tells your website to load the Voiseback widget. You paste it once into your site's HTML, and the widget handles everything from there.

Paste it just before the closing </body> tag (this is near the very bottom of your HTML file, just before the line that says </body>):

Placement in HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Your Site</title>
</head>
<body>
  <!-- Your page content -->

  <script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>
</body>
</html>

Place the script just before the closing </body> tag so it loads after your page content. The widget initializes automatically once the page has loaded.

The data-voiseback Attribute

The data-voiseback attribute identifies which Voiseback project this widget belongs to. It is your project's API key (a UUID). You can find it on the Integrate → Install Widget page in the dashboard.

Keep your project key safe

While the project key is not a secret (it is visible in your page source), you should pair it with the domain allow-list to prevent unauthorized sites from submitting feedback to your project.

Domain Allow-List

The domain allow-list restricts which websites can load and use your widget. When configured, the widget will only function on domains you have explicitly approved. Requests from unlisted domains are rejected by the server.

To configure your allow-list:

Go to Integrate → Install Widget in the sidebar.
Under the Allowed Domains card, add each domain where your widget will be installed (e.g., yoursite.com, app.yoursite.com).
Save your changes.

You can also use wildcard subdomains with the *.myapp.com syntax to allow all subdomains at once (e.g., *.myapp.com covers app.myapp.com, staging.myapp.com, etc.). If the allow-list is left empty, the widget accepts requests from any domain — adding at least your production domain is recommended.

Include all environments

If you test on staging or localhost, add those domains too. For local development, add localhost to the allow-list. Remember to remove development domains before going live if you want strict production security.

Installation in Single-Page Applications

The Voiseback widget works with SPAs. It uses a MutationObserver to detect dynamically added data-voiseback-trigger elements, so custom trigger buttons work even when rendered after page load. Below are framework-specific notes.

React

Add the script tag to your public/index.html file (for Create React App) or include it in your root HTML template:

React (Create React App)

<!-- public/index.html -->
<body>
  <div id="root"></div>

  <script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>
</body>

Next.js

In Next.js, use the built-in Script component in your root layout for optimal loading:

Next.js App Router

// 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://voiseback.com/widget.js"
          data-voiseback="YOUR_PROJECT_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

The strategy="lazyOnload" ensures the widget loads after the page is fully interactive, keeping your core performance metrics unaffected.

Vue

Add the script tag to your public/index.html or use a plugin to inject it. For Nuxt, add it to the head section of your nuxt.config:

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://voiseback.com/widget.js',
          'data-voiseback': 'YOUR_PROJECT_KEY',
        },
      ],
    },
  },
})

Platform-Specific Guides

Below are installation instructions for popular platforms and frameworks. In every case the core step is the same — add the Voiseback script tag so it loads on every page.

WordPress

The easiest way is to use a free plugin so you don't need to edit theme files:

Install the WPCode (or Insert Headers and Footers) plugin from Plugins → Add New.
Go to Code Snippets → Header & Footer.
Paste the script into the Footer box and save.

WordPress

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

If you prefer editing theme files directly, go to Appearance → Theme File Editor, open footer.php, and paste the script just before the closing </body> tag. Note that theme updates may overwrite this change, so the plugin method is recommended.

Shopify

In your Shopify admin, go to Online Store → Themes.
Click the … menu on your active theme and select Edit code.
In the left sidebar, open the Layout folder and click theme.liquid.
Scroll to the bottom of the file. Find the line that says </body> and paste the script on the line directly above it.
Click Save in the top-right corner.

Shopify

<!-- theme.liquid, just before </body> -->
<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

Webflow

Open the Webflow Designer for your project.
Click the W menu (top-left) → Project Settings → Custom Code.
Paste the script into the Footer Code box.
Click Save Changes, then Publish your site.

Webflow

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

The widget will appear on your live site after publishing. It will not show in the Webflow Designer preview.

Squarespace

In your Squarespace dashboard, go to Settings → Advanced → Code Injection.
Paste the script into the Footer field.
Click Save.

Squarespace

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

Note

Code Injection requires a Squarespace Business plan or higher.

Wix

In the Wix dashboard, go to Settings → Custom Code (under Advanced).
Click + Add Custom Code.
Paste the script into the code box.
Under "Place Code in", select Body - end.
Under "Add Code to Pages", select All pages.
Click Apply.

Wix

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

Google Tag Manager

If you already use Google Tag Manager on your site, you can add Voiseback through it without touching your site's code:

In GTM, go to Tags → New.
Click Tag Configuration and choose Custom HTML.
Paste the script into the HTML box.
Click Triggering and select All Pages.
Name the tag (e.g., "Voiseback Widget"), save, and Publish your container.

Google Tag Manager — Custom HTML tag

<script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>

Gatsby

Use the gatsby-ssr.js (or .tsx) file to inject the script into the HTML body:

Gatsby

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="voiseback"
      src="https://voiseback.com/widget.js"
      data-voiseback="YOUR_PROJECT_KEY"
    />,
  ])
}

Remix

Add the script tag to the <body> of your root route (app/root.tsx):

Remix

// app/root.tsx
export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <script
          src="https://voiseback.com/widget.js"
          data-voiseback="YOUR_PROJECT_KEY"
        />
      </body>
    </html>
  )
}

Angular

Paste the script directly into src/index.html before </body>:

Angular

<!-- src/index.html -->
<body>
  <app-root></app-root>

  <script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>
</body>

SvelteKit

Add the script in your src/app.html file before the closing </body> tag:

SvelteKit

<!-- src/app.html -->
<body data-sveltekit-prerender="false">
  <div style="display: contents">%sveltekit.body%</div>

  <script src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>
</body>

Astro

Add the script to your base layout component (e.g., src/layouts/Layout.astro):

Astro

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <slot name="head" />
  </head>
  <body>
    <slot />

    <script is:inline src="https://voiseback.com/widget.js" data-voiseback="YOUR_PROJECT_KEY"></script>
  </body>
</html>

The is:inline directive prevents Astro from bundling the external script.

Uninstalling the Widget

To remove the widget from your site, delete the <script> tag you added during installation. Once removed, the widget will no longer appear on your pages. All previously collected feedback remains in your dashboard — removing the script does not delete any data.

Next Steps

Widget Customization & API — control the widget with JavaScript, style it to match your brand, and configure element triggers.
Creating Prompts — set up the questions your widget will display.

PreviousCreating Prompts NextWidget Configuration