Instalación del Widget
La integración del widget se realiza en dos simples pasos. ¡Vamos allá!
Paso 1 · Añade el elemento trigger
El trigger es el elemento que tus usuarios utilizarán para abrir el asistente.
- Botón
- Campo de búsqueda
<button id="ai-findr-trigger" type="button">Buscar</button>
<input
id="ai-findr-trigger"
type="text"
placeholder="¿En qué te puedo ayudar?"
/>
El atributo id="ai-findr-trigger" es obligatorio para que el widget detecte el elemento.
Paso 2 · Carga el script del widget
<script
src="https://hub.aifindr.ai/widget.js"
data-client-id="TU_CLIENT_ID"
defer
></script>
Reemplaza TU_CLIENT_ID con el identificador único proporcionado por AIFindr. Sin él, el widget no funcionará.
¿Dónde colocar el script?
- Opción recomendada: Antes del cierre de
</body> - Alternativa: En el
<head>con el atributodefer
El atributo defer asegura que el script no bloquee la carga de tu página.
¡Listo! 🎉
Con estos dos pasos, el widget ya está funcionando. Los usuarios pueden hacer clic en el trigger para abrir el asistente.
Siguiente paso: Guía específica para tu stack
HTML / JavaScript
Integración simple para sitios estáticos
Ver guía →
React & Next.js
Con hooks optimizados y SSR
Ver guía →
Angular
Integración con TypeScript y routing
Ver guía →
WordPress
Plugins y personalización de temas
Ver guía →
Verificar la instalación
- Abre la consola del navegador (F12)
- Escribe:
AIFindrWidget - Deberías ver: Un objeto con métodos disponibles