# Quickstart

> Create a flow and put a working voice button on a web page in five minutes.

Source: https://voxio.in/docs/quickstart · voxioagent 2.0.0 · Index: https://voxio.in/docs/llms.txt

This quickstart walks you through creating your first agent and talking to it from a web page. You'll create a flow in the dashboard, copy its key, and add a voice button to a page.

## Before you begin

You need:

- A Voxio account. [Sign up](https://voxio.in/signup) if you don't have one.
- A web page you can edit, served over HTTPS or from `localhost`.
- A microphone.

## Create a flow

1. In the dashboard, go to [**Flows**](https://voxio.in/dashboard/flows).
2. Click **New flow**.
3. Pick a template, enter a name, and click **Create flow**.

The flow opens on its **Overview**.

## Copy the flow key

On the flow's **Overview**, copy the **API key**. This is the flow key. It lets a page start conversations with this flow and nothing else, so it's safe to put in a web page.

## Add the voice button

Add the button to your page. Pick the setup that matches your project:

HTML (index.html):

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

JavaScript (main.js):

```js
// npm install voxioagent
import { mountVoiceButton } from "voxioagent/widget";

mountVoiceButton({ flowKey: "YOUR_FLOW_KEY", label: "Talk to us" });
```

React (Help.jsx):

```jsx
// npm install voxioagent
import { VoxioVoiceButton } from "voxioagent/react";

export function Help() {
  return <VoxioVoiceButton flowKey="YOUR_FLOW_KEY" label="Talk to us" />;
}
```

Replace `YOUR_FLOW_KEY` with the key you copied.

## Talk to your agent

1. Open the page in your browser.
2. Click **Talk to us** in the bottom-right corner.
3. Allow the microphone when the browser asks, and say hello.

The button changes to **Listening**, and the agent answers with the greeting from its workflow.

> **Tip: No answer?**
>
> Voice needs HTTPS (or `localhost`) and microphone permission. To see why a call didn't start, listen for the `voxio-error` event. See [Errors](https://voxio.in/docs/errors.md). To check the flow itself without any code, open its **Test** tab in the dashboard.

## Next steps

- [Voice button](https://voxio.in/docs/voice-button.md): change the button’s label, colours, position and behaviour.
- [Talking avatar](https://voxio.in/docs/avatar.md): show the agent as a lip-synced face.
- [Headless sessions](https://voxio.in/docs/sessions.md): build your own call interface.