Published on

How to Add an AI Voice Agent to Your Website with Lovable

Want to add an AI voice agent to your Lovable website—without fiddling with HTML? This guide shows you how to add an AI voice agent to your website with Lovable using Babelbeez’s prompt‑first flow. You’ll copy one tailored prompt from the Babelbeez dashboard and paste it into Lovable’s AI Assistant. The assistant will insert the exact embed HTML site‑wide, before the closing </body> tag, with the correct order and attributes—automatically.

Lovable logo

How to Add an AI Voice Agent to Your Website with Lovable ​

Prerequisites ​

  • A Babelbeez account with a voice agent configured.
  • Your website served over HTTPS (browsers require HTTPS for microphone access).
  • At least one Allowed Domain set in the Babelbeez dashboard so your site can load the agent.

Tip: Need a refresher on the Go Live flow? See our help docs: Go Live Guide.

Step 1: Prepare your Voice Agent in Babelbeez ​

  1. Sign in and create or select your agent.
  2. In Allowed Domains, add your production domain (e.g., example.com).
  3. Save changes.

Why this matters: Allowed Domains prevents the widget from loading on unauthorized sites.

Step 2: Get the Lovable Prompt from the Dashboard ​

  1. Open the Go Live flow in the Babelbeez dashboard.
  2. In Step 2 (“Choose Platform”), select “Lovable.”
  3. In Step 3, you’ll see a “Prompt for Lovable” text area and a Copy button. Click Copy.

What’s inside the prompt?

  • The prompt already includes the exact HTML embed your site needs and clear instructions for Lovable’s AI Assistant: add it site‑wide, before </body>, and keep the script order and attributes unchanged. You don’t need to copy any separate code.

Step 3: Use the Lovable AI Assistant to Apply the Changes ​

  1. In your Lovable project, open the AI Assistant.
  2. Paste the “Prompt for Lovable” you copied from Babelbeez.
  3. Let the assistant propose changes—it will inject the embed HTML site‑wide, at the end of the body.
  4. Review the diff and accept the changes.
  5. Publish your site.

Notes:

  • Do not wrap the embed in a component; keep it as global site code so the agent loads on all pages.
  • Ensure the HTML appears before the closing </body> tag across the entire site.

Step 4: Verify on Your Live Site ​

  1. Open your published site in a fresh/incognito window.
  2. You should see the Babelbeez voice agent widget.
  3. Click to start a conversation and grant mic permissions when prompted.
  4. Ask a few questions covered by your site content to confirm knowledge is loading.

If you don’t see the widget, check Troubleshooting below.

Troubleshooting ​

  • Microphone prompt doesn’t appear: Ensure your site is on HTTPS and you granted mic permission in the browser.
  • Widget not showing on certain pages: The embed must be site‑wide (footer/body‑end). Re‑run the Lovable assistant with the original prompt and accept changes.
  • Domain not allowed: Add your production domain under Allowed Domains in the Babelbeez dashboard.
  • CDN/cache delay: Purge your cache or wait a few minutes after publishing.
  • Ad/script blockers: Test with browser extensions disabled or in a clean profile.

FAQs ​

Where is the actual code snippet? ​

The dashboard’s Lovable prompt includes the exact HTML. You won’t see a separate code block for Lovable—this is by design to avoid duplication and ensure accuracy.

Can I insert the HTML manually instead of using the Lovable assistant? ​

You can, but we recommend the prompt‑first workflow. It ensures the snippet is applied site‑wide, before </body>, with correct ordering and attributes.

How do I change or update my agent later? ​

Update your agent in the Babelbeez dashboard (e.g., knowledge, voice, settings). Republish your Lovable site if you re‑run the assistant. Changes that don’t alter the snippet typically propagate without further edits.

Do I get analytics? ​

Yes. Babelbeez provides analytics to help you understand usage and performance. Check your dashboard for insights and logs.

What’s Next? ​

Give your Lovable site a real‑time voice—without the code overhead. Start free at https://www.babelbeez.com.