Qué sucede realmente cuando pegas la etiqueta script
El widget ocupa 20 KB, se renderiza en una shadow root y nunca ve el CSS de tu página. Aquí está el camino completo desde la etiqueta hasta la respuesta.
Los widgets embebidos tienen mala reputación, y la merecen. Luchan contra tu CSS, bloquean tu página y se rompen cuando haces deploy. Aquí está lo que el nuestro hace en su lugar.
No bloquea nada
La etiqueta está diferida, así que se carga después de que tu página sea interactiva:
<script src="https://cdn.welcomeai.dev/widget/v1.js" data-wai-key="wg_xxxxxxxxxxxx" defer></script>El bundle ocupa aproximadamente 20 KB comprimido. Es Preact en lugar de React, porque el widget no necesita reconciliación del árbol de otro.
Se renderiza en una shadow root
Todo lo que dibuja el widget vive dentro de una shadow root con sus propios estilos. Tu CSS no puede penetrar, y el nuestro no puede filtrarse hacia afuera. Esta es la decisión única que elimina la mayoría de errores de embebido: sin conflictos de reset, sin guerra de especificidad, sin !important.
El costo es que no puedes rediseñarlo con tu propia hoja de estilos. Para eso está el editor del widget y el campo de CSS personalizado.
Sabe en qué página está
El widget envía la ruta actual con cada pregunta, y la recuperación da un pequeño impulso a los fragmentos de esa página. En una página de precios, una pregunta sobre "el límite" encuentra el contenido de precios primero.
Para una aplicación de una sola página, también sigue la navegación del lado del cliente, por lo que el contexto es correcto después de un cambio de ruta.
Se niega a ejecutarse donde no debería
Cada solicitud lleva un token vinculado al origen, y el widget solo responde en los dominios que listaste.
Si alguien copia tu clave en su propio sitio, la solicitud se rechaza con el origen que vimos. Ese mensaje aparece en la consola de tu navegador, lo que hace que un dominio de staging mal configurado sea un arreglo de treinta segundos en lugar de una tarde.
