Squarespace Integration

Add the Maison concierge chat to your Squarespace site using the built-in Code Injection panel — no coding experience needed. Squarespace official site ↗

Before you start

A Squarespace Business or Commerce plan (Code Injection is not available on Personal plans)
Owner or administrator access to your Squarespace site
Your Client UUID — find it in the Business Console under Settings

Code Injection is only available on Squarespace Business and Commerce plans. If you are on a Personal plan, you will need to upgrade before continuing.

Your embed code

Copy this block now and keep it ready — you will paste it in Step 3. Replace YOUR_CLIENT_UUID with your actual UUID from the Business Console.

html

<script src="https://agent.maison-labs.com/agent-inject.bundle.js"></script>
<script>
  function getQueryParam(param) {
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    return urlParams.get(param);
  }
  var sessionId = getQueryParam('mcbsid');
  var mcbs = window.initMcbs({
    clientId: 'YOUR_CLIENT_UUID',
    sessionId: sessionId,
    // locale: 'en-US',                     // Override browser locale
    // iconPosition: { top: 0, bottom: 20, left: 0, right: 20 },  // Chat icon position (px)
    // onSessionUpdate: function(id) { console.log('Session:', id); },
    // onLocaleUpdate: function(locale) { console.log('Locale:', locale); },
  });
  mcbs.showIcon();
</script>

Steps

Open Settings in your Squarespace dashboard
Log into your Squarespace account. From the Home Menu on the left, click Settings.
Navigate to Advanced > Code Injection
Inside Settings, scroll down and click Advanced. Then click Code Injection. You will see a page with several text fields for injecting code into different parts of your site.
Paste the embed code into the Footer field
Find the field labelled Footer — it is the second large text area on the page. Click inside it and paste the embed code you copied above. Make sure YOUR_CLIENT_UUID has been replaced with your actual UUID.
Click Save
Click the Save button at the top of the Code Injection page. Your changes take effect immediately.
Visit your site and verify
Open your website in a new browser tab. The Maison chat icon should appear in the bottom-right corner. To confirm, open your browser DevTools (press F12), switch to the Elements tab, and look for #maison-chat-icon in the DOM.

For the full list of configuration options, control methods, and callbacks, see the Widget SDK Reference.

Common mistakes

Pasting in the Header field instead of Footer. The Header field runs before your page content loads, which can cause the widget to fail to initialise. Always use the Footer field.

Forgetting to replace YOUR_CLIENT_UUID. The widget will not load without a valid Client UUID. Copy it exactly from your Business Console — it looks like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.

Using string values for iconPosition. Write bottom: 20, not bottom: '20px'. Values are plain numbers representing pixels — do not include units.

Not sure if it's set up correctly? Use the Site Diagnostic tool.