Dialogflow Website Chatbots

In this article I explain the different ways you can integrate Dialogflow into your website and how the specific type of integration will allow you to add rich responses inside your chat window.

Seven ways to add a Dialogflow chatbot to your website

August 2020 Update:

There are now seven ways to integrate a Dialogflow chatbot into your website.

1 Use the built in 1-click web demo integration

For example, here is a “tell me a random Chuck Norris joke” bot 🙂 I have built using the 1-click web demo integration.

2 Use the Dialogflow Messenger integration

A while back, Dialogflow created the Dialogflow Messenger integration as a much needed improvement over the 1-click web demo integration. You can see a screenshot below.

Go to Dialogflow Messenger Tutorial

3 Add Dialogflow to a live chat system like Zoho SalesIQ with a 1-click integration

Zoho SalesIQ Live Chat allows you to integrate with Dialogflow using a single click.

Below, you can see a screenshot of a demo bot I created on this website which uses the 1-click integration with Dialogflow.

Go to Zoho Live Chat Integration Tutorial

4 Add Dialogflow to a live chat system like Drift using a custom integration

Not all live chat services provide a 1-click integration with Dialogflow (in fact, only a handful of them do).

But most of these live chat services expose an API which allows you to integrate any NLU based chatbot you want, often using the concept of webhook registration:

a) user types a message into the live chat widget

b) the live chat service forwards the message details to a webhook URL you have previously registered

c) the webhook URL runs some code which relays the message to Dialogflow and returns the response in a format specified by the live chat service. Note that you will be writing this code by yourself if you are building a custom integration

d) the response from the webhook URL is displayed inside the live chat widget

I have implemented a demo integration for Drift + Dialogflow, and I do not recommend it anymore. It is cumbersome, but more importantly, Drift doesn’t make it easy for the developer to create the custom integration.

Zoho SalesIQ also supports integrating with Dialogflow using its Webhooks integration, so if you need a custom integration, I would recommend them instead.

5 Use a hosted SaaS

You can also use a hosted SaaS like BotCopy for this integration. Below, you see a screenshot of an example bot I have built using BotCopy which helps people find individual videos from my courses.

Go to BotCopy tutorial

6 Build your own custom integration

While building your own custom integration is the most expensive in terms of time and money, it is also the most flexible (obviously). If your bot has very specific requirements (such as very specific, custom input controls) then you will have to build out your own integration.

Below you see a screenshot of an example bot I built using a custom integration.

Go to Custom Integration Tutorial

7 Use a WordPress plugin (least preferable)

I am not a fan of this option. WordPress plugins often obscure the conversation flow by inserting their own custom actions, and make it very hard to make full use Dialogflow’s existing NLU features.

I haven’t created any proof-of-concept chatbot based on WordPress plugins, because I am not yet convinced of their value for NLU powered bots.

Rich Responses

Next, we will take a look at how you can add various rich responses in your Dialogflow website chatbot.

Rich Responses = Rich Content + Rich Controls (see the Section called Factors to Consider for a definition).

One of the most important requirements in an FAQ chatbot is the ability to add clickable hyperlinks.

1-click web demo integration – does not support clickable hyperlinks

Dialogflow Messenger – supports clickable hyperlinks

BotCopy – you can use the Link Out Suggestion inside Dialogflow to create clickable hyperlinks which have anchor text. However, this means you cannot display inline anchor text links, and you cannot have multiple hyperlinks in a single response. BotCopy automatically converts all hyperlinks in text responses into clickable ones – but remember that these will show the entire link and will not have any anchor text.

Here is what the output looks like inside my LessonFinder bot:

Zoho SalesIQ Live Chat – you can add hyperlinks by adding a custom response object into the Custom Payload section under the Intent.

Which will render this:

WordPress plugin – see section “Rich Responses in WordPress plugins”

Custom Integration – you can specify the hyperlink in regular Markdown, and your Markdown parser library will automatically convert it into appropriate HTML to be sent to your chat widget. In other words, in terms of flexibility, this is your best option.

Buttons

Using buttons will make your website chatbot more interactive.

1-click web demo integration – does not support buttons

Dialogflow Messenger – supports buttons

BotCopy – you can add buttons by using the Suggestion Chips response type inside the Google Assistant tab.

The text inside the Suggestion Chips will show as buttons within the chat widget.

Zoho SalesIQ – you can create buttons using the custom payload in the same way as before.

Which will render this:

WordPress plugin – see section “Rich Responses in WordPress plugins”

Custom integration – in a custom integration, you can convert the Google Assistant suggestion chips into the appropriate buttons.

Line breaks

Adding line breaks is crucial to make your bot’s response more readable.

1-click web demo integration – does not support line breaks

Dialogflow Messenger – supports line breaks

BotCopy – you can add line breaks by using the regular line break tag (<br/>) within the Simple Response text block and the Basic Card response type. BotCopy supports a limited subset of HTML in these response types.

Zoho SalesIQ – supports line breaks.

WordPress plugin – see section “Rich Responses in WordPress plugins”

Custom integration – in the custom integration, you will use regular line breaks inside the Dialogflow response block (to do this in Dialogflow, use SHIFT + ENTER). This will actually become a line break character (\n) which your Markdown parser library will automatically convert into an actual line break in the HTML.

Images

Adding images can make your chat responses easier to read, and sometimes the images can also be used to explain things (e.g. screenshots explaining how something works).

1-click web demo integration – does not support images

Dialogflow Messenger – supports images, but they occupy full chat window width and you cannot specify custom sizes

BotCopy – you can display images in BotCopy by using the Basic Card Google Assistant response type.

Zoho SalesIQ – supports images, but you cannot specify custom sizes.

WordPress plugin – see section “Rich Responses in WordPress plugins”

Custom Integration – there are a couple of ways to display images inside the chat window.

You can use the basic card type and it will display an image.

Or you can also display an image by simply specifying it inline in Markdown format within the text response. The obvious advantage with this approach is that you can display as many images as you would like within the chat window. (The Google Assistant response type allows a maximum of 1 basic card per response).

Remove “Powered by Dialogflow”

1-click web demo integration – you cannot remove the “Powered by Dialogflow” in the 1-click web demo integration.

For all the other types of integrations, you do not have to worry about this problem.

Rich Responses in WordPress plugins

Unfortunately, the WordPress plugins I have reviewed till now have not documented this (adding rich responses in the chat widget) very well in their knowledge base. If you are a plugin author, and you feel like I might have missed it, please leave a link below in the comments about where people can find this information.

In the course, I cover this topic in more detail using specific examples.

Course Content

Expand All
Custom Integration
Dialogflow Messenger
Integrate Dialogflow with Zoho Live Chat
BotCopy Example Bots
Lesson Content
0% Complete 0/3 Steps
Lesson Content
0% Complete 0/3 Steps
Lesson Content
0% Complete 0/3 Steps
Lesson Content
0% Complete 0/3 Steps
How to Choose