How does embed code work?

A script tag embed, such as <script src="https://widgets.example.com/loader.js" async></script>, loads JavaScript from the provider and runs it in your page with the same access as your own code, so it can add buttons, read the page and make requests. With the async attribute, the browser fetches the script in parallel with the page and runs it as soon as it’s ready.

An iframe embed shows a page from another site inside a frame. When the two pages have different origins, neither can read the other, which makes an iframe a natural boundary for features such as payments or a microphone. Its allow attribute sets a Permissions Policy for the frame, such as allowing the microphone.

Many widgets combine the two: a small script adds a button, then opens the real interface in an iframe. Data attributes on the script tag, such as data-id, pass settings without any extra code.

Because a script embed runs with full access to your page, add only embeds from providers you trust, and check whether your Content Security Policy needs to allow the provider’s domain.

Sources

Why does embed code matter for a website voice agent?

Embed code is how a voice agent reaches your visitors without an app or a rebuild. One snippet in your site template can put the agent on every page, and removing it takes the agent away again.

It also decides what’s exposed. Anything in the snippet is visible in your page source, so it should carry a public identifier and never a secret key, and the provider’s server should decide which websites can use that identifier.

How Kawl Now’s embed code works

Kawl Now’s embed is one script tag, pasted just before the closing </body> tag. It loads widget.js from https://app.kawlnow.com, and its data-helpline attribute holds your public workspace ID. Add data-channel="sales" to load the sales agent instead of support.

The script adds a button inside a closed shadow DOM and opens the call in an iframe from the app, with the microphone and autoplay allowed. The voice widget entry explains how the button and call panel behave for visitors.

Keep it a classic script. It finds its own tag with document.currentScript, which is null in module scripts, so a tag with type="module" does nothing. Both agents can share a page, and a duplicate tag for the same agent is ignored.

If your site sets a Content Security Policy, allow the app’s origin in script-src, connect-src and frame-src. The widget adds its styles in an inline style element, so style-src must allow inline styles, and a policy that requires Trusted Types stops the widget appearing. If you send a Permissions-Policy header, allow the microphone for the app’s origin too.

Copy your snippet from the dashboard or get it with the get_installation MCP tool, because the REST API doesn’t return it.

The support agent’s embed code
<script
  src="https://app.kawlnow.com/widget.js"
  data-helpline="YOUR_WORKSPACE_ID"
  async>
</script>

Common questions

How do you add the embed code to your website?

Paste it where the provider says, usually just before the closing </body> tag or inside the <head>. Site builders usually offer a custom code setting for this, and a shared template puts the snippet on every page at once.

Is it secure to add embed code to a website?

Only from providers you trust. A script tag runs with the same access as your own code, so it could read or change the page. Prefer embeds that keep secrets on the provider’s server, and use a Content Security Policy to limit where scripts can load from.