Install Visisto on Next.js

Add Visisto to your Next.js app using the built-in Script component. Supports both App Router (layout.tsx) and Pages Router (_app.tsx).

Your install snippet

Replace YOUR_SITE_ID with your Site Key from the dashboard under Sites → [your site] → Install → Advanced options.

import Script from "next/script";

// In app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):
<Script id="visisto-config" strategy="beforeInteractive">
  {"window.__VISISTO__ = { site: 'YOUR_SITE_ID', api: 'https://api.visisto.com' };"}
</Script>
<Script
  id="visisto-loader"
  src="https://cdn.visisto.com/loader.js"
  strategy="afterInteractive"
  data-site="YOUR_SITE_ID"
  data-api="https://api.visisto.com"
/>

Step-by-step installation

1. 1
   Open your root layout file

   For App Router open app/layout.tsx. For Pages Router open pages/_app.tsx.

2. 2
   Import Script from "next/script"

   Add this import at the top of the file: import Script from "next/script";

3. 3
   Add the config Script tag with strategy beforeInteractive

   Paste the config Script block inside your layout before the body. Replace YOUR_SITE_ID with your actual Site Key.

4. 4
   Add the loader Script tag with strategy afterInteractive

   Place the loader Script tag directly after the config tag.

5. 5
   Run your dev server and verify

   Run npm run dev, open your app in a browser, and confirm the widget appears.

   In development mode the widget connects to http://localhost:4000. Deploy to production to connect to https://api.visisto.com.

Other platform guides