Add to your site

Voice button

Add a floating or inline button that starts a voice call with your agent.

The voice button is a web component, <voxio-voice-button>. It opens the microphone, connects to your flow and shows the state of the call.

Add the button

Mount the button with your flow key:

1<script src="https://cdn.jsdelivr.net/npm/voxioagent@2.0.0/dist/voxio.js"
2        data-flow-key="YOUR_FLOW_KEY" data-label="Talk to us" defer></script>

Replace YOUR_FLOW_KEY with your flow key, from the flow's Overview in the dashboard.

Options

The button takes every session option (such as flowKey, environment and customs), every look and placement option, and these:

labelstring | false: The text next to the icon. false shows the icon alone.
tooltipstring: Shown on hover.
shape"circle" | "rounded" | "square" | "pill": The button’s shape.
sizenumber | string: The button’s size. Numbers are pixels.
mobileSizenumber | string: The size on screens narrower than 640px.
hideLabelOnMobileboolean: Shows the icon alone on narrow screens.
motion{ pulse?, glow? }: An idle pulse and a glow while the agent speaks. Both switch off under prefers-reduced-motion.
showMuteboolean: Shows a mute button beside it during a call.
looksLooks: What the button shows in each state. See Change the look per state.

Change the look per state

The button has a look for each state: idle, connecting, listening, speaking, muted, error and ended. A look is an image or GIF URL, an inline SVG, a built-in animation or your own renderer.

Set a look for the states you want to change:

1mountVoiceButton({
2  flowKey: "YOUR_FLOW_KEY",
3  looks: {
4    idle: "https://example.com/idle.png",
5    connecting: { builtIn: "orb" },
6    speaking: { builtIn: "wave" },     // built in: "orb", "wave", "mic"
7    error: { svg: "<svg …>…</svg>" },
8  },
9});

States you leave out keep the default look.

Control the button

The element returned by mountVoiceButton has these methods:

Method	What it does
`start()`	Opens the microphone and connects. If you set consent, it asks first.
`stop()`	Ends the call.
`toggle()`	Starts or stops the call.
`mute(muted?)`	Mutes or unmutes the microphone.
`open()` and `close()`	Shows or hides the widget. Closing doesn’t end a call.
`attach(element)`	Makes another element start and stop the call when clicked. Returns a function that detaches it.
`destroy()`	Ends the call, releases the microphone and removes the widget.

Use your own launcher

To start calls from a button that's already on your page, hide the widget and attach it:

1const button = mountVoiceButton({ flowKey: "YOUR_FLOW_KEY", hidden: true });
2button.attach(document.querySelector("#help-cta"));

Clicking #help-cta now starts and ends the call.

Next steps

Customising widgets: match the button to your brand.
Web actions: let the agent fill in forms on your page while it talks.

Voice button

#Add the button

#Options

#Change the look per state

#Control the button

#Use your own launcher