Embed the widget

Guide: Embed the widget

Put a voice/chat agent on your website with a single script tag. The loader injects a floating button that opens the agent in an iframe pointing at Telenow's hosted widget page — so none of our code ends up in your bundle, and updates ship automatically.

1. Enable publishing

In the dashboard, go to Agents → open your agent → Publish tab, then:

• Turn on the Public link (this assigns the agent a stable slug).
• Under Modes & lead capture, enable Voice call, Text chat, or both.
• Optionally set the appearance (widget title, button label, greeting, accent color), lead-capture fields, an access code, and allowed origins.
• Click Save.

The agent must also be active for the link to work. See Publishing & embedding for what every setting does.

2. Drop in the script

Copy the snippet from the Publish panel (it uses your backend's URL), or use:

<script
  async
  src="https://telenow.ai/widget.js"
  data-slug="YOUR_AGENT_SLUG">
</script>

Place it before </body> on any page. A floating button appears; clicking it opens the agent in an iframe with microphone access. That's the whole integration — branding, modes and lead capture all come from your Publish settings.

3. Lock it to your domains

Set Allowed origins in the Publish panel to your site's origins (e.g. https://acme.com, https://app.acme.com). Session creation is rejected from other origins, so the widget can't be used to spend your agent's minutes from a random site. A blank list allows any origin.

Pre-fill context variables

If the agent uses context variables, the widget asks the visitor for the required ones before connecting. Pre-fill values your page already knows so the visitor isn't asked twice:

<script async src="https://telenow.ai/widget.js"
  data-slug="YOUR_AGENT_SLUG"
  data-vars='{"customer_name":"Alex","plan":"Pro"}'></script>

• Use the JSON data-vars form — it preserves capitalization and is the one the Publish panel generates.
• The data-var-<name>="value" shorthand also works, but HTML lowercases attribute names, so only use it for all-lowercase variable names.

The loader forwards these to the hosted widget as var_<name> query params; nothing sensitive should go here since they're visible in the page source.

Hosted page (no embed)

If you'd rather link out than embed, share the public page directly:

https://telenow.ai/p/YOUR_AGENT_SLUG

It renders the same call/chat experience full-page — handy for email, QR codes, or a "Talk to us" link.

Lead capture

When lead capture is on, the widget asks for the fields you configured (Text / Email / Phone / Number, each optionally required) before connecting. Captured values are attached to the resulting call and surface under Lead details on the call record — and in the call.ended webhook if you're ingesting events.

Access code

For gated experiences, set an access code in the Publish panel. Visitors must enter it before a session starts. (For programmatic control instead, see Programmatic web calls.)

Want a custom chat UI instead?

The embed is the fastest path, but if you want chat in your own design (or inside your own app), skip the widget and call the Chat API from your server — same agent brain, knowledge and tools. The Build a chat bot guide walks through it.

Notes

• The widget runs over the same browser web-call pipeline documented in the Web-call API, including barge-in.
• Anonymous sessions are rate-limited per agent + IP (10 starts / 60 s) and capped per organization to protect your usage.

Troubleshooting