MivoChat
Start free

Website setup/MivoChat field guide

Install website chat on Next.js

Next.js site owners — You or your developer control the root layout and can deploy a small site change.

By MivoChat product team · Install website chat on Next.js · Published and updated October 12, 2026

Quick answer

For a Next.js site, copy the MivoChat snippet and render its script in the root layout inside the body. The MivoChat Install page provides a next/script version using afterInteractive; add the production domain to allowed websites and verify a deployed page.

A useful setup for next.js site owners begins with the information visitors need and the handoff the team can reliably cover.

your-business.com / support

Install website chat on Next.js: setup in practice

Test the install website chat on next.js experience

A small agency can show chat on service pages while excluding a private client portal.

Source and next step for install website chat on next.js

The install website chat on next.js workflow should cite approved information and identify who can confirm an open detail.

Install website chat on Next.js launch owner

Your chosen reply channel

A named teammate owns the install website chat on next.js install and reply path.

Check Slack beta access before routing install website chat on next.js requests there.

The install website chat on next.js workflow uses business information and gives visitors a human next step.

Installation steps

  1. 1

    Copy the site snippet

    Copy the exact widget URL and site key from the Install page.

    MivoChat Install page illustration showing the Next.js snippet and the Copy snippet button.
    Illustration — your screen may look slightly different.
  2. 2

    Add the shared script

    In App Router, add `next/script` inside `<body>` in `app/layout.tsx` with `strategy="afterInteractive"` and the `data-site` key shown in the Install instructions.

    Code editor illustration showing the MivoChat Script in app/layout.tsx inside body.
    Illustration — your screen may look slightly different.
  3. 3

    Deploy and test

    For Pages Router, add the script in `pages/_app.tsx` or `_document.tsx`. Keep it in a shared root so it loads once.

    Code editor illustration showing the MivoChat Script in pages/_app.tsx for the Pages Router.
    Illustration — your screen may look slightly different.
  4. 4

    Step 4

    Set your content security policy to permit the MivoChat app origin in `script-src`, `frame-src`, and `connect-src`; those directives cover the loader, embedded chat, and its API requests.

  5. 5

    Step 5

    Deploy and test the live site in a private window, including a visitor message and team reply.

Before you start on Next.js

The `next/script` component forwards custom `data-*` attributes. Keep a single script in the root layout if chat belongs on every route.

In Next.js, decide whether the widget belongs on every route or only selected layouts before adding the shared script.

  • You have access to the app repository and know which deployment is production.
  • The MivoChat Install screen has the correct site key and widget origin.
  • The host is permitted by the site's content security policy, if one is configured.
  • A deployed URL is available for a real browser test after the change.

Step-by-step Next.js setup

Work through the router-specific installation steps, then check the deployed Next.js origin and a real conversation.

  • Copy the exact widget URL and site key from the Install page.
  • In App Router, add `next/script` inside `<body>` in `app/layout.tsx` with `strategy="afterInteractive"` and the `data-site` key shown in the Install instructions.
  • For Pages Router, add the script in `pages/_app.tsx` or `_document.tsx`. Keep it in a shared root so it loads once.
  • Set your content security policy to permit the MivoChat app origin in `script-src`, `frame-src`, and `connect-src`; those directives cover the loader, embedded chat, and its API requests.
  • Deploy and test the live site in a private window, including a visitor message and team reply.

Domains and content security policy for Next.js

In MivoChat's allowed websites, add the exact production origin used by the deployed Next.js app.

Test on your published Next.js site

Use a deployed Next.js URL for verification, since local editor and preview frames do not represent the visitor-facing origin.

Troubleshooting Next.js installation

For a missing Next.js launcher, check that the root layout renders the Script component, the production origin is allowed, and CSP permits the app origin.

Frequently asked questions

Does MivoChat install automatically on every platform?

For Next.js, use the installation path described above and check the platform’s current settings if labels change.

Can MivoChat confirm bookings or availability?

For next.js site owners, MivoChat can show an external booking link or collect a request, but it does not sync calendars or confirm availability; staff must review the request.

How do I know the installation worked?

On Next.js, test the published site from a private browser window. Check the launcher, send a visitor message, confirm it reaches the chosen team inbox, and reply to verify both directions.

Keep exploring