Website & Public Page
Publish your agent on its own page and on your website with one line of code
A live agent can be reached from a browser in three ways: its public page, the widget on your website, and your own interface built with the SDK. All three use the same public id, start calls the same way, and spend the same call minutes.
Publish
On Publish, switch the agent live. An agent needs instructions before it can go live. Switching it back to draft takes it off its public page, widget and SDK at once. Its WhatsApp number keeps working (see WhatsApp).
You can also keep the agent live on WhatsApp but closed to the web: turn off Enable link and widget.
The public page
Every published agent has a page:
https://voice213.com/agent/k3x9m2p7q4wzAnyone with the link can open it and talk to your agent, with nothing to install. Share it in your Instagram bio, an ad, a QR code on your shop counter, or a WhatsApp status. A shared link previews with your brand: the page's title and description, and your logo (or the agent's picture).
Design your page
On Agents → Page design, you make the page yours and watch it change live, on a desktop or a phone, before or during a call:
| Setting | Choices |
|---|---|
| What the page offers | Voice & chat (a call and a text chat side by side), Voice only (the call alone, with no conversation panel), or Chat only |
| Logo | PNG, JPEG, WebP or SVG, up to 5 MB. Empty margins are trimmed. A dark logo gets a light plate on a dark page, and a white logo a dark plate on a light one. Without a logo, the page shows the agent's picture and your brand name. |
| Colours | A main colour (buttons, headings, and the widget's button) and an optional second colour for the waves and gradients. Any colour works: text drawn in it is darkened or lightened until it reads. |
| Appearance | Light, dark, or the visitor's device setting |
| Background | Silk, Aurora, Grid or Calm, all in your colours |
| Words | The headline (your brand name in it is coloured automatically), the description, the chat's welcome message, up to 3 highlights with icons, and up to 4 quick questions visitors send with one tap. Write it for me with AI drafts them all from the agent's instructions, in its language. Empty fields use the page's own text. |
| Header | Up to 3 links (your site, Instagram, a map, a phone number or an e-mail) and the "Secure, encrypted call" badge |
| Language | The page's buttons and default texts: the agent's language, or Arabic, French or English. Visitors can switch it at the bottom of the page. |
The logo is stored as soon as you upload it; everything else goes live when you Save.
Chat on the page
When the page offers a chat, visitors type to the agent and it answers from the same instructions, knowledge base and tools as on a call. Each reply counts as one message of your agent plan. The chat starts with your welcome message (or the agent's fixed greeting), shows your quick questions until the visitor writes, and is kept in Conversations on the web_chat channel. A chat nobody writes in for 30 minutes is closed and reviewed.
A visit is one memory: when a visitor types and then calls, the agent knows what was written before the call and welcomes them back instead of starting over, and a chat after a call knows what was said on it. The visit is kept in the visitor's browser for a day, so a reload brings the conversation back.
Each visitor's IP address can send 80 chat messages an hour, and one chat stops after 60 of the visitor's messages. On a Voice only page the chat is closed.
The widget
One line adds your agent to any website, including Shopify, WooCommerce, YouCan, Wix, Webflow and WordPress. Paste it before </body>:
<script src="https://voice213.com/widget/agent.js" data-agent="k3x9m2p7q4wz" async></script>Publish shows step-by-step instructions for each platform, and Copy instructions for my developer puts them on your clipboard.
Design it on Publish
On Publish → Your website widget, choose what the widget offers and how it looks, and watch the real widget change on a sample site, on a desktop or a phone:
| Setting | Choices |
|---|---|
| What it offers | Voice only (a call), Voice & chat (a call and a text chat, in two tabs), or Chat only |
| Button | Picture and text, or the picture alone; its text; left or right; its distance from the side and the bottom |
| Greeting bubble | A short message over the button after a few seconds (shown once per visit) |
| Behaviour | Open the panel by itself (on computers only, never over a phone's screen), show it on phones or not, light, dark or the visitor's setting |
| Brand colour | The button and the panel. It's also the main colour of your page in Page design. |
The widget reads these settings each time it loads, so you never touch the code again: save, and every site shows the change within a minute. On phones the panel takes the whole screen. Chats in the widget work like the page's chat: each reply is one message of your plan, and a visitor's chats and calls share one memory.
Publish → Where the widget runs lists the sites your widget has loaded on (the last five, with when it was last seen), so you can check that an install worked.
Your own buttons
Any button or link on your site can open the agent, with no extra code:
<button data-voice213-action="call">Call us</button>
<button data-voice213-action="chat">Chat with us</button>
<a href="#voice213">Talk to us</a>From your own scripts: window.Voice213Widget.open(), .call(), .chat("Hello"), .close() and .toggle().
Settings for one site
Attributes on the script tag win over the settings on Publish, for that site only:
| Attribute | Values |
|---|---|
data-agent | The agent's public id (required) |
data-mode | voice, chat or both |
data-launcher | pill (picture and text) or round (picture only) |
data-position | right or left |
data-label | The button's text |
data-teaser | The greeting bubble's text, or off |
data-teaser-delay | Seconds before the bubble shows (0 to 60) |
data-open | true opens the panel when the page loads |
data-theme | light, dark or auto |
data-lang | ar, fr or en (by default, your page's language) |
data-accent | The colour, as #RRGGBB |
data-offset-x, data-offset-y | The button's distance from the side and the bottom, in pixels |
data-mobile | false hides it on phones |
The panel lives in its own shadow root, so your site's styles never break it and its styles never touch your site. To build your own interface instead, use the Web SDK or its <voice213-agent> element.
Allowed websites
By default, any website can embed your agent, and every call it starts uses your minutes. Under Publish → Allowed websites, list your own sites:
https://myshop.dz
https://www.myshop.dzOnly those sites can then start calls to your agent (the Voice213 public page always can). Enter each address as https:// plus the domain, with the port if there is one and no path. You can add up to 20.
Allowed websites are checked through the browser's Origin header. They stop other websites from embedding your agent, but a script running outside a browser can still call a public agent, just like a visitor on your public page. Each visitor's IP address can start 20 calls an hour, and each account at most 5 calls at once. See Plans & Limits.
What visitors need
- A current browser: Chrome, Edge, Firefox or Safari, on a computer or a phone.
- A page served over HTTPS, which browsers require for the microphone.
localhostworks too while you develop. - To allow the microphone when the browser asks. The call starts from the visitor's click, as browsers require.
In Chrome and Edge, the agent's voice is played in a way the browser's echo cancellation can hear. On laptop speakers the agent doesn't hear itself and cut itself off. On other browsers, quiet sound reaching the microphone while the agent speaks is sent as silence, and a caller who speaks up still interrupts.
Was this page helpful?