----------------------------- **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.

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)]() .

Assistand ID and API key are switched already.

anyone?