You can implement our platform in your store using this guide, which is prepared for developers and requires technical skills in JavaScript and server development - that is why we strongly recommend reading our help article about API here.
To make ManyChat work friendly with your store, you need to create a two-way integration between our service and your store platform. Please note that you’ll need your own web servers to proceed API requests and keep the data. In the article, we’ll see the main points of ManyChat implementation.
Add Checkbox widget to the product page
Firstly, you need to opt your store visitors in to the bot and make them your contacts. The most popular way is to add Facebook Checkbox widget to the product page under the Add to cart button or to the cart page under the Checkout button.
You will find the embed code on the site when creating the new Growth Tool - Checkbox. More information about how to work with this widget is available in our GitHub repository, and in our help article about widgets.
Get user ref
To identify a Facebook user, please use the method MC.getWidget({widget_id}).ref after the ‘checked’ event. Read more about core methods here.
Note: you should have an active Opt-in when a user confirms checkbox login. More information about checkbox plugin can be found here. Before the Opt-in is confirmed, you're able to send content by user ref , but you can't add tags to this contact.
After the Opt-in is complete, you’re able to use GetInfoByUserRef method to get user id and other contact data.
Send Message, Add or Remove Tags
Now, you can send messages to or manage tags for your new contacts. The full list of available API methods is here.
Sample Flow for Abandoned Cart
This flow is just our simple example, and you’re free to do anything you want. In our case, we wanted to create a new Checkbox Growth Tool and head to the Opt-in flow.
Firstly, we need to add a button to the starting message that prompts people to subscribe. This is very important because if the customer doesn't tap a button in Messenger, ManyChat will not be allowed to add tags or send sequences to this contact.
Next, we use a 1 hour Smart Delay to see if a visitor completes their order by then.
It will be perfect if your integration can get order status events for the customer, and set a new tag in ManyChat. There is an API method to add tags to the contact called AddTag.
So, we check if the tag “order_complete” has been added to the customer, and send the Abandoned Cart message or the “Thank you for the order!” message.
