How To Add Dialogflow to Your Website (DialogFlow Messenger)

Подписаться 13 тыс.

Просмотров 12 тыс.

50% 1

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👇
/ @chatimize
---
Code to change the color of the Dialogflow widget and to add to your functions.php: chatimize.com/dialogflow-mess...
To choose your colors, you can just google “html color picker”.
You can change even more things in your widget, but all the variables are shown in the documentation of Dialogflow: cloud.google.com/dialogflow/e...
---
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)

Опубликовано:

28 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@erwanngueguen4954 Год назад

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

@chatimize 11 месяцев назад

Unfortunately, this is not possible. The window size is by default always the same and you cannot change it.

@davidwalters3479 Год назад

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.

@chatimize Год назад

I think you can find more information about that here: cloud.google.com/dialogflow/es/docs/agents-versions

@davidwalters3479 Год назад

@@chatimize Thanks for the information. This only gets me halfway there by creating the environments, but it looks like I can only have one environment active at time when using Dialogflow Messenger integration. I'm looking to have at least two environments active for Dialogflow Messenger, one for our dev site and one for our prod site, but it doesn't look like I can.

@heavens988 Год назад

Thanks alot

@chatimize Год назад

Glad I could help!

@businessmarketingtips1254 Год назад

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

@chatimize Год назад

I think this is currently not possible. What you can also do is add two widgets: one for desktop/tablet and one for mobile.

@businessmarketingtips1254 Год назад

@@chatimize thank for your reply.

@lutfiazahra2443 3 года назад

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

@chatimize 3 года назад

Unfortunately, Dialogflow Messenger doesn't provide the ability to set the widget to a certain height. Maybe you can try it by using some custom CSS (but I do not know if that will work).

@davidwalters3479 Год назад

@@chatimize I also am looking to adjust the height/width of the chatbot window and was hoping this video would show the best way how. I'm glad to see Lutfia comment about this. Is there any update on if this can be done since a year ago? The issue that I'm running into is that the copy of some intents is really long that a user may have to scroll up in the chat box to start from the beginning. That's not a good UX. I'm trying to find solutions that may help with that.

@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 ?

@chatimize Год назад

I don’t have any experience with using Dialogflow as an anti-spam function..

@botzforce8294 Год назад

how to use user-id

@chatimize Год назад

What user id do you want to use? And what do you want to use it for?

@MrEssenovanta 10 месяцев назад

How can I activate the wellcome intent only when the user lands on the site for the first time? I don't want the wellcome intent to fire every time the user switches pages in the site

@chatimize 10 месяцев назад

You need to handle this with code on your website. What you can do is store a cookie to check how many times a user opened your Dialogflow chatbot. Here is documentation on that: cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger

@sehilichaima9263 Год назад

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

@chatimize Год назад

I explain this in the “Trigger custom intent part” of the video

@BhaiyaZeeBro1997 Год назад

How to add icon in header

@chatimize Год назад

Unfortunately, it is not possible to add an icon in the header. You can only add a title there (which is by default the name of your Dialogflow agent).

@RichardJucewicz Год назад

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

@chatimize Год назад

You need to put it in the Response of the intent. Here is some documentation on how you can do that: cloud.google.com/dialogflow/es/docs/intents-rich-messages

@RichardJucewicz Год назад

@@chatimize top. dank je man!

@ayesharahman8863 2 года назад

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

@chatimize 2 года назад

You can change the icon by changing the "chat-icon" attribute to the URL of your icon. Here is documentation on how you can use buttons: cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger

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

@chatimize Год назад

Could you tell me more about how you implemented it? Do you show the general widget or a specific intent?

@manojbhide 2 года назад

How do you add microphone support?

@chatimize 2 года назад

Hey Manoj! So, you want that people can talk to your Dialogflow agent using the website widget?

@SandeshBLS Год назад

@@chatimize yes

@SandeshBLS Год назад

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

@chatimize Год назад

I am not sure how you can do this. Why do you want it?

@SandeshBLS Год назад

@@chatimize just want user to give inputs as an audio instead of typing, so need help in that .. thanks

@alexislucerofredes580 3 года назад

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

@chatimize 3 года назад

Could you send me a video of your setup (both on WordPress and Dialogflow) to info@chatimize.com? Then I can have a look at it!

@tlchua7333 Год назад

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

@chatimize Год назад

I am not sure how to do this. Maybe you can find the answer in the Dialogflow documentation?

@davidwalters3479 Год назад

I am looking for answers on this question too on how to keep chatbot open across from page to page on a site domain. Have you found a solution?

@tlchua7333 Год назад

@@davidwalters3479 Unfortunately, I didn't find a solution and my class project is over. Hope you'll find the answer. Please share if you do!

@muhamedkozic9440 Год назад

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.

@chatimize Год назад

You can do this using Firebase. However, I generally recommend integrating a chatbot platform with Dialogflow. Then you can use the chatbot platform for saving the data and Dialogflow for understanding intents.

@muhamedkozic9440 Год назад

@@chatimize Thank you for answer. I tried to connect firebase with dialogflow, but it doesn't work. I was following many tutorials, but noone works. I tried that with MySql and google sheets, but it doesn't work too. I don't know what is happening to Dialogflow. Maybe they update something, and now, all tutorials about DB are useless. It have warning at dialogflow, it said "Newly created clod functions now use Node js 10 as runtime engine". I don't know really what that mean. Maybe this is a problem. Do you have any solution. Or can u record us video to fix that. It will be very useful for all people. Thank you.

@dayanize 3 года назад

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

@chatimize 3 года назад

Unfortunately, with Dialogflow Messenger, you cannot decrease the size of the chat window or change the icon.

@joelkafesu6757 2 года назад

@@chatimize so why did you first mention that we will change the chat-icon knowing very well that its not changeable.

@chatimize 2 года назад

@@joelkafesu6757 Sorry, my mistake!

@joelkafesu6757 2 года назад

@@chatimize and its actually possible to change the chat icon and height of the chat

@chatimize 2 года назад

@@joelkafesu6757 Yes, I now see it too!. You can change it by setting the chat-icon attribute in HTML. But I did not found how you can change the height of the chat, where did you found that?