Installing the Web Widget

How to add the maaiiconnect Widget to your website

After you sign up for the maaiiconnect service, an auto-provision of JavaScript code snippet that includes your maaiiconnect Service Account and other pre-filled parameters will generate. You can immediately copy and install this code snippet on your web page to have a maaiiconnect floating widget or click-to-action (CTA) buttons such as click-to-call and click-to-chat.

Follow the steps below to get your code and install the Widget or a CTA button on your website.

Navigating to the Code Snippet Location

  • Log in to the maaiiconnect Dashboard using your domain URL and login credentials.

📘

Note:

For maaiiconnect Dashboard login instructions, refer to the Dashboard Login and Logout section of this Guide.

  • From the navigation menu, go to Administration > Widget > Installation to view the the installation code. It is enclosed in the code snippet box.

Widget Installation code

📘

Note:

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.

Implementing and Displaying the Floating Widget

  • 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.

👍

Tip:

You can paste the script right before the closing tag.

<body>
  //... Your website's source code ... 
  
  //Place the maaiiconncet installation code right before the closing body tag
</body>

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:

  • On the Widget Installation page, 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 make a call or chat inquiry to that particular tag.

Add CTA Button

📘

Notes:

  • 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. (Detail please see in Creating New Tags).
  • Click on Save.

You can 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

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

📘

Note:

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 Customizing Your Widget's Appearance section of this Guide.

Updated 21 days 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.