Home / DialogFlow / Website Bots / Seven ways to integrate a Dialogflow chatbot into your website
DialogFlow | Website Bots

Seven ways to integrate a Dialogflow chatbot into your website

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.

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.

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.

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.

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.

The video above is an excerpt from a webinar I conducted recently. You can watch the full webinar recording for free here.

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).

Clickable Hyperlinks

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.


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.


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.

Factors to consider

I recently did a webinar which explained a list of factors to consider when choosing one of these integration options.

Here is what the final scorecard looked like (slide #32):

Not all factors will be relevant for your specific use case, but it is good to know about them before building your bot.

You can register for free to watch the webinar recording by clicking on the preview image below.


When you are creating a website chatbot using Dialogflow, you should evaluate all your options, and create a checklist with the set of features you want. Then you can assess whether you can do all the items on your checklist using the different types of integrations I have explained here.

As you can see, unless you want to hire a developer to build a custom integration, my recommendation would be to use Zoho SalesIQ.

What you will find is that building your own custom integration will be the most flexible option, although it is also going to be most expensive in terms of time and money cost.

Interesting side note:

At the end of the webinar, one of the attendees said that my presentation convinced him that building a custom integration was the correct option! Obviously, this isn’t a one size fits all analysis, since different factors carry different weights.

If you would like to learn how to build your own custom integration, check out my detailed article on integrating a Dialogflow chatbot into your website.

Related Posts

  • I’d like to note that you can also use Dialogflow Messenger integration so you don’t have to use any kind of workaround to show rich responses like, pictures, links, files, buttons, etc…

    • Unlike all the other suggestions, this is a very painful option right now given that Facebook has to first approve your bot. And they can bring down your bot any time without due warning. Effectively, you are now at Facebook’s mercy to have a bot running on your own website, and based on the recent scandals, I can only imagine this approval process getting harder over time.

      So I don’t recommend this option at all for a website-based bot.

    • Logan – My apologies! I now realize that you were referring to the Dialogflow Messenger option which allows you to create a website chatbot more easily and is more customizable than the 1-click web demo! Since quite a few people also referred to the “FB Messenger on your website” option as Dialogflow Messenger in earlier communications with me, I got confused when you mentioned this.

      To everyone reading the comment, please refer to this new feature. I believe this was released around mid-March 2020.

  • This tutorial was very useful. I was trying to add an image as a reply in BotCopy. Finally this worked. Thanks a lot!