Vapi Call Button

Add Vapi's real-time AI voice assistant to your Framer project without needing a backend or tricky coding.

A fully customizable AI call button for your Framer projects – works out of the box with Vapi voice assistants. Get an detailed tutorial below


Just drop the component into your Framer canvas, paste your Vapi API key + Assistant ID, and configure everything in the sidebar using Property Controls What you can customize:

  • Idle label text (e.g. “Try Demo Call”)

  • Text color, background color, or animated gradient

  • Gradient direction (angle in degrees)

  • Toggle between showing a live timer or custom label while on a call

  • Set up custom states like “connecting”, “on call”, “error” — each with unique text, background, and emoji or SVG icons

  • Full font control (size, weight, line-height, etc.)

{name}

{name}