Hello, how can I move the jumping phone icon to the very left of the screen say, it just jumps in the middle and follows as I move up and down the page : var vapiInstance = null; const assistant = ""; // Substitute with your assistant ID const apiKey = ""; // Substitute with your Public key from Vapi Dashboard. const buttonConfig = {}; // Modify this as required (function (d, t) { var g = document.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { vapiInstance = window.vapiSDK.run({ apiKey: apiKey, // mandatory assistant: assistant, // mandatory config: buttonConfig, // optional }); }; })(document, "script");

To move the phone icon to the left, you can adjust the

buttonConfig

object in your snippet. Set the

position

field to

"bottom-left"

or

"top-left"

depending on where you'd like the icon to appear vertically. Here's how your

buttonConfig

object should look:

javascript
const buttonConfig = {
  position: "bottom-left", // or "top-left"
  offset: "10px",  // adjust the offset as needed
  width: "50px",
  height: "50px",
  idle: {
    color: `rgb(93, 254, 202)`,
    type: "pill",
    title: "Have a quick question?",
    subtitle: "Talk with our AI assistant",
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
  },
  loading: {
    color: `rgb(93, 124, 202)`,
    type: "pill",
    title: "Connecting...",
    subtitle: "Please wait",
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
  },
  active: {
    color: `rgb(255, 0, 0)`,
    type: "pill",
    title: "Call is in progress...",
    subtitle: "End the call.",
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
  },
};

This will anchor the icon to the left side of the screen instead of the middle. Let me know if you need further assistance.