{"id":859,"date":"2022-12-14T02:23:19","date_gmt":"2022-12-13T18:23:19","guid":{"rendered":"https:\/\/manychat.com.hk\/?post_type=docs&#038;p=859"},"modified":"2022-12-09T02:23:34","modified_gmt":"2022-12-08T18:23:34","password":"","slug":"%e3%80%90%e6%88%90%e9%95%b7%e5%b7%a5%e5%85%b7%e3%80%91%e5%a2%9e%e9%95%b7%e5%b7%a5%e5%85%b7api%e6%96%87%e6%aa%94","status":"publish","type":"docs","link":"https:\/\/manychat.com.hk\/en\/docs\/%e3%80%90%e6%88%90%e9%95%b7%e5%b7%a5%e5%85%b7%e3%80%91%e5%a2%9e%e9%95%b7%e5%b7%a5%e5%85%b7api%e6%96%87%e6%aa%94\/","title":{"rendered":"\u3010Growth Tool\u3011Growth Tool API Documentation"},"content":{"rendered":"<p dir=\"ltr\"><span>When using the ManyChat growth tool, the library provides more opportunities:<\/span><\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><span>Functionality of using the headless checkbox widget<\/span><\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><span>Opportunities to initialize widgets for dynamically created elements<\/span><\/p>\n<\/li>\n<li dir=\"ltr\"><span>Control the visibility of widgets, etc.<\/span><\/li>\n<\/ul>\n<h2 dir=\"ltr\"><span>Initialization<\/span><\/h2>\n<p dir=\"ltr\"><span>The loading of the library is done by using a script. The link to this script can be found in the \u201cGrowth Tools\u201d section (the \u201cSettings\u201d 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 is<\/span><code class=\"source-code\">mcAsyncInit<\/code><span>the purpose of the callback. After loading, global<\/span><code class=\"source-code\">MC<\/code><span>variables become available and provide access to functionalities.\u00a0<\/span><\/p>\n<div class=\"prism-show-language\">\n<div class=\"prism-show-language-label\"><span>HTML<\/span><\/div>\n<\/div>\n<pre class=\"line-numbers  language-html\" data-code-brush=\"html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\/\/widget.manychat.com\/YOUR_PAGE_ID.js<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">async<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>async<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script language-javascript\">\r\n  window<span class=\"token punctuation\">.<\/span>mcAsyncInit <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token comment\" spellcheck=\"true\">\/\/ MC variable is available now<\/span>\r\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>MC<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<h2><span>Embedding widget initialization<\/span><\/h2>\n<p><span>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:<\/span><\/p>\n<div class=\"prism-show-language\">\n<div class=\"prism-show-language-label\"><span>HTML<\/span><\/div>\n<\/div>\n<pre class=\"line-numbers  language-html\" data-code-brush=\"html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>mcwidget-embed<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">data-widget-id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>YOUR_WIDGET_ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">data-widget-payload<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>OPTIONAL_PAYLOAD<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><span>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 \u201ccustom user fields\u201d specified in the widget settings. To set the payload for the widget instance,<\/span><code>data-widget-payload<\/code><span>set properties for the element or use the method described below.<\/span><code>\u00a0setPayload<\/code><\/p>\n<h2 dir=\"ltr\"><span>Core methods<\/span><\/h2>\n<table>\n<tbody>\n<tr>\n<td>\n<p dir=\"ltr\"><strong><span>method<\/span><\/strong><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><strong><span>description<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">MC.parse()<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Finds widget elements on the page (for example<\/span><code class=\"source-code\">&lt;div class=&quot;mcwidget-checkbox&quot; data-widget-id=&quot;420&quot;&gt;&lt;\/div&gt;<\/code><span>) and renders them. Call this function when the library is loaded. It may be useful if you need to render elements added to the DOM after the library has loaded.\u00a0<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">MC.getWidget(widgetId or DOM Element)<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Returns the widget object by widget ID or the DOM element of the embedded widget instance. With this object, you can listen to events of the widget and call methods. The ID of the widget can be obtained from the code snippet in Growth Tools.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>MC.getWidgetList()<\/span><\/td>\n<td><span>Returns a list of all active widgets.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 dir=\"ltr\"><span>Checkbox widget methods<\/span><\/h2>\n<p dir=\"ltr\"><em><span>All methods and properties listed below apply only to the \u201cCheckbox\u201d widget type.<\/span><\/em><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p dir=\"ltr\"><strong><span>method<\/span><\/strong><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><strong><span>description<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">.on(eventName, callback)<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Subscribe to events<\/span><code class=\"source-code\">eventName<\/code><span>. Available values<\/span><code class=\"source-code\">eventName<\/code><span>:<\/span><\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><code class=\"source-code\">checked<\/code><span>\u00a0- Change the checked state of the checkbox<\/span><\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><span>submitted<\/span><span>\u00a0- Widget submitted<\/span><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">.off(event[, callback])<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Unsubscribe from an event or all events. If no callback is provided, it will unsubscribe from all events.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.submit()<\/span><\/td>\n<td>\n<p dir=\"ltr\" data-select-like-a-boss=\"1\"><span>The method to send the checkbox confirmation. Must be called after clicking the button to confirm joining.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">.checked<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\" data-select-like-a-boss=\"1\"><span>This property allows checking the current state of the widget.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.ref<\/span><\/td>\n<td><span>The reference string used when submitting the widget, available only after submission.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.userRef<\/span><\/td>\n<td><span>The user identifier used when submitting the widget, available only after submission.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 dir=\"ltr\"><span>Overlay widget methods<\/span><\/h2>\n<p dir=\"ltr\"><em><span>All methods and properties listed below apply only to \u201cBar\u201d, \u201cSlide-In\u201d, \u201cModal\u201d, and \u201cPage Takeover\u201d widget types.<\/span><\/em><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p dir=\"ltr\"><strong><span>method<\/span><\/strong><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><strong><span>description<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.open()<\/span><\/td>\n<td>\n<p dir=\"ltr\"><span>Open the widget.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">.close()<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Close the widget.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.setPayload(refPayload)<\/span><\/td>\n<td><span>Set the reference payload for the widget. The value must be a string. Up to 200 characters. Valid characters are<\/span><code>a-z A-Z 0-9 +\/=-._<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 data-select-like-a-boss=\"1\"><span>Customer chat widget methods<\/span><\/h2>\n<p dir=\"ltr\"><em><span>All methods and properties listed below<\/span><span>apply only to the \u201cCustomer Chat\u201d widget type.<\/span><\/em><\/p>\n<h3><span>Rate limiting<\/span><\/h3>\n<p><span>Each \u201cCustomer Chat\u201d method is limited to 1 call every 5 seconds.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p dir=\"ltr\"><strong><span>method<\/span><\/strong><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><strong><span>description<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.open(shouldOpenDialog)<\/span><\/td>\n<td>\n<p dir=\"ltr\"><span>Open the widget. You can use<\/span><span>shouldOpenDialog<\/span><span>parameter to determine whether the dialog should also be opened.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p dir=\"ltr\"><code class=\"source-code\">.close()<\/code><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><span>Close the entire widget.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.openDialog()<\/span><\/td>\n<td><span>Open the widget dialog.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.closeDialog()<\/span><\/td>\n<td><span>Close the widget dialog.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.setLoggedInGreeting(text)<\/span><\/td>\n<td><span>Set the greeting for logged-in users.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.setLoggedOutGreeting(text)<\/span><\/td>\n<td><span>Set the greeting for logged-out users.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.setPayload(refPayload)<\/span><\/td>\n<td><span>Set the reference payload for the widget. The value must be a string.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>.set(changes)<\/span><\/td>\n<td><span>Set the greeting and\/or ref payload parameters.<\/span><code>changes<\/code><span>is a JSON object with new values. Available PARAM names:<\/span><code>loggedInGreeting<\/code><span>,<\/span><code>loggedOutGreeting<\/code><span>,<\/span><code>refPayload<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 data-select-like-a-boss=\"1\"><span>Embed widget methods<\/span><\/h2>\n<p><em data-select-like-a-boss=\"1\"><span>All methods and properties listed below apply only to \u201cbutton\u201d and \u201cbox\u201d widget types.<\/span><\/em><\/p>\n<p><span>To execute methods on the widget, you need to obtain the widget instance object. You cannot get it by passing<\/span><code>widgetId<\/code><span>to the method,<\/span><code>MC.getWidget<\/code><span>because 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 calling<\/span><code>MC.getWidget<\/code><span>, for example<\/span><\/p>\n<div class=\"prism-show-language\">\n<div class=\"prism-show-language-label\"><span>HTML<\/span><\/div>\n<\/div>\n<pre class=\"line-numbers  language-html\" data-code-brush=\"html\"><code class=\"language-html\"><span class=\"token comment\" spellcheck=\"true\"><!-- your code snippet --><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>test-widget<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>mcwidget-embed<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">data-widget-id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>420<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<div class=\"prism-show-language\">\n<div class=\"prism-show-language-label\"><span>s<\/span><\/div>\n<\/div>\n<pre class=\"line-numbers  language-js\" data-code-brush=\"js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> widgetInstanceElement <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'test-widget'<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token keyword\">const<\/span> widget <span class=\"token operator\">=<\/span> MC<span class=\"token punctuation\">.<\/span><span class=\"token function\">getWidget<\/span><span class=\"token punctuation\">(<\/span>widgetInstanceElement<span class=\"token punctuation\">)<\/span>\r\nwidget<span class=\"token punctuation\">.<\/span><span class=\"token function\">setPayload<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'custom_payload'<\/span><span class=\"token punctuation\">)<\/span><\/code><\/pre>\n<table>\n<tbody>\n<tr>\n<td>\n<p dir=\"ltr\"><strong><span>method<\/span><\/strong><\/p>\n<\/td>\n<td>\n<p dir=\"ltr\"><strong><span>description<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span>.setPayload(refPayload)<\/span><\/td>\n<td><span>Set the reference payload for the widget. The value must be a string. Up to 200 characters. Valid characters are<\/span><code>a-z A-Z 0-9 +\/=-._<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span>example<\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/github.com\/manychat\/checkbox-growth-tools-example\" target=\"_blank\" rel=\"noreferrer noopener\"><span>Example of using the checkbox widget<\/span><\/a><\/li>\n<li><a href=\"https:\/\/github.com\/manychat\/customer-chat-growth-tools-example\" target=\"_blank\" rel=\"noreferrer noopener\"><span>Example of using the customer chat widget<\/span><\/a><\/li>\n<li><a href=\"https:\/\/github.com\/manychat\/overlay-growth-tools-example\" target=\"_blank\" rel=\"noreferrer noopener\"><span>Example of using the overlay widget<\/span><\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>\u4f7f\u7528ManyChat\u589e\u9577\u5de5\u5177\u6642\uff0c\u8a72\u5eab\u63d0\u4f9b\u4e86\u66f4\u591a\u6a5f\u6703\uff1a \u4f7f\u7528\u7121\u982d\u8907\u9078\u6846\u5c0f\u90e8\u4ef6\u7684\u529f\u80fd \u70ba\u52d5\u614b\u5275\u5efa\u7684\u5143\u7d20\u521d\u59cb\u5316\u5c0f\u90e8\u4ef6 [&hellip;]<\/p>","protected":false},"author":20,"featured_media":0,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"%%post_title%%","_seopress_titles_desc":"","_seopress_robots_index":"","_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_eb_attr":"","_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"footnotes":""},"doc_category":[46],"doc_tag":[],"class_list":["post-859","docs","type-docs","status-publish","hentry","doc_category-manychat-basics"],"year_month":"2026-04","word_count":174,"total_views":"2446","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Michelle","author_nicename":"michelle","author_url":"https:\/\/manychat.com.hk\/en\/author\/michelle\/"},"doc_category_info":[{"term_name":"ManyChat Basics","term_url":"https:\/\/manychat.com.hk\/en\/docs-category\/manychat-basics\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/users\/20"}],"version-history":[{"count":1,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/859\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/859\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/media?parent=859"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_category?post=859"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_tag?post=859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}