Vercel

Add your Zetra agent to an app hosted on Vercel, with the agent ID kept in an environment variable.

Overview

If your site or app is hosted on Vercel, add the Zetra chat bubble in your code and keep your agent's ID in a Vercel environment variable. That way each environment (Production, Preview, Development) can use its own agent without code changes.

What you can do

Add your agent to any Vercel project (Next.js, React, Vue, SvelteKit or plain HTML) in a few lines, and point each environment at its own agent.

Good to know

Zetra isn't listed in the Vercel Marketplace yet, so this guide uses a few lines of code instead of a one-click install. Everything you change in the Zetra dashboard (look, data sources, actions) goes live straight away, with no redeploy.

Before you start

A Zetra account with an agent. If you haven't built one yet, create a free account and follow the Quick start.
A Vercel account and a project deployed on it.
Your agent's Agent ID, from Settings → General in the Agent details card.

How to add your agent

Add the environment variable in Vercel
1. Open your project in the Vercel dashboard and go to Settings → Environment Variables.
2. Add NEXT_PUBLIC_ZETRA_AGENT_ID with your Agent ID as the value, and tick the environments it applies to.
3. Click Save.
Not using Next.js?
Use your framework's prefix for variables the browser can read, for example VITE_ZETRA_AGENT_ID for Vite or PUBLIC_ZETRA_AGENT_ID for SvelteKit and Astro.

Load the chat bubble in your app

In a Next.js App Router project, add the script to app/layout.tsx so it loads on every page:

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NEXT_PUBLIC_ZETRA_AGENT_ID && (
          <Script
            src="https://zetra.chat/widget.js"
            data-agent-id={process.env.NEXT_PUBLIC_ZETRA_AGENT_ID}
            strategy="lazyOnload"
          />
        )}
      </body>
    </html>
  );
}

For a static HTML site, paste the website widget code before </body> instead:

index.html

<script src="https://zetra.chat/widget.js" data-agent-id="YOUR_AGENT_ID" async></script>

Redeploy
Environment variables are read when your project is built, so push a commit or open Deployments, click ⋯ on the latest deployment and choose Redeploy.

Check it works

Open your deployed site. The chat bubble appears in the corner. Ask it something from your data sources and check the answer.

Managing your setup

A different agent per environment

Create a separate agent in Zetra for testing (for example a copy of your production agent), then set a different NEXT_PUBLIC_ZETRA_AGENT_ID for Production, Preview and Development in Vercel. Test chats then never mix with real customer conversations, and each agent has its own analytics.

Several projects, one agent

Add the same variable and script to each project. They all share the same agent, knowledge and conversation history.

Removing the chat

Delete the environment variable (or the script) and redeploy.

Troubleshooting

The bubble doesn't appear after deploying

Possible cause: the project wasn't rebuilt after adding the variable, or the variable isn't enabled for this environment.

Solution: Redeploy, then check Settings → Environment Variables in Vercel: the variable must exist for the environment you're looking at, with the right prefix for your framework. Open your browser's developer tools (F12) and check that widget.js loads without errors.

It works in Preview but not in Production (or the other way round)

Possible cause: the variable is only set for one environment, or your allowed domains don't include the other address.

Solution: Tick every environment for the variable. If you restricted domains in Settings → Security, add both your production domain and your preview domain.

The chat doesn't appear

Possible cause: the code was pasted into the wrong place, the page wasn't republished, or your agent is switched off.

Solution: Check that the whole code was pasted (it starts with <script or <iframe), publish the site again, and open it in a private window. In Zetra, open Channels → Chat bubble and make sure Visibility is on. If you listed allowed domains under Settings → Security, your site's exact address (with https:// and www if you use it) must be on the list.

Next steps

Add data sources →Upload documents, crawl websites and add Q&A pairs.Customize the chat →Match your brand colours and style.Add actions →Collect leads, book meetings and call your own APIs.Use the API instead →Build your own chat UI on top of the REST API.

Looking for another site builder? The same website widget code works on any site that lets you add a script.

← Bubble WhatsApp →