I got this question from a reader recently.
The short answer is that you can only do it by writing your own custom integration.
The Dialogflow web demo bot is loaded via an iFrame
What this means is, the bot page is actually being served from a server which is hosted by Dialogflow and you don't have any control over what is displayed within the rectangular chat window.
Here is an example bot from my website:
Note that I had to use an iFrame to load the bot.
You cannot change the look and feel of the web demo bot
Since you are embedding an iFrame, you cannot change the look and feel of the Dialogflow web demo. In fact, there are many other limitations - for example you cannot display clickable hyperlinks inside the web demo.
You need to code a custom integration
If you would like to customize the look and feel, and enhance the functionality of your website bot while still using Dialogflow for the NLU parsing, you need to create your own custom integration. You can take a look at this tutorial which will help you get started.
- Client Question: Can I use GPT2 for my Dialogflow bot?
- Weekly Free Mini Courses
- 15 things all Dialogflow bot makers should know
- Autogenerating FAQ bot from training text
- A MUST read article on Dialogflow training phrase quality
- Using Collect.chat for preNLU bots
- Reader Question: How to get some sample training data for Dialogflow?
- Getting the top 3 (or top N) intents in Dialogflow: An experiment
- Dialogflow Regexp (regular expression) entity
- Using Dialogflow for educational bots