How To Add Dialogflow to Your Website (DialogFlow Messenger)

In this video, I will explain how you can add a Dialogflow agent to your website by using Dialogflow Messenger.

I will show you:
- How to add a Dialogflow agent to your website
- Customize the Dialogflow Messenger widget
- Trigger a custom Dialogflow intent
- Show different Dialogflow intents per page

If you want more videos on how you can use chatbots in your marketing, subscribe to my channel👇

---

To choose your colors, you can just google “html color picker”.

---

Change icon of Dialogflow widget
You can actually change the icon of the Dialogflow widget by setting the "chat-icon" attribute in HTML to the URL of your icon. This icon should be 36 by 36 pixels.

----

Contents:
Intro: (00:00)
Add Dialogflow to your website: (00:25)
Customize the Dialogflow widget: (01:56)
Trigger a custom intent: (02:42)
Change colors of Dialogflow widget: (03:37)
Show different Dialogflow intents per page: (04:57)

[erwanngueguen]

thanks for the video, do you know how can i change the size of the dialogflow window on the website ? That's way too big on the phone

[ManuelDLR-ho]

Is it possible that this code is no longer working? for me the colors did not change and the pop up window does not open.

[Matococ]

Hi. I managed to create a chatbot that sends emails. But I don't know how to set the antispam function, or that users could send only one email per day. Do you have any ideas if it's possible ?

[davidwalters]

Thanks for this video. I see I can create different environments in Dialogfow settings. How do I integrate Dialogflow Messenger development environment into our development site and Dialogflow's production environment onto our production site so if I have to make changes to the chatbot in the future, it's not automatically active on the production site? I'm seeing that I can activate only one environment at a time.

[sehilichaima]

How did you manage to make the agent initiate the conversation ?

[tlchua]

The chatbot restarts when user clicks on a hyperlink that directs to another page. Any way to keep the chatbot conversation alive between pages?

[lutfiazahra]

Hey, do you know how to modify or customize height of the chatbot so the chatbot doesn't overlap with the navbar ?

[businessmarketingtips]

Hi Joren,
do you have any idea allow the dialogue flow icon to display a small hint on top of the icon? instead of fully open the chatbot. e.g. Need Help? click here.

because when we insert the expand="true"
on desktop and tablet view no problem

but on mobile view,
the chatbot will cover all the screen.

Thanks

[gmedpi]

Hi, the chatbot is appearing and text can be written but it is not responding. Only seeing '...' in the chat window. The Web Demo works, Messenger doesn't. Do you know what might be causing that? Thanks in advance.

[SandeshBLS]

How can i add mic and speech input in dialogflow messenger integration s show in video

[RichardJucewicz]

Awesome! thx! And how can we get rich messages on our website using dialogflow messenger?

[muhamedkozic]

Hi. How can we save that responses from users to somewhere? (To database). That is very important. Because, without this, then dialogflow is totally useless.

[ayesharahman]

Bro I want to change the icon and use clickable buttons how can I do so?

[alexislucerofredes]

hi friend, i added dialogflow messaging code on my wordpress site but it doesn't work for me, when i inspected the item the console threw me this error: "Failed to load resource: the server responded with a status of 404 (Not Found)" how can i fix it? Greetings

[manikumar-vrkp]

hey i need your help
its not working

[dayanize]

Hello friend, por favor podrías ayudarme como puedo hacer para disminuir el tamaño de la interfaz grafica del chatbot y cambiar de icono al chatbot en wordpress, agradeceria tu respuesta....por favor pliss