Webflow Integration

Add the Maison concierge chat to your Webflow site using Project Settings — no coding experience needed. Webflow official site ↗

Before you start

A Webflow paid plan (Custom Code is not available on the free Starter plan)
Owner or edit access to the Webflow project
Your Client UUID — find it in the Business Console under Settings

The Custom Code tab in Project Settings is only available on Webflow paid plans. If you are on the free Starter plan you will need to upgrade before continuing.

Your embed code

Copy this block now — 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 Project Settings
Open your project in the Webflow Designer. Click the gear icon in the top-left corner to open Project Settings.
Go to the Custom Code tab
Inside Project Settings, click the Custom Code tab at the top of the panel. You will see two text areas: one for Head Code and one for Footer Code.
Paste the embed code into Footer Code
Click inside the Footer Code box and paste the embed code you copied above. Make sure YOUR_CLIENT_UUID has been replaced with your actual UUID.
Save Changes and Publish
Click Save Changes at the bottom of the settings panel. Then return to the Designer and click Publish to push the update to your live site.
Visit your site and verify
Open your live site 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.

Need the widget on only one page? In the Webflow Designer, click the page in the Pages panel, open its Page Settings (gear icon next to the page name), and paste the embed code into the Before </body> tag field. This overrides the project-level setting for that page only.

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

Common mistakes

Pasting in Head Code instead of Footer Code. Placing the snippet in the Head Code box runs it before the page body is ready, which can cause the widget to fail. Always use the Footer Code box.

Saving without publishing. Changes to Project Settings only go live after you Publish your site from the Designer. If you saved but didn't publish, the widget will not appear on your live site.

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.