Widget Install

Add Canonica to the product pages where users ask for help.

The first integration is the page-aware widget. The same setup also gives you hosted help domains such as help.yourapp.com for docs, FAQ, and changelog when your product needs a public support home.

Create the widget key

Canonica shows the raw key once, stores only the hash, and keeps future runtime config in the dashboard.

Paste one script

Add the script to the product shell where customer support should be available.

Restrict where it runs

Allowed origins and blocked routes decide which domains and product pages can show the launcher.

Publish hosted help

Add a support domain such as help.yourapp.com so published articles, FAQs, and changelog entries feel native to your product.

Pass safe page context

Send route, feature, workflow, role, or plan hints. Do not send secrets, tokens, card data, or unrelated personal information.

Verify runtime status

The dashboard records whether the widget reached Canonica and which context marker was received.

Install snippet

The dashboard generates the key and install snippet for the selected Canonica workspace.

<script
  src="https://canonica.app/widget/canonica-widget.js"
  data-api-key="cn_widget_key"
  data-position="bottom-right"
  async>
</script>

Page context snippet

Context helps Canonica prefer the right articles, changelog items, and approved answers for the current screen.

window.CanonicaWidget?.page({
  contextVersion: 1,
  contextKey: 'billing_invoices',
  feature: 'billing',
  page: 'invoices',
  workflow: 'invoice_review'
});

Hosted help domains

The Hosted Help tab maps a domain such as help.yourapp.com to published articles, FAQ, changelog, robots, and sitemap output.

/docs

/articles/{slug}

/faq

/changelog

/sitemap.xml

Developer handoff

Framework setup stays intentionally small.

The dashboard owns keys, allowed origins, blocked routes, hosted help domains, and runtime checks. The client app only needs the script plus safe page context.

Plain HTML

Paste the script before </body> and add optional page context after route changes.

Next.js / React

Load the script once in the app shell, then call page context from route-aware components.

SPA routers

Update CanonicaWidget.page() when route, workflow, plan, or role changes.

Runtime verification

Widget install status

Ready

Widget keyPassed

Valid cn_* key prefix and active hashed credential

Allowed originPassed

Current product origin matched dashboard config

Blocked routePassed

Current route allowed or hidden as configured

Context markerPassed

Last received context key such as billing_invoices

Hosted helpPassed

Domain registry and public route status checked

Owner controls

The product owner controls where support appears.

Canonica is not a generic floating button forced onto every page. Owners configure appearance, launcher behavior, mobile visibility, allowed origins, blocked routes, branded help domains, and verification from the dashboard.

Allowed origins