Skip to main content
The Karta chat widget is a prebuilt launcher + chat panel you embed with a single async <script> tag. It renders into a Shadow DOM (so host-page CSS can’t bleed in and the widget’s CSS can’t leak out), streams replies from your deployed Karta project, and needs no backend of your own to get started. This page gets a widget live in under five minutes. For driving it from your page, see the command API; for who the end user is, see identity.

​
What you need

  • A deployed Karta project (see the Quickstart).
  • A publishable embed key (pk_live_…) from the project’s Embed tab.
The embed key is publishable - it is meant to ship in your page’s HTML. It is not a secret like a kt_live_… API key. Its blast radius is fenced by the allowed-origins allowlist you set in the dashboard, not by hiding the key. See Security & privacy.

​
Get an embed key

1

Open the project's Embed tab

In the dashboard, open your project and go to the Embed tab.
2

Create an embed key

Create a key. The full pk_live_… value is shown once - copy it now (afterward only the prefix is shown; rotate to recover). The tab also gives you a ready-to-paste <script> snippet with the key and project filled in.
3

Add your site's origin to the allowlist

Add every origin the widget will run on (scheme + host + port, e.g. https://example.com) to Allowed origins. A browser request from an origin not on the list is refused at token mint. There are no wildcards - list each origin explicitly.

​
Add the script tag

Paste this once, near the end of your <body>. Replace the key and project with your own (or use the snippet the dashboard generated). 
<script
  async
  src="https://cdn.karta.sh/widget/v1/karta.js"
  data-embed-key="pk_live_xxx"
  data-project="coffeeco/support-bot"
></script>
That’s the whole drop-in. The tag is async, so it never blocks your page; the loader reads its own data-* attributes, lazily fetches the UI on demand, and mounts a launcher in the corner.

​
Expected result

A chat launcher appears in the bottom-right corner. Clicking it opens the panel and starts a session against your project; messages stream back token by token. The look and copy (accent color, agent name, greeting, suggested prompts) are pulled from the project’s Embed-tab config at runtime - so you can restyle the widget without touching this tag. See Theming & config.

​
Customize inline

You can override any theme field on the tag with data-theme-*: 
<script
  async
  src="https://cdn.karta.sh/widget/v1/karta.js"
  data-embed-key="pk_live_xxx"
  data-project="coffeeco/support-bot"
  data-theme-agent-name="Beans"
  data-theme-accent="#d4ff4f"
  data-theme-greeting="Hi! Ask me anything about your order."
  data-theme-suggested-prompts="Track my order | Brewing tips | Talk to a human"
></script>
See the full attribute list in Theming & config.

​
Where to go next

Command API & events

Open the widget from your own button, identify the user, and react to events with karta(...).

Identity

Anonymous, soft, and verified (HMAC) identity - and which one to use.

Theming & config

The Embed-tab fields, runtime config, and the consent option.

Security & privacy

CSP directives, the origin allowlist, and the data path.