Installing the Web Widget

How to add the maaiiconnect Widget to your website

After you sign up for the maaiiconnect service, you will be provisioned with an auto-generated JavaScript code snippet that includes your maaiiconnect Service Account and other pre-filled parameters. You can immediately add this maaiiconnect widget or use its click-to-action (CTA) features (e.g., Click-to-call or Click-to-chat buttons) on your website.

  • maaiiconnect widget - a widget, i.e., a small application interface, located at the bottom of a web page that lets your customers or visitors immediately interact with your business through call or chat.

  • Click-to-call - a maaiiconnect widget feature that automatically calls a specific Tag or Staff whenever a customer or visitor clicks on a web object, i.e., a button, a text, an image or an icon.

  • Click-to-chat - a maaiiconnect widget that automatically launches a chatroom for a specific Tag or Staff whenever a customer or visitor clicks on a web object, i.e., a button, a text, an image or an icon.

This is a step-by-step guide for:

🚧

Your website needs to have an SSL certificate for secure HTTPS connection to enable maaiiconnect's call function.

Β 

Implementing and Displaying the maaiiconnect Widget

  • Log in to the maaiiconnect Dashboard using your domain URL and login credentials.
  • From the navigation menu, go to Administration > Widget > Installation to view the installation code. It is enclosed in the code snippet box.

Widget Installation code

πŸ‘

Clicking Test it out! will open a demo page that will show you how exactly the widget and the tags in the Directory will look like on your actual website. This will help you fix any issues before it goes live and is seen by your visitors and customers.

</> Code Snippet Parameters

<script type="text/javascript">
window.mcwcSettings = {
  serviceName: 'YOUR_SERVICE_NAME_HERE',
  ctaTags:{    // Editable
    'YOUR_TRIGGER_ELEMENT_ID':'TAG_ID'
  }
};
!function(e,t,c){var n,s=e.getElementsByTagName(t)[0];e.getElementById(c)||(n=e.createElement(t),n.id=c,n.defer=!0,n.src="https://mcwc.mc.maaiiconnect.com/mcwc/mcwc.js",s.parentNode.insertBefore(n,s))}(document,"script", "mcwc-sdk");
</script>
  • serviceName (required): refers to your maaiiconnect service account.
  • ctaTags (optional): refers to a CTA tag(s) that trigger an element ID mapped to a tag ID or all tags. When you enable this, an HTML button on your web page will trigger the mapped tag(s) directly. See below for more information.
  • Manually copy the widget code from the snippet box from start to end. Alternatively, click on the Copy button to automatically copy the code snippet
  • Paste the widget code into the HTML source code of your web page, right before the closing tag.
    • Insert the code snippet on every page where you want the maaiiconnect widget to appear.
  • Save and reload your web page.
<body>
  //... Your website's source code ... 
  
  //Place the maaiiconncet installation code right before the closing body tag
</body>

πŸ‘

You can paste the script right before the closing tag.

The maaiiconnect floating widget should appear at the bottom-right corner of the page.

Β 

Adding Click-to-Action (CTA) Buttons

A CTA button is an HTML5 button in your website that you can configure to trigger the following actions in the maaiiconnect web client without clicking on the widget:

  • Open the maaiiconnect Directory
  • Make a call or chat inquiry to a particular tag

Below are live examples of CTA links, buttons, and icons. Try clicking on them to see how it works:


Trigger the Directory


Trigger the Chat function of a Tag


Trigger the Call function of a Tag


To add a CTA button:

  • Log in to the maaiiconnect Dashboard using your domain URL and login credentials.
  • From the navigation menu, go to Administration > Widget > Installation to view the installation code.
  • Click on the Edit button then click on + Add New CTA Button.
  • Enter a Button ID. This should match the button ID defined in your HTML code.
  • Select the Tag and Function the CTA button will be associated with. All created tag(s) will be available in the Tag dropdown list.
    • If you select All Tags, then the CTA button will open the widget Directory.
    • If you select a particular Tag and Function, then the CTA button will call or chat about that particular tag.

Add CTA Button

πŸ“˜

The Button ID is the ID of the HTML element that you want to have the trigger effect. Therefore, by setting this ID to your HTML element, you can trigger maaiiconnect any way you want, i.e., through buttons, images, texts, or even videos.

Make sure that your Tag setting is enabled with the same function as your CTA. Refer to How to Create New Tags section of our User Guide for more details.

  • Click on Save.
  • Manually copy the widget code from the snippet box from start to end. Alternatively, click on the Copy button to automatically copy the code snippet
  • Paste the widget code into the HTML source code of your web page right before the closing tag.
  • Apply the CTA trigger by putting the exact Button ID to the element you want to trigger:
<button id='elementID'>Talk to Us</button>  // A button
<text id='elementID'>Find an Expert</text> // A Text
<image id='elementID'>Find an Expert</image> // An Image
<span id='elementID' class='fa-happy-face' ></span> // An icon
  • Save and reload your web page.
  • The maaiiconnect floating widget should appear at the bottom-right corner of the page.
  • The elements (buttons) should be functional with a call or chat function when clicked.

Β 

Hiding or Disabling the Web Widget

In cases when CTA buttons will work better on your web page that the widget, you can hide the latter without affecting the HTML CTA button.

To hide the maaiiconnect widget:

  • From the navigation menu, go to Administration > Widget > Appearance , then click on the Edit button at the bottom of the page.
  • Toggle the Widget Display button OFF.
  • Click on Save.

Widget Settings

πŸ“˜

Any changes in the Widget appearance will automatically take effect on the page(s) where it is installed.

To force remove the maaiiconnect widget from a web page:

  • Delete the code snippet from the web page, then save and reload the page.

Note that this action will also affect any HTML CTA buttons enabled on the page.

For more information on how to configure your maaiiconnect Widget appearance, refer to the Customising Your Widget's Appearance section of this Guide.

Updated about a month ago


Installing the Web Widget


How to add the maaiiconnect Widget to your website

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.