HomeArticlesDialogFlow Chatbot | Embed in your website, share on social media
DialogFlow Chatbot | Embed in your website, share on social media
February 25, 2020
Welcome to channel Study Zone. In this
tutorial I am going to talk about the web integration of dialogFlow chat
bot widget. We will have a look at the demo page where you can test the widget. How to embed it in your website, how to email it and then share it on different
social media platforms. If you are new to dialogFlow, click the link displayed on
the top right corner of this video to learn how to make a simple chat bot. Let
us open the dialogFlow console. I have created this agent echoService that
echoes whatever user says. Go to the Integrations section and enable this
option – Web Demo. It will open an overlay where you can find this unique URL which
you can edit as well. Let me rename it as myEchoService. Let us open this link
in a new window. You can see this chat box where you can talk to your bot.
Let’s try that. Let me write – Hi. It says – Welcome to echo service. Say something. This is the default intent that is invoked when you interact with your
bot. Let me now write – How are you? It says – How are you? Ok, Not bad.
Cool. It echos whatever I say. So we have tested the chat bot widget. Now I would
like to embed this into one of my websites. You can see this option on the
left – Embed. Let’s click it. It will open this overlay. Let us copy this code. We
can use sites like – jsfiddle – to test if this works or not.
Let’s open jsfiddle in a new window and paste this code in the HTML section.
Click Run. Here we go. We have embedded the widget into our website. Let’s now go
back to demo page. You can see we have a couple of more options over here. Email –
this is quite self-explanatory. There is also an option to share this page on
social media. Let us select Facebook option. Let me keep it private
as I just need to test it and I don’t want others to see it. Let us post it now.
Open your Facebook page. Click this post and you will land on the same page. You
can find the code to embed the widget on this overlay as well. You can define the
width, height and you can also allow microphone as well using these
parameters. That’s it from this video. If you have learned something, please
subscribe this channel. Bye bye.