Custom Embed

Add the agent to any website with one script tag.

How it works

The embed system has three parts:

-embed.js (~2KB) — a loader script you paste on your site
-iframe — the loader injects a transparent iframe that renders the widget
-AgentWidget — the chat UI running inside the iframe, connected to your agent via WebSocket

Basic embed

html

<!-- Paste before </body> -->
<script
  src="https://clearly.sh/embed.js"
  data-site-key="ck_live_your_site_key"
  data-theme="auto"
  data-greeting="Hi! How can I help you today?"
></script>

Configuration attributes

Attribute	Values	Default	Description
data-site-key	ck_live_xxx or ck_test_xxx	(required)	Your site key from the dashboard
data-position	bottom-right, bottom-left	bottom-right	Widget position on the page
data-theme	auto, light, dark	auto	Color scheme (auto follows system preference)
data-greeting	Any text (200 chars max)	""	Greeting message shown on first visit

Platform-specific instructions

Shopify (without the app): Go to Online Store → Themes → Edit Code → theme.liquid → paste before .

WordPress: Install "Insert Headers and Footers" plugin → paste in Footer Scripts.

Squarespace: Settings → Advanced → Code Injection → Footer → paste.

Webflow: Project Settings → Custom Code → Footer → paste.

Plain HTML: Paste before in your HTML file.

Security

The API key is safe to expose in client-side code — it's scoped to your store's agent and can only be used to initiate conversations.

The embed iframe runs in a sandboxed context with allow="microphone; autoplay" for voice features.

All data is transmitted over WSS (encrypted WebSocket). No customer PII is stored by default.

Test vs Live keys: Use `ck_test_` keys during development. They connect to a sandbox environment and don't count against your conversation quota.

Shopify Setup Product Catalog