Issues to adding code snippet from Vapi to bubble. Not working

[jpdougherty24]

Hello I am trying to add a Vapi code snippet to my bubble app so that I can access its assistant features.

Here is the code snippet on the Vapi website that I am trying to add: Web Snippet - Vapi
I am pasting the code snippet from step 1 with my public api key and personal assistant ID.

I am watching this youtube tutorial: https://www.youtube.com/watch?v=XOVt1qHmrlg&t=391s&ab_channel=JannisMoore|AIAutomation
You obviously don’t have to watch the whole entire tutorial but if you watch from minute mark 4:12 to 5:15 you will see how the guy is adding the code snippet to his website by copying and pasting it. I thought I could accomplish the same thing on bubble by adding the code snippet to the page HTML header.

However after adding my public API key and assistant ID to the HTML header the page is still blank and I do not have the live chat feature from Vapi. Do you know what I am doing wrong that is not allowing this to work? Here are screenshots on where I added the code snippet

[rec.it.engineering]

dear please did you find a solution, i’m in the same situation
thank you

[Jici]

Add button config like in step 3

[rec.it.engineering]

dear
could you please explain me more

[Jici]

In the documentation, step 3 is to add button config.
replace

  const buttonConfig = {};

by

const buttonConfig = {
  position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
  offset: "40px", // decide how far the button should be from the edge
  width: "50px", // min-width of the button
  height: "50px", // height of the button
  idle: { // button state when the call is not active.
    color: `rgb(93, 254, 202)`, 
    type: "pill", // or "round"
    title: "Have a quick question?", // only required in case of Pill
    subtitle: "Talk with our AI assistant", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
  },
  loading: { // button state when the call is connecting
    color: `rgb(93, 124, 202)`,
    type: "pill", // or "round"
    title: "Connecting...", // only required in case of Pill
    subtitle: "Please wait", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
  },
  active: { // button state when the call is in progress or active.
    color: `rgb(255, 0, 0)`,
    type: "pill", // or "round"
    title: "Call is in progress...", // only required in case of Pill
    subtitle: "End the call.", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
  },
};