Web

Integra Danil AI en tu sitio web. Elige el tipo de integración que mejor se adapte a tu proyecto.

Publishable Key

Al configurar el canal Web en la app de Danil AI, se te mostrará una Publishable Key. Esa clave es la que pasas al constructor del widget. Es pública y segura de incluir en tu frontend.

Campo	Descripción
Publishable Key	Clave pública del canal. Comienza con `pk_`. Se pasa directamente al constructor.
Dominios Permitidos	Lista de dominios autorizados a usar el widget. Déjalo vacío para permitir cualquier dominio.

Ejemplo de instalación

Pega este código antes del cierre de tu tag </body>. Reemplaza pk_... con tu Publishable Key:

HTML — Ejemplo completo

<!-- Danil Widget -->
<script src="https://danil-widget.s3.us-east-1.amazonaws.com/danil-widget.min.js"></script>

<script>
  window.addEventListener('load', () => {
    const widget = new DanilWidget('pk_...');
    widget.init({
      theme: {
        primaryColor: '#007bff',  // Color principal del widget
        width:        '350px',     // Ancho de la ventana de chat
        height:       '500px',     // Alto de la ventana de chat
      }
    });
  });
</script>

💡

Buena práctica — guarda la clave en tu .env

En lugar de pegar el valor directamente en el código, guárdalo en tu archivo .env y léelo desde tu framework:

Archivo .env

VITE_DANIL_KEY=pk_...
# o para Next.js:
NEXT_PUBLIC_DANIL_KEY=pk_...

Vite / Astro

const widget = new DanilWidget(import.meta.env.VITE_DANIL_KEY);

Next.js

const widget = new DanilWidget(process.env.NEXT_PUBLIC_DANIL_KEY);

Es una clave pública — segura de incluir en el frontend. Agrega .env a tu .gitignore para no subir el valor a tu repositorio.

Opciones de personalización

Puedes personalizar la apariencia del widget pasando un objeto theme al método init():

Opción	Tipo	Default	Descripción
primaryColor	string	'#007bff'	Color del botón flotante y elementos principales.
width	string	'350px'	Ancho de la ventana de chat. Acepta cualquier valor CSS válido.
height	string	'500px'	Alto de la ventana de chat. Acepta cualquier valor CSS válido.

Web

Publishable Key

Ejemplo de instalación

Opciones de personalización

Canal Web Conectado

Ejemplo de uso