Website Widget

Last Updated: 2026-05-24

The Mylla website widget lets visitors talk to your AI agent directly from your website — no phone call required. A floating button appears on your site; when a visitor clicks it, a voice conversation starts in their browser.

Who should use this

Businesses with a website where visitors might want to ask a quick question
Request and customer capture on landing pages (alternative to contact forms)
Replacing or augmenting a traditional live-chat widget

Enabling the widget

Open the agent you want to embed
Scroll to the Website Widget card
Add the websites where the widget is allowed to run
Adjust the widget style if you want a different label, color, placement, greeting, or panel size
Toggle Enable widget on
Copy the <script> snippet shown

Allowed websites are saved as exact origins, such as https://yourbusiness.com and https://www.yourbusiness.com. Add http://localhost:3000 only when you are testing locally.

Embedding on your site

Paste the snippet anywhere before </body> on your site:

<script
  data-agent-id="YOUR_AGENT_ID"
  src="https://app.mylla.ai/widget/embed.js"
  async>
</script>

The snippet is already filled in with your agent ID — you just copy and paste.

Customizing the widget

The Website Widget card lets you set:

Primary and accent colors
Launcher label
Greeting override
Bottom-left or bottom-right placement
Compact, standard, or large panel size

The script tag does not change when you update these settings. Save the widget style in Mylla, then refresh your website to see the latest version.

Per-platform instructions

Platform	Where to paste
Webflow	Project Settings → Custom Code → Footer Code
Wix	Settings → Custom Code → Add Custom Code (place in Body — end)
Squarespace	Settings → Advanced → Code Injection → Footer
WordPress	Appearance → Theme File Editor → `footer.php`, before `</body>` (or use a header/footer plugin)
Shopify	Online Store → Themes → Edit Code → `theme.liquid`, before `</body>`
Framer	Site Settings → General → Custom Code → End of `<body>` tag
Custom / Next.js	Add the `<script async src="...">` tag inside `<body>` in your layout

How it works

A visitor clicks the floating Mylla button
Their browser requests microphone permission
A voice conversation with your AI agent begins — same agent that answers phone calls
The conversation is logged in Calls with source Widget, and customer/request details are captured just like a phone call

Requirements

Site must be served over HTTPS (microphone access requires a secure context)
The website origin must be listed in the agent's Allowed websites
Visitor must approve microphone permission in their browser
Modern browser (Chrome, Safari, Edge, Firefox — last 2 versions)

Content Security Policy (CSP)

If your site has a strict CSP, allow these sources:

script-src  https://app.mylla.ai
connect-src https://app.mylla.ai wss://*.livekit.cloud
media-src   blob:

Testing the widget

Open your site in an incognito window (so you're not logged into Mylla)
Click the floating Mylla button
Grant microphone permission
Say "hello" — the agent should respond with your configured greeting
Check Calls in the dashboard — your test should appear immediately

Before launch, test the widget on the same device and browser your customers are most likely to use.

Disabling the widget

Open the agent
Toggle Enable widget off on the Website Widget card

The script tag can stay on your site — once disabled, it becomes a no-op. Remove the tag when you're sure you won't re-enable it.

To pause the widget on one website but keep it active elsewhere, remove that website from Allowed websites and save.

Billing

Widget conversations count toward your monthly minutes the same way phone calls do. See Billing.

Permissions

Action	Super Admin	Admin	Member
Enable / disable widget	✅	✅	❌
Copy embed snippet	Yes	Yes	No
Configure allowed websites	Yes	Yes	No
Customize widget style	Yes	Yes	No