Getting started with Dialogflow Messenger

Dialogflow Messenger Bots Getting started with Dialogflow Messenger

In this tutorial, I explain how to add a chatbot to your website using the Dialogflow Messenger integration.

What we will be building

The video below shows what we will be building in this tutorial.

Embed the chat widget into your website

Embedding the chat widget into your website is straight-forward.

Create your Dialogflow agent

Create a new Dialogflow agent, and remove the Welcome event from the Default Welcome Intent.

Add a new intent into your agent with the following information (note that it includes the Welcome event).

Add the script to your web page

Once you create your welcome intent, go to the Integrations pane, and select the Dialogflow Messenger integration.

Now copy the script into your clipboard.

Paste the script you copied into the <head> tag of your HTML page.

If you have a WordPress website, you cannot add JavaScript like this directly into your webpage.

In that case, use a plugin like Insert Headers and Footers and add the script into the “Scripts in Header” section.

Using the Insert Headers and Footers plugin to add the script

WordPress Gutenberg Update

With the release of Gutenberg, you can now simply add HTML code blocks directly into a page. So add a HTML block in Gutenberg and paste the script you copied from the Dialogflow console directly into the editor.

You can use the custom HTML block in WordPress Gutenberg and paste your script directly into the page

Test the integration

When you open the page in your browser, you will now see the chat widget at the bottom right of your web page.

Now click on the welcome message, and you should see the below.

Back to Course

Next Lesson