This guide will help you integrate the Maison Labs Chat Bot into your website. Please follow these steps carefully. If you have any questions, feel free to reach out to Maison Labs support.
Add the Maison Labs script to the <head> section of your HTML file.
The following is an example:
1<script type="text/javascript" src="https://maison-labs.com/agent-inject.bundle.js" id="maison-chat-js"></script>Place the following script anywhere in your HTML file (e.g., before the closing </body> tag). You can use the example below to initialize the Maison Agent. If you need to retrieve a session ID, refer to the getQueryParam example provided.
This is one way to track the session ID, but you are free to implement this functionality however you prefer.
1<script type="text/javascript">
2 // Example function to get query string parameters
3 function getQueryParam(param) {
4 const queryString = window.location.search;
5 const urlParams = new URLSearchParams(queryString);
6 return urlParams.get(param);
7 }
8
9 const sessionId = getQueryParam ? getQueryParam('mcbsid') : null;
10 // Retrieve the session ID from the query string (or use your preferred method)
11
12 const mcAgent = initMcbs({
13 clientId: 'YOUR_CLIENT_ID', // Replace with your client ID
14 sessionId: sessionId, // Pass an existing session ID or do not define to create a new session.
15 locale: 'en_US', // Default language/locale
16 onSessionUpdate: (sessionId) => {
17 console.log('Updated session ID: ', sessionId);
18 // Use this callback to track session ID updates
19 },
20 onLocaleUpdate: (locale) => {
21 console.log('Chat locale updated: ', locale);
22 }
23 });
24
25 // Show the chat bot icon
26 if (document.readyState === "loading") {
27 document.addEventListener("DOMContentLoaded", mcAgent.showIcon);
28 } else {
29 mcAgent.showIcon();
30 }
31</script>After integration, you can control the chat bot using the following functions:
mcAgent.showChat()
Opens the chat interface.
mcAgent.hideChat()
Hides the chat interface.
mcAgent.hideSuggestion()
Hides any chat suggestions.
mcAgent.showIcon()
Displays the Maison Labs chat bot icon.
mcAgent.hideIcon()
Hides the Maison Labs chat bot icon.
mcAgent.updateLocale(locale)
Changes the chat bot's language/locale (e.g., 'en_US', 'fr_FR').
mcAgent.updateIconPosition(position)
Updates the icon position dynamically.
Provide { top: value_in_pixels, left: value_in_pixels, right: value_in_pixels, bottom: value_in_pixels}.
iconPosition property in initMcbs sets the chat bot icon position. For example:1iconPosition: {
2 bottom: 80 // Position the icon 80 pixels from the bottom of the screen
3}1mcAgent.updateIconPosition({ top: 100, left: 20 });Replace top, bottom, left, or right with the desired pixel values.
onSessionUpdate callback provides the session ID whenever the chat bot creates or updates a session. You can use this ID to track the session in your analytics or backend systems.mcAgent.showChat() directly when your element is clicked.https://maison-labs.com/agent-inject.bundle.js) is accessible.initMcbs function is correctly configured and that you've called showIcon().Congratulations! You've successfully integrated the Maison Labs Chat Bot into your website.
To integrate with sqarespace, you need access to code injection. This requires a subscription with access to "Complete Customization With CSS and JavaScript".
Integrate Maison on your Webflow site by accessing your project’s custom code settings and adding the Maison scripts to the Head section.
Integrate Maison into your Framer project by using Framer’s custom code block to inject the Maison chat bot scripts into your site’s header.
1<script>
2 const script = document.createElement('script');
3 script.src = 'https://maison-labs.com/agent-inject.bundle.js';
4 script.onload = function () {
5 function getQueryParam(param) {
6 const queryString = window.location.search;
7 const urlParams = new URLSearchParams(queryString);
8 return urlParams.get(param);
9 }
10 const sessionId = getQueryParam('mcbsid');
11 const mcAgent = window.initMcbs({
12 clientId: 'ea4d0d2d-9f03-41de-8864-179e74c2cd0b', // Replace with your client id
13 sessionId: sessionId,
14 locale: 'en_US'
15 });
16 mcAgent.showIcon();
17 };
18 document.head.appendChild(script);
19</script>
Integrate Maison into your WordPress site by injecting the Maison chat bot scripts into your site’s header, either via a plugin or theme editor.
You can sign up for Maison for Cloudbeds in any of these ways:
After sign-up, you will receive access to the Maison Operator Panel to configure your chat agent.
Once connected, Maison will incorporate the availability, rates, and inventory feeds into the guest conversations.
With the Cloudbeds integration enabled, Maison can support:
Note: Exact data fields available depend on Cloudbeds permissions and the integration configuration enabled for your account.