Skip to main content

​
Voice Widget

Add a floating mic button to your website so visitors can talk to an AI concierge — ask questions, get guided, and hear answers grounded in your own content. You create and configure the widget in Erdo, then drop one line of code on your site. Everything runs through Erdo; your site never loads a third-party voice SDK or holds any keys.
The widget is a website embed, separate from outbound phone calls. Same voice technology, different surface: here a visitor starts the conversation from your page.

​
Create a widget

1

Open Settings → Voice widgets

Click New widget and give it a name.
2

Describe the concierge

Set its greeting, what it helps with and its tone, plus any compliance guardrails it must always follow.
3

Set who can embed it (optional)

Add the allowed origins for your site — see Allowed origins below. Leave it empty while testing.
4

Copy the embed snippet

Each widget has a one-line <script> snippet. Copy it from the widget card.

​
Embed it on your site

Paste the snippet once into your site’s HTML, just before the closing </body> tag (or in your CMS / theme’s “custom code” / footer area), on every page where you want the assistant: 
<script
  src="https://app.erdo.ai/voice-widget.js"
  data-erdo-voice-widget="vw_your_widget_key"
  async
></script>
It adds a floating mic button in the bottom-right; nothing else on your page changes. Visitors tap it to start talking.
Pages you build inside Erdo (the “make me a page” flow) that embed a widget work automatically — Erdo’s own page hosts are always allowed, so you don’t need to add them to the allowed origins.

​
Conversation modes — voice, text, and video

One widget, one snippet — the same assistant can talk (voice), chat (text), or appear as a video agent. You choose which modes a widget offers; all three are answered by the same assistant, grounded in the same Knowledge, so the experience is consistent however a visitor reaches out.
ModeWhat the visitor doesNeeds
VoiceTaps and talks; hears a spoken replyMicrophone
TextTypes a message; reads replies (with images/cards)Nothing
VideoSpeaks with an on-screen avatar in real timeMicrophone + camera
When a widget offers more than one mode, visitors see a small Talk / Chat / Video switcher; with a single mode they just get that experience. Permissions are only requested when a visitor actually starts that mode — a voice- or text-only widget never prompts for the camera.
Your existing snippet doesn’t change. Turning on text or video for a widget is a setting on the widget itself — the <script> tag you’ve already embedded picks the new modes up automatically. Widgets default to voice only, so nothing changes until you opt in.

​
Match your brand

Add data-erdo-* attributes to the embed script to theme the widget to your site. The widget runs in a sandboxed frame, so these attributes (not your page’s CSS) are how you style its inside: 
<script
  src="https://app.erdo.ai/voice-widget.js"
  data-erdo-voice-widget="vw_your_widget_key"
  data-erdo-accent="#215834"
  data-erdo-bg="#163b24"
  data-erdo-text="#f7f1e6"
  data-erdo-title="Talk to our team"
  data-erdo-start-label="Start"
  async
></script>
AttributeWhat it does
data-erdo-accentPrimary colour (hex) for the button, header and controls.
data-erdo-accent-darkOptional darker shade (auto-derived from the accent if omitted).
data-erdo-bgPanel background (hex). Set a dark value to run the widget dark.
data-erdo-textMain text colour (hex).
data-erdo-mutedSecondary / status text colour (hex).
data-erdo-borderCard and control border colour (hex).
data-erdo-titleHeader text.
data-erdo-start-label / data-erdo-end-labelCall button labels.
data-erdo-introShort greeting line shown before the call starts.
Together, data-erdo-bg / text / muted / border (plus accent) let you run the widget in a fully dark or branded palette. Colours must be hex; anything else is ignored and the default is kept. To target the widget’s container (position, size, z-index) from your own CSS, it has a stable id/class: #erdo-voice-widget / .erdo-voice-widget.
Style only the container box (position, size, z-index, shadow) with your CSS. Never apply a colour filter — hue-rotate, invert, sepia, grayscale — to the widget element to recolour it. A filter on the iframe re-tints its entire rendered surface, including the photos the assistant shows during a call, so a blue sky turns orange and green turns purple. Use the data-erdo-* colour attributes above instead — they restyle the chrome without ever touching the images.

​
Open it from your own button, script, or agent

By default the widget shows a floating launcher. You can also drive it yourself — useful for a custom “Talk to us” button, a help menu, or an in-page assistant. Declaratively — add a data-erdo-voice-* attribute to any element; clicking it controls the widget (no JavaScript needed): 
<button data-erdo-voice-open>Talk to us</button>
<button data-erdo-voice-expand>Open fullscreen</button>
Programmatically — call the global API from any script: 
window.ErdoVoiceWidget.open();      // open the panel
window.ErdoVoiceWidget.close();     // close it
window.ErdoVoiceWidget.toggle();    // open if closed, close if open
window.ErdoVoiceWidget.expand();    // open fullscreen (roomier, larger photos)
window.ErdoVoiceWidget.collapse();  // back from fullscreen to the panel
Calls made before the widget finishes loading are queued and run once it’s ready. Visitors can also expand to fullscreen with the ⤢ button in the widget header, and tap any photo to view it full-size.

​
Allowed origins

Allowed origins restrict which websites may embed this widget, so someone can’t copy your snippet onto their own site and run up your usage. Leave the list empty to allow any site (handy while testing); add origins to lock it down. The rules — the widget shows an error and won’t start on a site that doesn’t match:
  • Scheme + domain only. Enter the full origin including https://, with no path: https://acme.com, not acme.com and not https://acme.com/contact.
  • No wildcards. *.acme.com is not supported.
  • Matching is exact, and subdomains count as different sites. https://acme.com does not cover https://www.acme.com or https://shop.acme.com — add each one you actually use, on its own line.
  • Matching ignores case and a trailing /.
The most common mistake: adding https://acme.com but serving your site from https://www.acme.com (or vice-versa). They’re different origins — list every hostname your visitors actually load.
Example — a site served from both the apex and www: 
https://acme.com
https://www.acme.com

​
Usage limits

Each widget has a daily session cap (how many conversations it will start per day) to keep usage predictable. When the cap is reached, the widget tells visitors it’s unavailable until the next day. Raise or lower it in the widget’s settings.

​
Troubleshooting

You seeWhat to do
”This site is not allowed to embed this voice widget”The page’s origin isn’t in Allowed origins. Add the exact origin (with https://, and the right subdomain — see above), or empty the list to allow any site.
The mic button doesn’t appearConfirm the <script> snippet is on the page and the data-erdo-voice-widget key matches your widget.
”Reached its daily limit”The daily session cap is used up for today; raise it in the widget’s settings if needed.
Nothing happens for any widgetVoice may not be enabled for your organization — contact your Erdo admin.