Public beta preview — you're seeing the sneak peek

Next.js — install the widget

read as .md

In a Next.js App Router project the tag becomes a next/script element in the root layout. The tag is the same on every platform — Install the widget has the general picture; this page has the exact place on Next.js.

The tag

<!-- guuey widget. Add this site to the app's allowed domains or the embed is refused. -->
<script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>

Where it goes

Open app/layout.tsx (the root layout — it wraps every page).
Import Script from next/script and render it inside <body>, after {children}: <Script src="https://widget.guuey.com/v1.js" data-app="app_abc123" strategy="afterInteractive" /> — with your app id in place of app_abc123.
Keep strategy="afterInteractive" (Next.js's default: injected client-side after hydration) or use lazyOnload if the launcher may wait for idle time — the Next.js docs name chat widgets as a lazyOnload example.

next/script forwards data-app to the rendered <script> element (unknown props are set as attributes), which is how the loader finds your app id.
The tag runs once per document load; client-side navigation does not re-run it, and the launcher follows route changes. To hide it on in-app routes, see the hiding pattern on Embed & share.
A beforeInteractive strategy is not needed — that is for scripts the page cannot render without.

Verified against the vendor's documentation on 2026-09-09: next/script API reference (Next.js docs, v16.3.4, updated 2026-08-25) · next/script source — unknown props become attributes (set-attributes-from-props.ts). Vendor interfaces change — if a step no longer matches what you see, the vendor's page above is the source of truth.

Before it shows

Allow your site’s origin (console → Embed → Allowed origins, or guuey apps update <appId> --domains <origin>; about 15 seconds to apply), add the CSP allowances if your site sets a policy, then verify with guuey apps check <appId> --origin <origin> — the steps are on Install the widget.

Give this to your coding agent

Install the Guuey chat widget on this Next.js (App Router) site. Before changing anything,
read https://docs.guuey.com/embed/nextjs.md and https://docs.guuey.com/install-widget.md
(the raw markdown of the two pages) and follow them exactly; do not invent options
or steps they do not contain.

1. Put this tag in app/layout.tsx (the root layout), as a next/script <Script> element inside <body> after {children}, keeping the data-app attribute on the element, with my app id <appId> in place of app_abc123:
   <script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>
   Add nothing else to the tag — except your page's CSP nonce, if the site uses
   nonces (step 3).
2. Tell me the exact origin(s) my pages are served from (scheme + host) so I can
   add them to the app's allowed domains in the console (Embed → Allowed origins)
   or with: guuey apps update <appId> --domains <origin>. Remind me that a bare
   hostname covers the apex and every subdomain, while a scheme-prefixed origin is
   an exact match, and that changes take about 15 seconds to apply.
3. If this site sets a Content-Security-Policy, add exactly these allowances and
   nothing more. If the policy uses nonces (script-src 'nonce-...'): render the
   site's per-request nonce on the widget tag the way its other script tags carry
   it — that is what lets the loader run, and the loader puts the same nonce on the
   one <style> it injects; then allow https://widget.guuey.com in frame-src and
   connect-src. If the policy uses host allowlists: add https://widget.guuey.com to
   script-src, frame-src and connect-src, and 'unsafe-inline' to style-src.
4. When I've saved the origin, verify with:
   guuey apps check <appId> --origin <origin>
Stop and ask me before any step those two pages do not describe.