Install

Install ContinueWith

Add one versioned script tag, then verify the public config and first event from your dashboard.

Analytics funnel

Measure every handoff 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 handoff panel.

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"

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. Use a header/footer code plugin or your theme footer template.
  2. Paste the snippet before the closing body tag.
  3. Clear cache if needed, then test the public page.

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 handoff 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.

FeatureFreePro
Handoff 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—Included
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 handoff 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