Skip to main content

Prerequisites

Before you begin, make sure you have:

A Glowstudio account with a configured AI agent

Admin access to your Squarespace website

​
Integration Steps

1

Access Your Glowstudio Dashboard

Log in to your Glowstudio account and navigate to your agent’s settings. Note down your unique agent ID.
You’ll find an agent’s unique ID on its dedicated card in the Agents tab or in the URL from the agent designer ex. https://glowstudio.ai/app/eu/agents/gib2no07kqdy1f2m/overview
2

Log in to Squarespace

Sign in to your Squarespace account and open the website where you want to add the widget.
3

Access Website Tools

  1. From the sidebar menu, select Website
  2. Scroll to the bottom of the sidebar menu
  3. Choose Website Tools
4

Open Code Injection

In the Website Tools menu, click on Code Injection.
5

Insert Integration Code

In the Header section of the Code Injection page, paste the following code:
<div id="VG_OVERLAY_CONTAINER"></div>
<script defer>
    (function() {
        window.VG_CONFIG = {
            ID: "YOUR_AGENT_ID", // Replace with your actual agent ID
            region: 'eu', // or 'na' for North America
            render: 'bottom-right', // or 'bottom-left'
            stylesheets: [
                "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
            ],
        }
        var VG_SCRIPT = document.createElement("script");
        VG_SCRIPT.src = "https://vg-bunny-cdn.b-cdn.net/vg_live_build/vg_bundle.js";
        VG_SCRIPT.defer = true;
        document.body.appendChild(VG_SCRIPT);
    })()
</script>
Remember to replace YOUR_AGENT_ID with your actual Glowstudio agent ID.
6

Save Changes

Click the Save button to apply your changes.
7

Test Your Integration

Visit your Squarespace website’s frontend and verify that the widget appears and functions correctly.

​
Customization Options

You can customize your widget’s behavior and appearance by adjusting the VG_CONFIG options:
Modify the render option to ‘bottom-left’ or ‘bottom-right’ to change the widget’s position.
Add autostart: true, to the VG_CONFIG object to have the widget open automatically when a user visits your website.
Add your own CSS file to the stylesheets array for custom styling:
stylesheets: [
    "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
    "https://your-custom-css-url.css"
],

​
Troubleshooting

If you encounter issues with your Glowstudio widget integration:
  1. Verify that you’ve copied the entire code snippet correctly into the Header section of Code Injection.
  2. Double-check that you’ve replaced “YOUR_AGENT_ID” with your actual Glowstudio agent ID.
  3. Ensure you’ve saved the changes in the Code Injection page.
  4. Clear your browser cache and refresh your Squarespace website to see changes.
  5. If the widget doesn’t appear, try adding the code to the Footer section instead of the Header section in Code Injection.
Squarespace may take a few minutes to propagate changes across their content delivery network. If you don’t see the widget immediately after saving, wait a few minutes and try refreshing your site again.