Updated on: 26/05/2020
We have improved the agent and code to fix below issues:
- Made the Currency of the store dynamic. Earlier it was Dollar by default.
- In Google Assistant, if only 1 item was there in the list then that was creating issue. Fixed it by using combination of Card and Suggestion chips.
- If no image was set for product then by default it was taking last image of the product. Now, it will be displayed blank.
- Other small fixes.
The proliferation of chatbots is growing at an unprecedented rate. An increasing number of businesses are looking forward to reach to their customers on chat channels like Google Assistant, Facebook Messenger, Amazon Alexa, WhatsApp, Telegram and others. And it totally makes sense to offer products/services on such additional chat channels via chatbots if the business is already there on the Website or Mobile App.
As the bots are getting advanced day by day, chatbot e-commerce is expected to rise. One such example: Google Assistant now enables users to complete the payment without leaving Google Assistant. Developers can easily integrate the payment in the chatbot using Transaction API offered by Google Assistant. Another example is Account Linking. Now user can link their account on our website with Google Assistant and Facebook Messenger.
To ride the e-commerce wave in chatbot, we have created this project to turn your Magento 2 website into a chatbot using Dialogflow. Dialogflow is a robust chatbot development platform having tremendous Natural Language Processing (NLP) capabilities.
Using this chatbot, users can browse categories, browse products or search for products on Google Assistant or Facebook Messenger. No need to install any extension to make it work. Just need API access of Magento 2 website.
Have a look at the demo video of the Magento 2 Chatbot:
We are making this script open source, so anyone with experience in Python + Django can use the script, create the Dialogflow Fulfillment (webhook) and connect with the Dialogflow agent to have their own chatbot that will work on Google Assistant and Facebook Messenger.
Turn your Magento 2 store in Chatbot For Google Assistant & Facebook Messenger
It is assumed that you already have Magento 2 website running. This tutorial will work for Magento version 2 only if you have Magento 1.x then kindly consider upgrading it.
Now to set up chatbot, there are two parts of the process
- Webhook setup
- Dialogflow agent creation
- Set Fulfillment URL
1. Webhook Setup
We are using Python + Django to create the webhook for Magento 2 Chatbot. Follow the steps as below:
Django application
Setup a new Django application.
Clone GitHub repository
You can clone our GitHub repository at any place outside of the Django project.
To clone this repository, run below command:
$ git clone https://github.com/pragnakalp/magento2-website-to-chatbot.git
Changes in the downloaded code
To use the cloned code from the repository, we need to do some changes. Follow the below instructions to use the code.
- Copy code from the views.py file of cloned repository to your Django application’s views.py file.
- Copy below code in the urls.py located in your Django project folder. And replace ‘magento_app’ with the name of your Django app’s name.
from django.contrib import admin
from django.urls import path
from magento_app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('home/', views.home, name='home'),
path('webhook/', views.webhook, name='webhook')
]
- Open admin panel of the Magento 2 and follow system > Integrations > Add New Integration. Fill general information and user identity verification and also access all the APIs. After adding integration, copy Consumer Key, Consumer Secret, Access Token, Access Token Secret.
- Now create one python file inside of the Django project with the name variables.py and define below variables in the file.
client_key = u"consumer key"
client_secret = u"consumer secret"
resource_owner_key = u"Access token"
resource_owner_secret = u"access token secret"
base_url_v = "Give your site's base URL"
store_name = "Set your store name here"
app_name = "your django app name"
- Now files from the cloned repository with name df_lib.py and df_facebook.py move to your applications directory.
- Create a folder with the name ‘library’ in your Django project and download files df_response_lib.py and facebook_template_lib.py from here.
- Files structure should look like below:
- Django_project
- Django_project
- magento_app
- df_facebook.py
- df_lib.py
- views.py
- library
- df_response_lib.py
- facebook_template_lib.py
- variables.py
2. Dialogflow Agent creation
We have provided the zip of agent in the repository itself. You can create an agent on Dialogflow and import the zip file – Magento_Chatbot_V1.zip
To import the dialogflow agent download the zip file of the agent and import this file to dialogflow agent by going to: Settings(
) > Export and Import > Import From Zip and provide path to your downloaded zip file.
After importing the agent we’ll need to change the Fulfillment URL but for that, we need to set up a webhook first.
3. Set Fulfillment URL
To connect this Django application with the DialogFlow, we will need a fulfillment URL. You can use your already created URL or can create using NGROK.
Download ngrok and run following command to generate URL.
ngrok http 8000
You should get output look like below.
Copy the generated URL and paste in the ALLOWED_HOSTS of the file settings.py of the Django project.
ALLOWED_HOSTS = ["5ab64856.ngrok.io"]
Also, paste this URL as the DialogFlow fulfillment URL by setting to Fulfillment > Webhook > URL section with webhook path. (Make sure to add “/” at the end of the URL)
Now run the Django application using below command.
python manage.py runserver
If you didn’t get any error then Hurray!!! You will be able to start browsing products with more human-like chatting experience.
Publishing bot on Google Assistant and Facebook Messenger
Now your Dialogflow agent and webhook is all setup. Time to publish the bot on Google Assistant and Facebook messenger.
Follow our tutorial Dialogflow Tutorial – Build Resume Chatbot For Google Assistant (Part-2) to test, configure and submitting your chatbot for review on Google Assistant.
Follow our tutorial Dialogflow Tutorial – Create Facebook Messenger Bot Using Dialogflow Integration to make your bot accessible on your Facebook Messenger page.
Feel free to comment your doubts/questions. We would be glad to help you.
If you are looking for Chatbot Development services or to setup Magento Chatbot for your Magento store then do contact us or send your requirement at letstalk@pragnakalp.com. We would be happy to offer our expert services.
