How can we make the vapi "mic" widget responsive t...
# support
p
right now it's all over the place. We're using this css code, 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/1266448392951955559/1266448393085915237/image_1.png?ex=66a52f7a&is=66a3ddfa&hm=34ec8407916f96e05bfa5a9ec5a112b64231e12dd37fb700bc8bbdb657c1d6f6& https://cdn.discordapp.com/attachments/1266448392951955559/1266448393371389972/image_2.png?ex=66a52f7a&is=66a3ddfa&hm=23b2dd258242ca6e9df866f6a16ffe59be2d3996525feb6dfe0cd350c5ebd9bc&
v
@PSAI_Marketing It looks like you're trying to integrate VAPI into your website, but you've mentioned using CSS code when you're actually working with JavaScript and HTML. No worries, I can help you get this sorted out! The code snippet you've provided is a JavaScript snippet that loads the VAPI SDK into your website and initializes it with your assistant ID and API key. To ensure everything works smoothly, please follow these steps: 1. Replace
<assistant_id>
with the actual assistant ID you generated from your Vapi dashboard. 2. Replace
<your_public_api_key>
with the public API key you obtained from the Vapi dashboard. 3. Configure
buttonConfig
as needed to customize the appearance and behavior of the VAPI widget on your site. Once you've made these changes, insert this script into your website's HTML, ideally before the closing
</body>
tag. This will load and initialize the VAPI widget on your website. If you have any further questions or need additional assistance, please let me know!
You can continue this conversation by mentioning me in the message.
p
@User yes, we did all that. but the widget is not responsive.
hello?
s
hello @PSAI_Marketing you cannot control vapi support btn better is create own button and use clases of vapi support btn.
p
How can we do that? Can you give an example?
e
@PSAI_Marketing how is this a vapi support team question? This is front end development on your website. Give these guys a break.
s
2 Views