Installing the Web Widget

How to add maaiiConnect 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 domain URL and 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 to view the details of web widget installation.
Widget Installation Page

Widget Installation Page

  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_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://lcwc-cdn.m800.com/liveconnect/liveconnect.js",s.parentNode.insertBefore(n,s))}(document,"script","lcwc-sdk");

</script>
  • 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) 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 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 that CTA button associated. 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 and function, then CTA button will make a call or chat 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 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 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.

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 buttons:

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

Note

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