Skip to content

Maira Widget Integration

To integrate the Maira AI Assistant into your site, Add below script tags to the <head> section of your HTML document.

<!-- Maira AI Advisor -->
<script type="text/javascript">
(function(){
  const clientKey = 'CLIENT_KEY';
  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  s1.async=true;
  s1.src=`https://maira.gigalogy.com/loader`;
  // s1.setAttribute('crossorigin','*');
  s1.setAttribute('data-greeting','YOUR_GREETING_MESSAGE');
  s1.setAttribute('data-client-key', clientKey);
  // s1.setAttribute('data-chat-header','YOUR_CHAT_HEADER');
  s1.setAttribute('data-icon-color','YOUR_ICON_COLOR');
  // s1.setAttribute('data-icon-bottom-position','YOUR_ICON_BOTTOM_POSITION');
  s1.setAttribute('data-prefix', window.location.hostname);
  s0.parentNode.insertBefore(s1,s0);
})();
</script>

<script type="text/javascript">
  (function(){function widgetApi(){return new Promise((resolve)=>{
    let timeoutId;const getApi=()=>{const event=new Event('getWidgetApi');
      timeoutId=window.setTimeout(getApi,1000);window.dispatchEvent(event)};
    const onWidgetApi=(e)=>{const api=e.detail;window.clearTimeout(timeoutId);
      resolve(api)};window.addEventListener('widgetApi',onWidgetApi,{once:true});getApi();});}
    const customColorSet={
      // "--message-header-background-color": "#YOUR_MESSAGE_HEADER_BACKGROUND_COLOR",
    };
    const customTheme='YOUR_CUSTOM_THEME';
    widgetApi().then(api=>{
          // api.updateIdentifiers({userId: 'YOUR_USER_ID', memberId: 'YOUR_MEMBER_ID'});
      api.sendConfig({theme:customTheme,colorSet:customColorSet});
    });})();
</script>
<!-- End Maira AI Advisor -->

First script tag

The const clientKey parameter sets to your 'CLIENT_KEY'. This key is a confidential key provided by Gigalogy specifically for the your project.

The data-greeting property is designed to display a personalized greeting message for new users. This message can be customized or modified according to the specific requirements or branding of the store. For example s1.setAttribute('data-greeting','How can I help you?');.

The data-icon-color property allows customization of the chat icon's color. This property can be modified to suit the desired visual appearance of the chat icon. For example s1.setAttribute('data-icon-color','#4DB6AC');.

To customize the chat header and replace the default header, comment out the data-chat-header property and provide a modified version. This will display a different chat header according to your specifications. Example: s1.setAttribute('data-chat-header','Maira AI Advisor');.

You can modify the position properties to customize the placement of the chat icon and assistant window within your website. This will allow you to adjust the positioning according to your preferences. Currently they are commented out in the above script 

// s1.setAttribute('data-icon-bottom-position','20px');

Note: After modifying the position properties to customize the chat icon and assistant window placement, ensure to test the assistant on various window sizes. This is important to prevent the chat box from being cut off or misaligned on different screen dimensions.

We store and manage specific user data in Local Storage to facilitate user recognition upon return visits or for other related purposes. To distinguish user identifiers from those used by other websites employing the same assistant, a designated data prefix is utilized with each stored key. We recommend keeping it same or aligning this prefix with the store's name or a recognizable variant for consistency. s1.setAttribute('data-prefix', window.location.hostname);

Second script tag

The second script tag is used to customize the theme or color of different components of the assistant, allowing for personalized styling.

To customize a different theme than the current one, use the following line of code: const customTheme='YOUR_CUSTOM_THEME';\

The specified theme color will be applied to the chat window, resulting in a custom appearance. Here is setting an orange theme #FA5F11; const customTheme='#FA5F11; After setting the orange theme (#FA5F11), the chat window will be updated with the orange color scheme.

Also update the chat icon color in the first tag to complement the new theme color. s1.setAttribute('data-icon-color','YOUR_ICON_COLOR');

You can optionally pass the user_id and member_id (for logged in user) from your website to the assistant for more customize the result.

// api.updateIdentifiers({userId: 'YOUR_USER_ID', memberId: 'YOUR_MEMBER_ID'});

You can customize the color of each component in the chat window using this code snippet. const customColorSet

Here is the list of keys that can be added.

const myColorSet = {
    // input
    "--input-background-color": "#FF0000",
    "--input-text-color": "#fff",
    "--input-element-color": "rgb(0, 0, 255)",
    "--input-attach-color": "#fff",
    "--input-send-color": "#fff",
    "--input-placeholder-color": "rgb(255, 255, 255)",

    // message header
    "--message-header-background-color": "#FF0000",
    "--message-header-text-color": "#fff",
    "--message-header-last-active-color": "rgb(0, 0, 255)",
    "--message-header-back-color": "rgb(255, 255, 255)",

    // chat list header
    "--chatlist-header-background-color": "#FF0000",
    "--chatlist-header-text-color": "rgb(255, 255, 255)",
    "--chatlist-header-divider-color": "rgb(0, 128, 0)",

    //chatlist
    "--chatlist-background-color": "rgb(255, 192, 203)",
    "--no-conversation-text-color": "rgb(255, 255, 255)",

    //chat item
    "--chatitem-background-color": "rgb(0, 0, 255)",
    "--chatitem-selected-background-color": "rgb(255, 255, 0)",
    "--chatitem-title-text-color": "#FF0000",
    "--chatitem-content-text-color": "#FF0000",
    "--chatitem-hover-color": "#FF0000",

    //main container
    "--container-background-color": "rgb(255, 192, 203)",

    //loader
    "--loader-color": "rgb(0, 128, 0)",

    //message list
    "--messagelist-background-color": "rgb(0, 0, 255)",
    "--no-message-text-color": "rgb(255, 255, 255)",

    // incoming message
    "--incoming-message-text-color": "rgb(255, 255, 255)",
    "--incoming-message-name-text-color": "rgb(255, 255, 255)",
    "--incoming-message-background-color": "rgb(0, 128, 0)",
    "--incoming-message-timestamp-color": "rgb(255, 255, 255)",
    "--incoming-message-link-color": "#FF0000",

    //outgoing message
    "--outgoing-message-text-color": "#FF0000",
    "--outgoing-message-background-color": "rgb(255, 255, 0)",
    "--outgoing-message-timestamp-color": "#FF0000",
    "--outgoing-message-checkmark-color": "#FF0000",
    "--outgoing-message-loader-color": "#FF0000",
    "--outgoing-message-link-color": "rgb(0, 128, 0)",
}

Experiment with adding different keys to the above snippet and observe the results. Adjust these keys to achieve the best overall look for your site.