Sign inStart free

Guide

How to add a voice agent to your website

Make an agent in Crackle’s studio, switch on its call button, and paste the one line of HTML it gives you before </body>. Visitors press the button, allow the microphone and talk to your agent. You need no server of your own, and you choose which websites may use the button.

Start free Docs: Embed on your website

What you need.

  • A Crackle account; it is free to start.
  • A place on your site for a script tag: the page’s HTML, a theme footer, or a custom-code block in your site builder.

Step by step.

  1. Make the agentIn the studio, write what the agent should do, pick a voice and press Test agent to talk to it until it sounds right.
  2. Switch on the call buttonOpen the agent, go to Integrate and turn on Call button. Add your site to the allowed websites, so nobody else can put your agent on theirs.
  3. Paste the lineCopy the line the studio shows, with your agent’s publishable key in it, and paste it before </body> on every page that should have the button. The key can only start calls with that one agent.

    Before </body>

    <script src="https://www.cracklehq.com/embed.js" data-agent="pk_your_publishable_key" async></script>
  4. Or use your own buttonLeave the floating button off and drive the call from a button of your own, with live captions if you want them.

    Your own button

    <button id="talk">Talk to us</button>
<p id="status"></p>

<script src="https://www.cracklehq.com/embed.js"></script>
<script>
  Crackle.init({ agent: 'pk_your_publishable_key', button: false });

  const talk = document.getElementById('talk');
  talk.onclick = () => (Crackle.state === 'idle' ? Crackle.start() : Crackle.end());

  Crackle.on('state', (state) => {
    // idle, connecting, listening, thinking or speaking
    document.getElementById('status').textContent = state === 'idle' ? '' : state;
    talk.textContent = state === 'idle' ? 'Talk to us' : 'End call';
  });
  Crackle.on('transcript', ({ role, text, final }) => console.log(role, text, final));
  Crackle.on('error', ({ code, message }) => alert(message));
</script>

All of it, in the docs.

The worked example has every file, and the guide explains each part.

Embed on your website

How it works, with the request and its fields.

Open the docs

A talk button for your website

A worked example with all of its code.

Open the docs

Questions.

Does it work on WordPress, Webflow or Shopify?

Yes: anywhere you can add a script tag, such as a theme’s footer or a custom-code block. The button is plain HTML and JavaScript.

Can a public button run up my bill?

Each agent’s button has a daily spending limit and a cap on calls per visitor, and a call is cut at the time limit you set.

Does it work on phones?

Yes, in mobile browsers. The browser asks the visitor for the microphone the first time they press the button.

Other guides.

How to build a voice agent in Next.js

A route handler that starts a Crackle call with your API key, and a client component that joins it with livekit-client. Two files; the key never reaches the browser.

Read the guide

How to add a voice agent to a React Native app

Your server starts a Crackle call with one request; your Expo or React Native app joins it with LiveKit’s React Native SDK, with mute and hang up.

Read the guide

How to build a Hindi voice bot

Create a Crackle agent in Hindi or Hinglish, pick a voice recorded in Hindi, write its instructions the way it should speak, and let it follow callers into English and back.

Read the guide

Give your agent a voice today.

Build one in the studio and talk to it in your browser. Sign-up credit is there for your first test calls.

Start free Read the quickstart