Issue
I know this is vague, but I want to create a JS widget that can be embedded into webpages and the user can interact with. Similar to what these guys do with their chatbot widget.
It looks like they use an iframe. If I want to package up some code and make it easy to embed into other websites, is there a benefit to using an iframe? Is it something to do with cookies tracking etc.?
Thanks
Solution
To build a JS widget, you have many alternatives, I will describe two of them below :
1- Using an iFrame : this approach is the easiest one to implement, the only cons is that your widget code won't be able to interact with the host's webpage content. And vice versa, your host web application code won't be able to interact with your iFrame content. To implement this approach, you will have to host your iFrame content and reference it in an iFrame tag inside your host application.
2- Making a HTML renderer module : this approach is the most customizable. How it works : You will have to make a JS script that renders your HTML content. Example : Imagine your host website's code is as follows :
// widget.js
const widgetContentEl = document.getElementById('widget-content');
var myWidget = document.createElement('div');
myWidget.innerHTML = '<h1> This is my widget</h1> <p> And this is a paragraph in my widget';
widgetContentEl.appendChild(myWidget);<!-- index.htm -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Example host</title>
</head>
<body>
<div id="widget-content"></div>
<script src="widget.js"></script>
</body>
</html>This way, you can customize the widget.js content to render your widget.
I hope my answer was helpful.
Answered By - Seddik Mohamed Rafaa
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.