Installing the Web Widget

How to add maaiiconnect web widget to your website

After signing up for maaiiconnect service, maaiiconnect Team provisions a JavaScript code snippet that includes your maaiiconnect Service Account and other pre-filled parameters. The JavaScript code snippet is ready to be copied and installed on your web pages. You can find the JavaScript code snippet in maaiiconnect's Administration Dashboard. Follow the sequence outlined below to navigate to your web widget code snippet.

To install the Web Widget to your website:

Navigate to the Code Snippet Location

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



For maaiiconnect Dashboard login instructions, see the Dashboard Login chapter of the maaiiconnect Administration Guide.

  1. Navigate to the Widget Installation menu to view the details of web widget installation.

Widget Installation Page



Clicking Test it out! will open a demo page to show how exactly the widget and the tags in the directory would look before it even installed in your actual web site.
This will help you fix any issue before it go live and see by your visitors and customers.

  1. The code is enclosed in the code snippet box.

Widget Installation View

</> Code Snippet Parameters

<script type="text/javascript">
window.mcwcSettings = {
  serviceName: 'YOUR_SERVICE_NAME_HERE',
  ctaTags:{    // Editable
!function(e,t,c){var n,s=e.getElementsByTagName(t)[0];e.getElementById(c)||(n=e.createElement(t),,n.defer=!0,n.src="",s.parentNode.insertBefore(n,s))}(document,"script", "mcwc-sdk");
  • serviceName(required) : The service Name present in your maaiiconnect service.
  • ctaTags (optional) : By setting the trigger element ID mapping to a tag ID or *(star symbol) for all tags, the HTML button on your web page will trigger the mapped tag(s) directly. Upon clicking the button, the widget initiates the one-click call action.

Add Click-to-Action (CTA) buttons

This allows the administrator to configure the HTML 5 button(s) in your website to trigger the following actions in the maaiiconnect web client without clicking the widget.

  • Open the maaiiconnect directory
  • Make call or chat inquiry to a particular tag
  1. Click the “Edit” button
  2. Click on “+ Add New CTA Button”
  3. Enter Button ID which matches the button ID defined in the HTML code
  4. Select the tag and function the CTA button will be associated. All created tag(s) will be available in the Tag dropdown list. If you select “All Tags”, then the CTA button will open the directory. If you select a particular tag and function, then CTA button will make a call or chat inquiry to that particular tag.

Add CTA Button

  1. Repeat step 4 if you need to add more CTA button
  2. Click “Save” button to confirm the change

Implement and Display the Web Widget

  1. Manually copy the code from the snippet box from start to end.
  2. Alternatively, click the Copy button to auto-copy the code snippet
  3. Paste the code into the HTML source code of your web page right before closing tag. Insert the code snippet on every page where you want the web widget to appear.
  4. After inserting the code snippet, save and reload the page.



You can paste the script right before the closing body tag.

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

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

Hide or Disable the Web Widget

For a case that CTAs would work best compare to the widget into your web page.

You can hide the Web Widget without affecting the HTML CTA button:

  1. Navigate to the Appearance menu to view the Widget Appearance page.
  2. Click “Edit” button
  3. Toggle OFF the "Widget Display" to hide the widget (by default the widget display is toggled ON)
  4. Click “Save” button to confirm the change



The widget will be instantly enabled or disabled on the web page once saved.

To force remove maaiiconnect from a web page:

  • Delete the code snippet from the web page, save and reload.
  • This action will affect the HTML CTA buttons (if any).

To configure your maaiiconnect Widget appearance, see Customize Your Widget Appearance for details.

Updated about a month ago

Installing the Web Widget

How to add maaiiconnect web 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.