Create an AI Chatbot for Social Media E-Commerce Recommendations (Free Template)

Table of Contents

1. Introduction
2. Building an E-commerce Product Recommendation Chatbot
   1. Using Voiceflow for the Template
   2. Setting up ManyChat
   3. Creating an Airtable URL
   4. Generating an Airtable Query
   5. Setting Variables in Voiceflow
   6. Setting Variables in ManyChat
   7. Using Make.com for Sending Variables to ManyChat
   8. Automating the Process in ManyChat
   9. Using Google App Script for Message Processing
   10. Checking for Product Value
   11. Displaying Products on Instagram and Messenger
3. Conclusion

Building an E-commerce Product Recommendation Chatbot

In this article, we will discuss the step-by-step process of building an e-commerce product recommendation chatbot within Facebook Messenger as well as Instagram. We will be using Voiceflow, ManyChat, and Make.com to make this chatbot come to life. The setup is similar to the product recommendation chatbot built in a previous video, but now we will be converting it into a Facebook Messenger and Instagram supported system.

Using Voiceflow for the Template

To begin, we will start by creating a template in Voiceflow. The template will include a capture block for the last utterance, which is necessary for setting up ManyChat. We will also include a response block to answer the user's first message and Prompt them to specify the product they are looking for. The user's reply will then be captured and sent to set the Airtable URL.

Setting up ManyChat

Next, we will set up ManyChat by creating an API key. This key will allow us to access the data from Airtable through Voiceflow. We will generate an Airtable URL and create an Airtable query, which will help us retrieve the products or properties we need for the chatbot. By setting the number of responses, we can control how many products will be shown to the user.

Creating an Airtable URL

To create an Airtable URL, we need to sign up for an Airtable account and copy the base provided in the template. We then need to create an API key and add all the necessary scopes and permissions. Once the key is created, we can copy it and save it for later use. We will then access the web API documentation, copy the URL, and paste it into the Airtable URL variable in Voiceflow.

Generating an Airtable Query

To generate an Airtable query, we will use a formula that takes into account the user's question and other Relevant variables, such as the category and color of the product. This formula will help us retrieve the right products from Airtable. We will set up a logic flow to handle cases where the query is not valid or no results are found.

Setting Variables in Voiceflow

Once we receive the response from Airtable, we need to set the variables in Voiceflow. These variables will store information such as the product name, price, image, and count. We will use JavaScript code to extract the necessary data from the JSON response and assign it to the variables. We will then use these variables to send the data to ManyChat.

Setting Variables in ManyChat

In ManyChat, we will create variables for each product and assign the data received from Voiceflow to these variables. We will store the product name, price, image, and count for each product. By checking the product count, we can ensure that the variables are set correctly and avoid any errors.

Using Make.com for Sending Variables to ManyChat

Now we will use Make.com to send the variables from Voiceflow to ManyChat. We will set up the web hook URL in Make.com and store the necessary data in the body of the request. By sending the variables to ManyChat, we can use them to display the product information to the user.

Automating the Process in ManyChat

In ManyChat, we will automate the process of displaying the products to the user. We will create a flow that starts when the user sends a direct message. We will check if the user exists and send them a message accordingly. We will also check if the product name has any value and display the products using a carousel feature in Instagram or Messenger.

Using Google App Script for Message Processing

To format the response from Voiceflow in a usable way, we will use a Google App Script. This script will process the message and prepare it for use in ManyChat. We need to deploy the script as a web app and retrieve the URL, which will be used in ManyChat as the response mapping URL.

Checking for Product Value

To ensure that the chatbot only displays products that have been found, we will check if the product name has any value. If it does, we will proceed to display the products to the user. We will use conditions to handle different cases depending on the product count.

Displaying Products on Instagram and Messenger

Finally, we will set up the display of products on Instagram and Messenger. We will use variables and the data stored in ManyChat to populate the carousel feature with the product information. By using delays and conditions, we can handle different numbers of products and ensure a smooth user experience.

Conclusion

In this article, we have discussed the process of building an e-commerce product recommendation chatbot within Facebook Messenger and Instagram. We have explored the use of Voiceflow, ManyChat, and Make.com to create the chatbot and automate the process of retrieving and displaying product information. By following the step-by-step guide, you can create your own chatbot that offers personalized product recommendations to users.