Install MivoChat with your AI coding agent

Installation steps

1. 1

   Prepare

   Copy the generic prompt below, or use the site-specific prompt from the Install page.

2. 2

   Configure

   Paste it into your AI coding agent and review the proposed shared-layout change.

   Add the MivoChat chat widget (AI support chat that answers from your website) to this project. The site key is public and safe to commit: YOUR_SITE_KEY.
   
   Use this exact snippet:
   <script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>
   
   Detect the framework and install it as follows:
   - Next.js App Router: use next/script with <Script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" /> inside <body> of app/layout.tsx.
   - Next.js Pages Router: use the same next/script component in pages/_app.tsx, or in _document.tsx before </body>.
   - React, Vite, or Create React App: put the snippet before </body> in index.html (Create React App: public/index.html).
   - Astro: add it to the shared layout before </body> and use is:inline.
   - Nuxt: add app.head.script in nuxt.config with src, async, and 'data-site'.
   - SvelteKit: add it to src/app.html before </body>.
   - Plain HTML: add it to every page or the shared template before </body>.
   - WordPress: do not paste code; install the MivoChat plugin at https://mivochat.app/guides/wordpress.
   - Webflow, Framer, Wix, Shopify, or Squarespace: this is not a code change. Point the user to https://mivochat.app/guides/<slug> (webflow, framer, wix, shopify, squarespace) and stop.
   
   Load it once. Search the codebase for widget.js and data-site first; do not duplicate it or add per-page copies. If the user asked for public pages only, load it only in the marketing/public layout, not authenticated app routes.
   
   If the app already sets a Content-Security-Policy in headers, middleware/proxy, a meta tag, vercel.json, netlify _headers, or elsewhere, add https://mivochat.app to script-src, connect-src, and frame-src, and add 'unsafe-inline' to style-src (the loader writes inline styles in a shadow root), keeping each directive's existing sources. If a custom launcher image is set, also allow its host in img-src. See https://mivochat.app/guides/content-security-policy. Do not add a CSP if none exists.
   
   Do not change anything else and do not add dependencies. You cannot configure allowed origins: tell the user to add the deployed origin(s), such as https://example.com and preview domains, to “Websites allowed to show the chat” at the Install page in your MivoChat dashboard (https://mivochat.app/app).
   
   Summarize the changed files, then tell the user to deploy and click “Verify install” on the Install page.

   Copy
3. 3

   Publish

   Deploy the project and add production and preview origins to Websites allowed to show the chat.

4. 4

   Verify

   Click Verify install on the MivoChat Install page and test a visitor question.

Review the proposed change

The site key is public and safe to commit. Check that your agent adds one loader to a shared public layout and does not add it to authenticated application routes when chat is intended only for public pages.

If your site already sends a Content-Security-Policy, allow the MivoChat origin in script-src, connect-src, and frame-src, and allow inline styles with style-src 'unsafe-inline'. Add each deployed and preview origin to Websites allowed to show the chat in MivoChat.

Give the agent the right context

Open the project root before pasting the prompt so the agent can inspect the framework, route structure, and shared templates. For a site-specific install, copy the prompt from that website's Install page because it includes the public site key and install-page address. The generic prompt is useful when you are preparing a change before creating a site in MivoChat.

Ask the agent to explain which shared file it chose and why. In Next.js, public marketing routes may share a root layout with authenticated product routes, so confirm the requested scope before accepting a root-level install. A nested route-group layout can keep chat limited to public pages. Review the final diff for unrelated formatting or configuration changes.

Check the loader and security policy

Search the repository for widget.js, data-site, and YOUR_SITE_KEY before accepting a change. Existing plugins or a prior manual install may already load the widget. Keep one loader so visitors see a single launcher and route navigation does not create extra scripts.

A Content-Security-Policy only needs an update when your site already sends one. Preserve existing sources and add the MivoChat origin to script-src, connect-src, and frame-src, and allow inline styles with style-src 'unsafe-inline'. Do not weaken other directives or invent a new policy just for the widget. If the browser console reports a blocked request, compare its directive and URL with the policy before changing anything.

Deploy and verify the live site

An editor preview or local host is not the same origin as your production website. Deploy the change, then add every hostname visitors will use, including preview domains, to Websites allowed to show the chat on the Install page. The key can safely appear in source code; origin permission is controlled separately in MivoChat.

Open the deployed site and test a question answered by the website content, then check a route change if the project uses client-side navigation. Return to the Install page and click Verify install. If verification fails, check that the deployed page contains the loader once, that the exact page origin is allowed, and that the console shows no CSP refusal.

Before you change the setup

Who this is for

a developer using an AI coding agent to change a website repository

What you need

the repository, public site key, and production hostname

Where it goes

the framework's shared public layout or HTML shell

Watch out for

an agent cannot configure MivoChat's allowed-origin settings

Test the support boundary

• Does the agent add exactly one loader in the shared layout?
• Does the deployed widget load on each intended origin?
• Does Verify install succeed after deployment?

Related guidance

Use the HTML, Next.js, React, or any-framework guide for file-specific placement details.

Frequently asked questions