Install

Add the AI-native layer

One snippet before </body>. Your pages become continuable in ChatGPT, Claude, Gemini, and more — then verify the first transition from your dashboard.

Analytics funnel

Measure every continuation in your dashboard

ContinueWith stores event type, provider, prompt label, page URL and timestamp — not conversations. Use the funnel to tune prompts and high-intent pages.

1widget_openedWidget opened

Visitor opens the continuation layer.

2prompt_selectedPrompt selected

Visitor picks a prompt template.

3provider_clickedProvider clicked

Visitor continues in their AI assistant.

See provider mix, top pages and conversion % after your first provider_clicked event. Create a free site to start tracking.

Snippet

Replace PUBLIC_KEY with the key shown in your site install tab

<script src="https://continuewith.ai/widget/v1.js" data-site-key="PUBLIC_KEY"></script>

Inline mode

Embed the widget inside your page

By default the widget is a floating bubble. For inline mode, add a mount point and set data-mode="inline" with data-target. Missing mode falls back to floating for backward compatibility.

<div id="continuewith-widget"></div>
<script src="https://continuewith.ai/widget/v1.js" data-site-key="PUBLIC_KEY" data-mode="inline" data-target="#continuewith-widget" defer></script>

You can also call ContinueWith.init() after the script loads. If the target selector is missing, the widget logs a warning and falls back to floating mode.

ContinueWith.init({
  siteKey: 'PUBLIC_KEY',
  mode: 'inline',
  target: '#continuewith-widget',
  layout: 'horizontal',
  theme: {
    primaryColor: '#111827',
    background: '#ffffff',
  },
});

Theming

Customize colors with CSS variables

Use controlled CSS variables on .continuewith-widget or pass theme colors as data-* attributes on the script tag. The dashboard design tab builds this CSS live.

.continuewith-widget {
  --cw-primary-color: #111827;
  --cw-background: #ffffff;
  --cw-text-color: #111827;
  --cw-border-color: #e5e7eb;
  --cw-border-radius: 12px;
  --cw-padding: 16px;
  --cw-gap: 12px;
}

Agents can pass design tokens through the ContinueWith MCP get_install_snippet tool or npx continuewith snippet --mode inline --primary-color #111.

Agents

Install from coding agents

Use npx continuewith@latest add or copy prompts from the agent guide. Machine-readable rules live at /llms.txt.

npx continuewith@latest add
npx continuewith@latest add --framework nextjs
npx continuewith@latest add --mode inline --target "#continuewith-widget" --primary-color "#111827"

CLI on npm: continuewith · MCP: @continuewith/mcp · SDK: @continuewith/sdk

Starters & CMS

Clone a template or install the WordPress plugin

Prefer a full project over patching? Use starter-next (Next.js) or starter-astro — widget, llms.txt, and AI Ready Index CTAs included. On WordPress, use wordpress-plugin (Settings → ContinueWith). Coding agents: agent-plugins. More in awesome-continuewith.

git clone https://github.com/continuewith-ai/starter-next.git my-app
cd my-app && cp .env.example .env.local && npm install && npm run dev

git clone https://github.com/continuewith-ai/starter-astro.git my-site
cd my-site && cp .env.example .env && npm install && npm run dev

# WordPress
git clone https://github.com/continuewith-ai/wordpress-plugin.git wp-content/plugins/continuewith

Or click Use this template on GitHub, then set NEXT_PUBLIC_CONTINUEWITH_SITE_KEY from your dashboard.

Coming soon page

Launch a teaser site before full content is ready

Use this on a single-page coming soon site. Visitors can still continue the page in their assistant while you finish the launch.

<!-- ContinueWith coming soon: replace PUBLIC_KEY after signup -->
<script src="https://continuewith.ai/widget/v1.js" data-site-key="PUBLIC_KEY" defer></script>

Pair it with a prompt like “Visit {{url}} and explain what this site is building.” See the live pattern on itsdanieladam.com.

Next.js App Router

