Voice Widget Squarespace Site
# support
v
I am trying to get the widget working on a squarespace site. What do i have to do because just inserting the code snippet messes up the whole site. Thanks for any help!
v
Hi @Vince, I'm an AI assistant for Vapi. I'll analyze available sources and get back to you shortly.
----------------------------- **While I generate an answer, here are some sources that might be helpful**: * [Web Snippet]() * [Launch Screen Assets]() * [Vapi Web SDK]() * [Vapi Python SDK]() -----------------------------
### Answer To integrate the Vapi Voice Widget into your Squarespace site without issues, follow these steps closely [(1)]() : 1. **Insert the Widget Snippet**: Copy the provided widget snippet and insert it into your website’s HTML, ideally before the closing
</body>
tag. Ensure you replace
<assistant_id>
with your actual assistant ID and
<your_public_api_key>
with your public API key from the Vapi Dashboard.
Copy code
html
<script>
var vapiInstance = null;
const assistant = "<assistant_id>"; // Substitute with your assistant ID
const apiKey = "<your_public_api_key>"; // 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");
</script>
2. **Generate Your Assistant**: If you haven't already, create an assistant through your Vapi dashboard to get an assistant ID. Alternatively, define an assistant configuration directly in your code. 3. **Modify the Button**: Customize the
buttonConfig
object to align with your site's branding and style. Adjust positioning, colors, icons, and more to ensure it fits naturally within your site's layout. 4. **Add Functionality to Vapi Instance**: Utilize the
vapiInstance
for further customization, such as handling events or sending messages to the bot programmatically. It’s essential to pay attention to the CSS and any other site-specific configurations that may conflict with the widget. If inserting the code snippet directly causes layout issues, consider adjusting the positioning and styling within the
buttonConfig
object or consult Squarespace's documentation for embedding external scripts to ensure compatibility. Remember to also check for any console errors in your browser's developer tools, as these can provide clues if the widget does not display or function correctly. If issues persist, reviewing common integration challenges discussed in forums like Discord might offer additional insights or solutions specific to Squarespace integration [(2)]() .
a
@Moe this is how it's done
s
@Vince can you provide us some more detail so that we can help you out with it?
v
Hired someone on fiverr to do it. The widget is visible correct now, but its showing "connecting" all the time. This is the full code i pasted: .vapi-btn{ z-index:9999; z-index: 9999; position: fixed !important; bottom: 7vh !important; right: 4vw !important; left: auto !important; } var vapiInstance = null; const assistant = "b535-4f22-98c4-1991676f6662"; // Substitute with your assistant ID const apiKey = "fa69232b-c3aa-4936-8a46-197d93023424"; // 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");
Assistand ID and API key are switched already.
anyone?
g
Alternative solution is instead of widget, just use Big demo link and paste it inside an Iframe on your website. This way you have a full section where your clients can demo the bot