Installing the Web Widget

How to add the maaiiconnect Widget to your website

After you sign up for the maaiiconnect service, a provisioned JavaScript code snippet includes your maaiiconnect Subdomain, and other pre-filled parameters are automatically generated.

Subdomain: refers to the login URL or instance to access your maaiiconnect service.

You can immediately add the maaiiconnect widget or use its click-to-action (CTA) features (i.e., 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 member 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 chat room for a specific Tag or Staff member whenever a customer or visitor clicks on a web object, i.e., a button, a text, an image or an icon.

Here is a step-by-step guide for:

🚧

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

Β 

Installing and Displaying the maaiiconnect Widget

  • Log in to the maaiiconnect Dashboard using your subdomain 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.

  • 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 after the opening tag on every page where you want the maaiiconnect widget to appear.

  • Save, publish and reload your web page.

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>
<body>
  
  //Place the maaiiconncet installation code right before the opening body tag
  //... Your website's source code ... 
  
</body>

πŸ‘

Paste the script right after the opening tag.

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

maaiiconnect Widget

Β 

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 enquiry 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 HTML element's ID 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

When CTA buttons work better on your web page, 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 take effect on the widget 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.