Sometimes, you need to modify your web page during the conversation. You want to launch a video, redirect the user to another web page, etc.
You could also need to call your API from the front end.
Let's take an example of an e-learning chatbot I've made.
On the left side of my web page, I added a bot, and the right side is dedicated to knowledge content.
During the conversation, the students learn, through videos, notions of trigonometry.
So, I need to trigger specific videos at specific moments of the conversation.
Here is what it looks like:
- usual functions that impact your web page (DOM)
- some functions you created yourself within your web page
- functions that call your API from the front end
- hide the image element
- show the video element
- launch a specific youtube video in autoplay mode
You'll find the code below: