Framer Integration

Add the Maison concierge chat to your Framer site using the built-in custom code settings — no coding experience needed. Framer official site ↗

Before you start

Owner or editor access to your Framer project
Your Client UUID — find it in the Business Console under Settings

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 your project in Framer
Log into Framer and select the project you want to add the Maison chat widget to.
Open Site Settings
Click the gear icon in the top-right corner of the editor to open Site Settings. Then navigate to the General section.
Paste the embed code into the Head tag
Scroll down to the Custom Code area. Find the field labelled End of <head> tag and paste the embed code you copied above. Make sure YOUR_CLIENT_UUID has been replaced with your actual UUID.
Save and preview
Close the settings panel and preview your site. The Maison chat icon should appear in the bottom-right corner.
Publish your site
Once confirmed, click Publish in the top-right corner so visitors can see the chat widget on your live site.
Verify in the browser
Open your published site in a new browser tab. To confirm the widget loaded, 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

Forgetting to Publish. Changes to custom code only appear on your live site after you click Publish. If you saved but didn't publish, the widget will not appear for visitors.

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.