【Growth Tool】Growth Tool API Documentation

When using the ManyChat growth tool, the library provides more opportunities:

• Functionality of using the headless checkbox widget

• Opportunities to initialize widgets for dynamically created elements

• Control the visibility of widgets, etc.

Initialization #

The loading of the library is done by using a script. The link to this script can be found in the “Growth Tools” section (the “Settings” tab, install the JavaScript snippet). The loading is performed asynchronously, which is why you must wait for the library to load before calling methods of the library. This ismcAsyncInitthe purpose of the callback. After loading, globalMCvariables become available and provide access to functionalities. 

<script src="//widget.manychat.com/YOUR_PAGE_ID.js" async="async"></script>
<script>
  window.mcAsyncInit = function() {
    // MC variable is available now
    console.log(MC);
  };
</script>

Embedding widget initialization #

To initialize the embedded widget (button or box), you need to add additional code to the page at the location where you want the widget to appear. Typically, this code looks like:

<div class="mcwidget-embed" data-widget-id="YOUR_WIDGET_ID" data-widget-payload="OPTIONAL_PAYLOAD"></div>

You can place the code in multiple locations on the same page. Instances of the widget will be initialized at each location. For each instance of the widget, you can set an optional payload - this is the data that will be saved in the “custom user fields” specified in the widget settings. To set the payload for the widget instance,data-widget-payloadset properties for the element or use the method described below. setPayload

Core methods #

Checkbox widget methods #

All methods and properties listed below apply only to the “Checkbox” widget type.

Overlay widget methods #

All methods and properties listed below apply only to “Bar”, “Slide-In”, “Modal”, and “Page Takeover” widget types.

Customer chat widget methods #

All methods and properties listed belowapply only to the “Customer Chat” widget type.

Rate limiting #

Each “Customer Chat” method is limited to 1 call every 5 seconds.

Embed widget methods #

All methods and properties listed below apply only to “button” and “box” widget types.

To execute methods on the widget, you need to obtain the widget instance object. You cannot get it by passingwidgetIdto the method,MC.getWidgetbecause there may be multiple widget instances on the page at the same time. Therefore, to obtain the instance object, you should pass the Widget DOM element as a parameter when callingMC.getWidget, for example

<div id="test-widget" class="mcwidget-embed" data-widget-id="420"></div>

const widgetInstanceElement = document.getElementById('test-widget')
const widget = MC.getWidget(widgetInstanceElement)
widget.setPayload('custom_payload')

example #

• Example of using the checkbox widget
• Example of using the customer chat widget
• Example of using the overlay widget