Developer quickstarts

Add page-aware support without building a support stack.

Use one script or the typed web helper, then send safe page context from the app screens where users get stuck.

Send

page, route, feature, workflow, role, plan, state, entity hints

Do not send

passwords, tokens, payment data, emails, phone numbers, raw customer records

Screenshots

user upload or paste only; no automatic page capture or DOM scraping

Verify

widget loaded, origin allowed, route allowed, context received

Private beta workspaces can use the exact dashboard snippet immediately. The typed helper source is maintained for package release and can be handed to developers during setup.

Next.js App Router

Load the widget once in your app shell and send route context from a small client component.

'use client';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { createCanonicaWebClient } from '@canonica/web';

const canonica = createCanonicaWebClient({ apiKey: 'cn_your_widget_key' });

export function CanonicaRouteContext() {
  const pathname = usePathname();
  useEffect(() => {
    const contextKey = pathname.replace(/^\//, "").replace(/\//g, "_") || "home";
    canonica.init({ context: { contextKey, feature: pathname.split("/")[1] || "app", page: contextKey } });
  }, [pathname]);
  return null;
}

React SPA

Initialize once, then call page() from your router or product screen component.

import { useEffect } from 'react';
import { createCanonicaWebClient } from '@canonica/web';

const canonica = createCanonicaWebClient({ apiKey: 'cn_your_widget_key' });

export function BillingHelpContext() {
  useEffect(() => {
    canonica.init();
    canonica.page({ contextKey: "billing_invoices", feature: "billing", page: "invoices" });
  }, []);
  return null;
}

Vue / Nuxt

Use the same safe page context from mounted route components.

<script setup lang="ts">
import { onMounted } from 'vue';
import { createCanonicaWebClient } from '@canonica/web';

const canonica = createCanonicaWebClient({ apiKey: 'cn_your_widget_key' });

onMounted(async () => {
  await canonica.init();
  canonica.page({ contextKey: "onboarding_import", feature: "onboarding", page: "import" });
});
</script>

Vanilla script

Paste the script and call the runtime directly when route context changes.

<script src="https://canonica.app/widget/canonica-widget.js" data-api-key="cn_your_widget_key" async></script>
<script>
  window.addEventListener("load", function () {
    window.CanonicaWidget?.page({
      contextKey: "billing_invoices",
      feature: "billing",
      page: "invoices"
    });
  });
</script>

Verify the install from Canonica.

The Widget screen checks that the key exists, script loaded, origin is valid, route is allowed, and page context arrived.

View install guide Start free setup