	{"id":845,"date":"2023-06-23T23:17:07","date_gmt":"2023-06-23T15:17:07","guid":{"rendered":"https:\/\/manychat.com.hk\/?post_type=docs&#038;p=845"},"modified":"2023-06-23T23:18:12","modified_gmt":"2023-06-23T15:18:12","password":"","slug":"%e3%80%90%e6%88%90%e9%95%b7%e5%b7%a5%e5%85%b7%e3%80%91%e5%ae%a2%e6%88%b6%e8%81%8a%e5%a4%a9%e5%a2%9e%e9%95%b7%e5%b7%a5%e5%85%b7","status":"publish","type":"docs","link":"https:\/\/manychat.com.hk\/en\/docs\/%E6%88%90%E9%95%B7%E5%B7%A5%E5%85%B7%E5%AE%A2%E6%88%B6%E8%81%8A%E5%A4%A9%E5%A2%9E%E9%95%B7%E5%B7%A5%E5%85%B7\/","title":{"rendered":"\u3010Growth Tools\u3011Customer Chat Growth Tool"},"content":{"rendered":"<p data-identifyelement=\"436\">1. This article will help you set up the \u201cCustomer Chat\u201d growth tool for your website and convert your visitors into Messenger bot subscribers. Using ManyChat, setting up this tool and expanding your audience is very easy, but the best part is - you don't have to deal with programming issues.<\/p>\n<p data-identifyelement=\"437\"><img decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016938206\/original\/CmCAzRsxeVcxrVfjdxIKFP6F8BKqbFCnDQ.png?1537856040\"><\/p>\n<p data-align=\"left\" data-generated-at=\"15145533619990.38890719741853386\" data-id=\"block-ember2538\" data-identifyelement=\"439\">2. This growth tool can be used on any platform that supports a custom  section. It's very easy to create: insert the code - customize the widget in ManyChat - activate it.<\/p>\n<p data-align=\"left\" data-generated-at=\"15145533620000.6516823430929799\" data-id=\"block-ember2540\" data-identifyelement=\"440\">The next time you need to make any changes to the widget, manage it directly in your ManyChat account. Customize it as needed, disable and re-enable it, or even choose specific pages to display the widget.<\/p>\n<h2 data-align=\"left\" data-generated-at=\"15154120205700.8445536009050361\" data-id=\"block-ember2539\" data-identifyelement=\"441\"><strong>3. Create the \u201cCustomer Chat\u201d growth tool&nbsp;<\/strong><\/h2>\n<p data-identifyelement=\"443\">4. Go to the \u201cGrowth Tools\u201d tab and click \u201c+ New Growth Tool\u201d.<\/p>\n<p data-identifyelement=\"444\"><img loading=\"lazy\" decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/attachment.freshdesk.com\/inline\/attachment?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzYwMTY5MzgwNDksImRvbWFpbiI6Im1hbnljaGF0LmZyZXNoZGVzay5jb20iLCJhY2NvdW50X2lkIjo4MDYzODd9.zQcN9c30K6Qgvsop8jXG-3q4OUuRe9LcKROnbBxo5BU\" data-id=\"36016938015\" width=\"597\" height=\"204\"><\/p>\n<p data-identifyelement=\"446\">5. Scroll down and select \u201cCustomer Chat\u201d from the widget list.<\/p>\n<p data-identifyelement=\"447\"><img loading=\"lazy\" decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/attachment.freshdesk.com\/inline\/attachment?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzYwMTY5Mzg2MTMsImRvbWFpbiI6Im1hbnljaGF0LmZyZXNoZGVzay5jb20iLCJhY2NvdW50X2lkIjo4MDYzODd9.-X25pKAX_e0WJjT168PLAkxfOInyKO_Q35f7whEZ2lg\" data-id=\"36016938563\" width=\"456\" height=\"352\"><\/p>\n<p data-identifyelement=\"449\">\u201c6. \u201dCustomer Chat\" has 2 tabs:<\/p>\n<p data-identifyelement=\"450\"><strong>Opt-in action&nbsp;<\/strong>&nbsp;- The message that users will receive after clicking the button.<\/p>\n<p data-identifyelement=\"452\"><strong>Set up&nbsp;<\/strong>&nbsp;7. - Here you can get the code, authorize the website, and customize some useful settings.<\/p>\n<p data-identifyelement=\"454\">8. Change the name of the \u201cGrowth Tool\u201d so you don't miss it in the list, and move to the \u201cOpt-in\u201d message.<\/p>\n<p data-identifyelement=\"455\">9. First - you must create an \u201cOpt-in\u201d message, or you can use an existing message.<\/p>\n<p data-identifyelement=\"456\">10. 1. Click \u201cEdit\u201d to start working in the Builder to create a new \u201cOpt-in Flow\u201d.<\/p>\n<p data-align=\"left\" data-generated-at=\"15154120205710.49465096157864785\" data-id=\"block-ember2559\" data-identifyelement=\"457\">11. The process is almost the same for creating any other ManyChat message. But please note that according to the new Facebook rules, a user only becomes a subscriber when they respond to content by clicking a button or sending a manually typed message. Therefore, ManyChat cannot directly subscribe users to the \u201cOpt-in\u201d sequence. Please add at least one button to your \u201cOpt-in message\u201d and operate the button as needed to subscribe to the sequence.<\/p>\n<p data-identifyelement=\"458\"><img loading=\"lazy\" decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/attachment.freshdesk.com\/inline\/attachment?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzYwMTY5Mzk5MjYsImRvbWFpbiI6Im1hbnljaGF0LmZyZXNoZGVzay5jb20iLCJhY2NvdW50X2lkIjo4MDYzODd9.6yfpxpuHMzT2vy0wGyP8x7y5cN7Y7qZC_woWe5wytpQ\" data-id=\"36016939871\" width=\"586\" height=\"456\"><\/p>\n<p data-identifyelement=\"460\">12. Or use the second option:<\/p>\n<p data-identifyelement=\"461\">13. 2. Click \u201cReplace\u201d and then select an existing flow.<\/p>\n<p data-identifyelement=\"462\"><strong><em>14. Be careful! Selecting a flow does not copy it, but simply attaches it to the new point.<\/em><\/strong><\/p>\n<p data-identifyelement=\"465\">15. When you edit the flow, it will change at each attached point. (For example, if used as a message in multiple sequences). To edit separately, copy the flow and attach the copy.<\/p>\n<p data-identifyelement=\"466\">Once you have completed the select join message, you can open the \u201cSettings\u201d tab.<\/p>\n<p data-identifyelement=\"467\"><img decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016940563\/original\/fwbeDsgNLzQMC0Ba8W_ToIFcLV1JunmrJw.png?1537857667\"><\/p>\n<h2 data-align=\"left\" data-generated-at=\"15154120205700.8445536009050361\" data-id=\"block-ember2539\" data-identifyelement=\"469\">16. Install the code on your website<\/h2>\n<p data-align=\"left\" data-generated-at=\"15154120205720.7694401678874287\" data-id=\"block-ember2584\" data-identifyelement=\"470\">Click \u201cInstall JavaScript\u201d and add your website here:<\/p>\n<p data-identifyelement=\"471\"><img decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016940834\/original\/sjnsePE8vQaToaofcQzPEbwoJyb9zkyCrA.png?1537857810\"><\/p>\n<p data-identifyelement=\"473\">Then click \u201cNext\u201d and copy the JS code. You need to place it in the  of every page on your website.<\/p>\n<p data-identifyelement=\"474\"><img decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016940890\/original\/DVtZYEIbYmJfc9WhFCRmvTufEMwvY3jfLA.png?1537857848\"><\/p>\n<p data-identifyelement=\"476\">17. Click \u201cDone\u201d and then select the visibility settings.<\/p>\n<p data-identifyelement=\"477\">18. By default,<strong>19. the overlay widget will be displayed on all websites where the summary is installed.<\/strong>All websites of<strong>All Pages<\/strong>On.<\/p>\n<p data-identifyelement=\"479\"><img decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/attachment.freshdesk.com\/inline\/attachment?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzYwMTY5NDE0NTksImRvbWFpbiI6Im1hbnljaGF0LmZyZXNoZGVzay5jb20iLCJhY2NvdW50X2lkIjo4MDYzODd9.M7lC9GhWXCDOv8Mqui3wbSwE0oyA-kaFUzqHfRYVBYg\" data-id=\"36016941373\"><\/p>\n<p data-identifyelement=\"481\">you can use it<strong>\u201cShow only on these pages\u201d<\/strong>Set up to specify the exact pages where the widget should be displayed.<\/p>\n<p data-identifyelement=\"483\">If using<strong>\u201cHide on these pages\u201d<\/strong>setting, you can also hide the widget so it does not appear on certain pages<strong>on<\/strong>.<\/p>\n<p data-identifyelement=\"485\">You can even mix these settings to show the widget only on a specific site while hiding it on certain pages of that site.<\/p>\n<p data-identifyelement=\"488\"><strong>It's time to customize the appearance of the customer chat!<\/strong><strong>&nbsp;<\/strong><\/p>\n<p data-identifyelement=\"492\">Here, you can change the color of the chat bubble to match your website style.<\/p>\n<p data-identifyelement=\"493\"><img loading=\"lazy\" decoding=\"async\" class=\"fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016942077\/original\/49CVXajWhNjTldJCZbFSgMkgtFu8988jlw.png?1537858532\" width=\"691\" height=\"410\"><\/p>\n<p data-identifyelement=\"495\">Set greetings for logged-in users and greetings for logged-out users to create a better experience for your customers. You can add a bit of creativity here :)<\/p>\n<p data-identifyelement=\"496\"><img decoding=\"async\" class=\"fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36016944113\/original\/lkSqcJVrDdBvEShx75jizi9U2C_gH9yxkA.png?1537859628\"><\/p>\n<p data-identifyelement=\"498\">Next are some settings about when and on what devices the \u201ccustomer chat\u201d appears. Perhaps you want the widget to be visible only on desktop, or you need a delay before the chat bubble pops up - in this section, you can choose the options that best suit your website.<\/p>\n<p data-identifyelement=\"499\"><img decoding=\"async\" class=\"fr-fic fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36057662666\/original\/58AeDesVIGgSXrD8Kajtmki6VBtyDT0GbQ.png?1581064646\" data-id=\"36057662666\"><\/p>\n<p data-identifyelement=\"501\"><strong>Note:<\/strong>Don't forget to save changes and enable the widget.<\/p>\n<p data-identifyelement=\"503\"><img decoding=\"async\" class=\"fr-dib\" src=\"https:\/\/attachment.freshdesk.com\/inline\/attachment?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzYwMTY5NDQ4MjIsImRvbWFpbiI6Im1hbnljaGF0LmZyZXNoZGVzay5jb20iLCJhY2NvdW50X2lkIjo4MDYzODd9.MJrRi7H0KQR79gvauXx8GP9w3-NdOTbCDhy2u1HPZqo\" data-id=\"36016944757\"><\/p>\n<p data-align=\"left\" data-generated-at=\"15145533620200.4376328137385166\" data-id=\"block-ember2694\" data-identifyelement=\"505\"><strong>Remove the ManyChat logo from the growth tool and change localization in settings<\/strong><\/p>\n<p data-align=\"left\" data-generated-at=\"15145533620200.4376328137385166\" data-id=\"block-ember2694\" data-identifyelement=\"507\">Pro ManyChat Pro users can remove the logo from their growth tools in account settings:<\/p>\n<p data-align=\"left\" data-generated-at=\"15145533620200.4376328137385166\" data-id=\"block-ember2694\" data-identifyelement=\"508\"><img decoding=\"async\" class=\"fr-dii\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36015705159\/original\/n6ZxV15eeDwB46Vqog_WuUUw3pXVRx3cag.png?1536594861\"><\/p>\n<p data-identifyelement=\"510\">Now you're ready to grow! Hope this helps!<\/p>\n<p data-identifyelement=\"511\"><strong>Note:&nbsp;<\/strong>If you are using the Facebook SDK, make sure to replace sdk.js with sdk\/xfbml.customerchat.js - starting January 8, 2019, it is necessary to use this library to render the customer chat plugin on your website.<\/p>\n<p data-identifyelement=\"513\">Additionally, there is currently no [x] button to close the popup:<\/p>\n<p data-identifyelement=\"514\"><img decoding=\"async\" class=\"fr-fic fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36036087484\/original\/h3IamUMBnvJbjZwaDZzNHIGCVNU_nIw0Sg.png?1558038344\"><\/p>\n<p data-identifyelement=\"516\">To close it, you need to click on the chat bubble. You can still close the chat window in the usual way:<\/p>\n<p data-identifyelement=\"517\"><img decoding=\"async\" class=\"fr-fic fr-dib aligncenter\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36036087615\/original\/K3NCiUXft17PT9WUTVnPhabfd2jJEFE4Ng.png?1558038541\"><\/p>","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u5c07\u5e6b\u52a9\u60a8\u70ba\u7db2\u7ad9\u8a2d\u7f6e\u201c\u5ba2\u6236\u804a\u5929\u201d\u589e\u9577\u5de5\u5177\uff0c\u4e26\u5c07\u60a8\u7684\u8a2a\u554f\u8005\u8f49\u63db\u70baMessenger bot\u8a02\u95b1\u8005\u3002\u4f7f\u7528Many [&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-845","docs","type-docs","status-publish","hentry","doc_category-manychat-basics"],"year_month":"2026-04","word_count":46,"total_views":"1814","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\/845","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":3,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/845\/revisions"}],"predecessor-version":[{"id":5986,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/845\/revisions\/5986"}],"wp:attachment":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_category?post=845"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_tag?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}