Vercel Integration

Put your AI chatbot on the site you deploy with Vercel

Overview

Vercel hosts your website. Asyntai answers the people who visit it. Install Asyntai from the Vercel Marketplace and the install window links the two in a few clicks.

Asyntai writes your widget id into the Vercel project as an environment variable. You add one script tag that reads it, redeploy, and the chat is live on every page.

How It Works

Your AI agent reads your website and answers questions about your products, your prices and your policies, day and night. It speaks the visitor's language, collects leads, and hands a chat to your team when a person is needed.

Because the widget id travels as an environment variable, each Vercel environment can carry the right value. Preview deployments and production both get the chat.

Requirements

A Vercel account with at least one project
An Asyntai account, on any plan including Free
Permission to install integrations on the Vercel team

Installation

Follow these steps to add Asyntai to a Vercel project:

Install From the Marketplace

Open the Vercel Marketplace, find Asyntai, and press Install. Choose the account or team that holds your project.

Sign In to Asyntai

A window opens on Asyntai. Sign in, or create an account with your email. A new account can give its website address, and the AI learns from that site straight away.

Choose the Website and the Project

Pick which Asyntai website the chatbot belongs to, then pick the Vercel project that should carry it. Press Connect Vercel.

Add the Script Tag

Asyntai has written NEXT_PUBLIC_ASYNTAI_WIDGET_ID into the project. Add the snippet below to your layout, then redeploy.

The Snippet

For a Next.js App Router project, put this in app/layout.tsx, inside the <body> tag:

import Script from 'next/script'

<Script
  src="https://widget.asyntai.com/static/js/chat-widget.js"
  data-asyntai-id={process.env.NEXT_PUBLIC_ASYNTAI_WIDGET_ID}
  strategy="afterInteractive"
/>

For a Pages Router project, put the same tag in pages/_app.tsx. For any other framework on Vercel, a plain tag works:

<script async
  src="https://widget.asyntai.com/static/js/chat-widget.js"
  data-asyntai-id="YOUR_WIDGET_ID"></script>

Tip: Vercel reads environment variables at build time. Redeploy the project after the install, or the variable is not in the bundle yet.

Changing the Website

Open the Asyntai integration in Vercel and press Configure. Choose a different Asyntai website or a different project, and Asyntai updates the same environment variable. Redeploy afterwards.

Removing It

In Vercel, open Settings → Integrations, find Asyntai, and press Remove. Asyntai deletes the environment variable from the project. Take the script tag out of your layout and redeploy.

Billing

Asyntai bills you directly, not through Vercel. Your Asyntai plan covers every channel, so the same agent also works on your other sites and apps. View pricing.

Privacy

The integration stores the Vercel project you chose and the widget id it wrote there. Privacy policy.

Need Help?

If you have any questions or run into issues, contact us at [email protected].

Documentatie