Help! Widget for website
# support
a
ok so i pasted the code into a html code on my ghl site. However when i load the webpage the widget is at the bottom. I thougth by draggin in the html button from GHL it will allow me to place my button anywhere on the page? What am i missing please? The code i used was directly from the widget page on your website: 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"); https://cdn.discordapp.com/attachments/1377996798446276679/1377996798756389015/image.png?ex=683aff06&is=6839ad86&hm=7d011269ce92cd01ef727fb3d14be8389b0ef73cac41ae8b940e329ae039e608& https://cdn.discordapp.com/attachments/1377996798446276679/1377996799180275904/image.png?ex=683aff06&is=6839ad86&hm=a8472401a914067224ecdd1deb3c8fd539dd30cc377634864afaea891a40dd10&
k
Could be a padding/CSS issue. If that button is difficult to customize, you could also look at this code to see if it will work for you and your implementation:
a
sorry im not a coder, i dont even know what html is so thats not going to help. im hoping for a drag and drop of the widget on my website, so i can just place it anywhere i want? assuming thats not possible?
so frustrating trying to move this widget i've spent 3hrs and still cant figure this crap out
and all i wanted was to move this widget around
k
try entering this into the buttonConfig:
Copy code
const buttonConfig = {
  position: "bottom-left", // or "bottom-right", "top-left", "top-right"
  size: "medium", // small, medium, large
  color: "#007bff", // icon color
  hideOnMobile: false,
};