How does a voice widget work?

Most voice widgets are installed with a script tag. The script draws a launcher button, usually in a corner of the page, and opens a panel for the call when it’s clicked.

Two browser features keep the widget and the page apart. A shadow DOM hides the widget’s internals from the page’s CSS and scripts, so neither breaks the other’s styling. The call itself often runs in an iframe served from the provider’s domain, which needs the page’s permission to use the microphone: the iframe’s allow attribute grants it, and the site’s Permissions-Policy header can still block it.

A well-built embed carries a public identifier for the account, never a secret key, because anyone can read a page’s HTML.

Example: a support widget shows “Talk to us” in the bottom-right corner. Clicking it opens a panel that asks what the visitor needs, and then the browser asks for the microphone.

Sources

What should you check before adding a voice widget?

A widget sits on top of your site, so check how the two fit together:

  • Your pages are served over HTTPS, because browsers only give the microphone to secure pages.
  • Your Permissions-Policy header, if you send one, allows the widget’s origin to use the microphone.
  • Only your own website addresses can start calls, so the embed can’t be reused elsewhere.
  • Visitors are told, before the call, that they’re speaking with AI and whether a transcript is kept.
  • On a phone screen, the button doesn’t cover other controls, such as a chat launcher or cookie banner.
Sources

How does Kawl Now’s voice widget work?

Kawl Now’s widget is one script tag carrying your public workspace ID, pasted just before the closing </body> tag. Add data-channel="sales" for the sales agent, since support is the default. Both can share a page, where their buttons stack.

The button sits in the bottom-right corner inside a closed shadow DOM. It opens a panel 380 pixels wide, or the full width of screens up to 440 pixels, and the call runs in an iframe from app.kawlnow.com with microphone and autoplay allowed.

You can set each channel’s button label, up to 30 characters, and its accent colour. The position, styling and “Powered by Kawl Now” footer are fixed, and there’s no JavaScript widget API or SDK.

Common questions

Where should a voice widget’s script tag go?

Follow your provider’s instructions. Kawl Now’s dashboard says to paste the tag just before the closing </body> tag, and it must load as a classic script rather than a module, because it reads document.currentScript.

Is a voice widget’s embed code safe to put in page HTML?

It should hold nothing secret. Kawl Now’s embed contains only your public workspace ID, which starts hl_, and never a secret key, and browsers can only start calls from the website origins you list.