Installing the Web Widget

How to add the web widget to your website

After signing up for maaiiConnect service, M800 provisions a JavaScript code snippet that includes your maaiiConnect Service ID 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 login credentials.

Note

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

  1. Navigate to the Widget Installation menu.
Widget Installation Menu

Widget Installation Menu

  1. The code is enclosed in the code snippet box.
Widget Installation View

Widget Installation View

Code Snippet Parameters

<script type='text/javascript'>
window.lcwcSettings = {
  serviceId: 'YOUR_SERVICE_ID_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://lcwc-cdn.m800.com/liveconnect/liveconnect.js",s.parentNode.insertBefore(n,s))}(document,"script","lcwc-sdk");

</script>
  • serviceId(required) : The service ID 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) button(s)

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 an 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 that CTA button associated to. All defined tag(s) will be available in the Tag dropdown. If you select “All Tags”, then the CTA button will open the directory. If you select a particular tag, then CTA button will make a call inquiry to that particular tag.
  1. Repeat step 4 if you need to add more CTA button(s)
  2. Click the “Save” button to confirm the change

Implement 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 after the opening <body> 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.

Tip

You can paste the script either right after the opening <body> tag or right before the closing </body> tag.

The maaiiConnect web Widget will appear on the web page.

Example Code Snippet

<html>
<body>

<script type='text/javascript'>
window.lcwcSettings = {
  serviceId: 'YOUR_SERVICE_ID_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://lcwc-cdn.m800.com/liveconnect/liveconnect.js",s.parentNode.insertBefore(n,s))}(document,"script","lcwc-sdk");

</script>

</body>
</html>

Hide the Web Widget

Hide the Web Widget without affecting the HTML CTA buttons:

  1. Navigate to the Appearance menu.
  1. Click the “Edit” button
  2. Toggle the "Widget Display" to hide the widget.
  3. Click the “Save” button to confirm the change

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 the appearance, see the maaiiConnect Administration Guide for details.


Installing the Web Widget


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