Chatbot is computer program which simulates human conversation through voice or text commands. Now days every website contains chatbot (virtual assistant) that can be available anytime for better user experience, improve customer services, user engagement and capturing interest. We are going to use Google’s dialogflow API for developing chatbot which include Following 5 simple steps. 1. Create google project. 2. Dialogflow setup and agent creation. 3. Create intent (question answer tree) 4. Integration 5. Customization # 1. Create google project. First you need to create google project. If you already have one then you can skip this step. You can create it from [here](https://console.developers.google.com/project) as below. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ume4c349ikce18k3z2b.png) # 2. Dialogflow setup and agent creation. Dialogflow is a natural language understanding platform that makes it easy to design and integrate chatbot. It is open source and free (Standard Edition). Go [here](https://dialogflow.cloud.google.com/) and login using your gmail. After successful login you need to create agent for your chatbot using `create agent` button. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uaye242mwxfhmmuzeeq5.png) To create new agent, type name of agent, select language and time zone, select google project ID that we created in step 1. And create your agent. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/62nctn6reuzyxgum35sl.png) # 3. Create intent (Question answer tree) After agent creation, next step is to design question answer tree for chatbot. For that we need to create intent. When we create agent, two intent are created automatically which are * **Default Fallback Intent:** which is use when chatbot not able to recognise user question. * **Default Welcome Intent:** to greet user when he starts conversation with chatbot. Note that we can change chatbot response by editing these default intents. To create new intent click on `CREATE INTENT` button, ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d11ugyx4bqn9lv7h10ci.png) Here I am creating a new intent named **myself**, which will be use when user ask questions like *What is your name?* *Tell me about yourself?* *Who are you?* In `training phrases` field, you can add all possible questions that user can ask as below. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ocuh9zlogxkg7gtj79oz.png) In the `responses` field you can add response given by chatbot. We can add more than one reply to display verity of answers and to increase user interest. And click on `SAVE` button to save the intent. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4joavzew3pwqpsfvxl11.png) There are other fields like `contexts`, `events`, `action and parameters`, `fulfilment`. I am keeping these fields empty. You can make use of them according to your requirement. We can create multiple intents to build complete question answer tree. We can make use of test console (on right side) to test our intent. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g098xl3cyzhyyxihlw69.png) # 4. Integration After designing question answer tree using intents, now it is time to integrate chabot with website. Click on integrations option from vertical navigation bar. For web integration we are going to use **Dialogflow Messenger**. To use Dialogflow Messenger, first enable it and get integration code by clicking on it. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/356wfzfwhllbuvd685ih.png) ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e79l37gocpnd3ubb90tl.png) Copy above code and paste it in your webpage html code. As below ```

Chatbot Integration

``` Before running make sure to Start a local HTTP server for that page. with a specific port. (I am using apache). Yup!!, you can see chat widget appear in right bottom corner, test it. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/euupbkx0n87j323fnb9c.png) ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sedrq53tqpbl48muju83.png) > But wait! How to customize style of chatbot? # 5. Customization You can customize the style of your chatbot by setting following css variables, [know more](https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger) ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n91w6d406gunxq7b5md4.png) Example: ``` ``` You can customize various aspects for how the chat dialog appears and behaves. The `df-messenger` HTML element has the following attributes: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fz18hcaz6hc6khclfnh7.png) Example: ``` ``` After above css and html customization chatbot looks like, ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsorjzioul11222fj7rc.png) Hurrey! This way you can integrate, customize dialogflow chatbot with your own website. **NOTE:** You may face issue related to chatbot container hight like below. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w9ht5c3wgkmoqdy20k29.png) As there is no css variable mentioned in documentation to customize height, we need to add below code into head tag, ``` ``` *Hope this article help you!* Important links: [Dialogflow Documentation] (https://dialogflow.cloud.google.com/) [CSS and HTML Customization and integration] (https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger)

ketan_patil

Chatbot for your website using Dialogflow

Join Our Newsletter. No Spam, Only the good stuff.