Sé que esto es vago, pero quiero crear un widget JS que se pueda incrustar en las páginas web y el usuario pueda interactuar. Similar a lo que hacen estos tipos con su widget de chatbot.
Parece que usan un iframe. Si quiero empaquetar un código y facilitar la integración en otros sitios web, ¿hay algún beneficio en usar un iframe? ¿Tiene algo que ver con el seguimiento de cookies, etc.?
Gracias
Para construir un widget JS, tiene muchas alternativas, describiré dos de ellas a continuación:
1- Usar un iFrame : este enfoque es el más fácil de implementar, la única desventaja es que el código de su widget no podrá interactuar con el contenido de la página web del host. Y viceversa, el código de su aplicación web host no podrá interactuar con su contenido iFrame. Para implementar este enfoque, deberá alojar su contenido de iFrame y hacer referencia a él en una etiqueta de iFrame dentro de su aplicación host.
2- Hacer un módulo renderizador HTML : este enfoque es el más personalizable. Cómo funciona: tendrá que crear un script JS que represente su contenido HTML. Ejemplo: imagine que el código de su sitio web anfitrión es el siguiente:
// 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>De esta manera, puede personalizar el contenido de widget.js para representar su widget.
Espero que mi respuesta haya sido útil.