Add ContinueWith to app/layout.tsx

  1. Open app/layout.tsx in your Next.js project.
  2. Import Script from next/script and add the ContinueWith snippet before </body>.
  3. Use strategy="afterInteractive" so the widget loads after the page is interactive.
  4. Deploy, open a public page, then verify install from the ContinueWith dashboard.
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://continuewith.ai/widget/v1.js"
          data-site-key="PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Ghost

  1. Open Settings, then Code injection.
  2. Paste the snippet in Site Footer.
  3. Save, open a public post, then run the install check from ContinueWith.

Webflow

  1. Open Site settings, then Custom Code.
  2. Paste the snippet before the closing body tag.
  3. Publish the site, open the live domain, then verify installation.

WordPress

  1. Install the official plugin: clone github.com/continuewith-ai/wordpress-plugin into wp-content/plugins/continuewith and activate it.
  2. Open Settings → ContinueWith and paste your public site key from the ContinueWith dashboard.
  3. Save, clear cache if needed, open a public page, then verify install from ContinueWith.

Shopify

  1. Open Online Store, then Themes, then Edit code on your live theme.
  2. Paste the snippet before </body> in theme.liquid.
  3. Save, open a product or page on the live store, then verify install from ContinueWith.

Framer

  1. Open Site settings, then General, then Custom Code.
  2. Paste the snippet in the End of <body> tag section.
  3. Publish the site, open the live domain, then verify installation.

Squarespace

  1. Open Settings, then Advanced, then Code Injection.
  2. Paste the snippet in the Footer field.
  3. Save, open a live page on your custom domain, then verify install from ContinueWith.

Notion sites

  1. Open your published Notion site settings.
  2. Use Settings → Custom code (or your site host wrapper) to inject the snippet before </body>.
  3. If Notion blocks scripts on the native domain, publish through Super, Potion, or a custom domain wrapper, then verify install.

Plain HTML

  1. Paste the snippet before </body>.
  2. Deploy the page.
  3. Open the page and click Continue with to generate the first event.

Providers

Grok-friendly prompts

Some dashboard templates ask the assistant to visit and read {{url}}. They are marked Grok-friendly because Grok usually fetches the page and follows the prompt reliably.

ChatGPT and Claude may still analyze the page, but they often refuse instructions embedded in page content or treat web fetches as untrusted. Prefer built-in variables ({{title}}, {{description}}, {{selection}}) when you need consistent behavior across providers.

After install

Your dashboard fills with continuation intelligence

Once visitors interact with the widget, Analytics shows provider mix, funnel conversion and top pages — the same signals product and docs teams use to tune prompts.

Create a site to track events

QA checklist

Before sending a beta invite

Confirm Config OK, install check, one widget open, one prompt selection, one provider click, and CSV export from the Analytics tab.

Analytics tiers

What you see in the dashboard by plan

Every plan tracks widget_opened, prompt_selected and provider_clicked. Pro unlocks longer retention, full provider mix, and automated insights — Dashboard highlights for top continuation pages, assistant trends, and prompt labels — derived from transition events, never from conversation content.

FeatureFreePro
Continuation funnelBasic (7-day window)Full funnel + 90-day retention
Provider breakdownTop 3 assistantsAll 6 providers + market share
Page attributionIncludedIncluded
Prompt labels in eventsIncludedIncluded + top prompts insights
CSV exportIncludedIncluded
Automated insights—Top pages, assistant trends, prompt highlights
Compare plansStart free — upgrade when ready

Upgrade path

Unlock 90-day analytics and full provider insights

Free includes one site and a 7-day analytics window. Pro removes branding, adds multiple sites and the full continuation funnel.

Compare plansCreate free accountPro yearly (2 months free)

Before you install

Handled upfront

Lightweight script

Async ~22KB gzipped. No cookies. Zero LLM calls on your infrastructure.

Better than copy-paste

URL, title and prompts travel with one click — fewer drop-offs before the assistant opens.

Three analytics events

widget_opened, prompt_selected and provider_clicked show up in your dashboard funnel.

GDPR-friendly

Event metadata only — not conversations. See the security model for details.

Security · Privacy · Pricing

Activate

Signup unlocks your PUBLIC_KEY and install verification

After paste, open the widget and click a provider — three events flow to Analytics.

Try live demoCreate free account