Poner el código en tu web
Funciona en cualquier web, también con Wix, Squarespace, Webflow o una web HTML propia.
Paso 1: Copia el código del widget
En el panel, ve a "Ajustes" → "Instalación" y copia el código de inserción. Encontrarás el mismo código en "Resumen" y en "Integraciones" → "Otro sitio web".
Paso 2: Pega el código antes de </body>
Pega el código en cada página justo antes de la etiqueta </body>, o en el campo de código personalizado o scripts del pie de página de tu creador de webs.
Paso 3: Comprueba tu web
Abre tu web en una ventana nueva. El botón de chat aparece en la esquina inferior. Envía un mensaje de prueba; la conversación aparece en tu "Bandeja compartida".
¿El código está oculto con un aviso de que el código del widget está en pausa? Entonces falta el acuerdo de tratamiento de datos. Acéptalo en tu cuenta de twilper.com.
WordPress y WooCommerce
Paso 1: Instala desde WordPress.org
En WordPress, ve a Plugins → Añadir nuevo plugin, busca "TwilperChat", pulsa Instalar ahora y después Activar.
Paso 2: O sube el archivo zip
¿No puedes instalar plugins desde WordPress.org? Descarga el "plugin de WordPress de TwilperChat (.zip)" en "Integraciones" → "WordPress" y súbelo en Plugins → Añadir nuevo plugin → Subir plugin. Después activa el plugin.
Paso 3: Introduce la clave del widget
En WordPress, ve a Ajustes → TwilperChat → Conexión. Pega la clave que aparece en el panel junto a los pasos de WordPress, guarda la conexión y pruébala.
Paso 4: Opcional: sincroniza páginas y productos
¿Quieres que la IA conozca tus páginas, entradas y productos de WooCommerce? Crea una clave de sincronización en el panel en "Integraciones" ("Sync key para el plugin de WordPress") y pégala en el plugin. La clave solo se muestra una vez.
Shopify
Paso 1: Abre la ficha de Shopify
Ve a "Integraciones", elige "Shopify" y pulsa "Abrir ficha de Shopify".
Paso 2: Instala la app
Completa la instalación en Shopify. El widget se activa en tu tema actual; compruébalo en tu tienda.
Paso 3: Comprueba la sincronización
Comprueba en Twilper que la sincronización de productos ha terminado, para que la IA pueda responder preguntas sobre tus productos.
¿El botón dice "Las nuevas instalaciones de Shopify están en pausa"? Entonces puedes poner tú mismo el código del widget en tu tema por ahora, o sincronizar los productos a mano con la dirección de tu tienda (tutienda.myshopify.com).
¿Se ha detectado mi widget?
La primera vez que el widget se carga en tu web, Twilper registra ese dominio en tu licencia. En la lista de "Resumen", "Añadir el widget" se pone en verde.
- ¿Aún no está en verde? Abre tu web, recarga la página y comprueba que aparece el botón de chat.
- Asegúrate de que el código está en la web publicada y no solo en un borrador o vista previa.
- Tu licencia fija en cuántos dominios puede funcionar el widget. Si se rechaza un dominio nuevo, desactiva uno antiguo o elige un plan mayor.
Colores, nombre y mensaje de bienvenida
En el "Diseñador del widget" decides cómo se ve y se comporta el widget. Ves los cambios al instante en la "Vista previa en vivo".
Paso 1: Nombre y aspecto
Escribe el "Nombre del bot" y, si quieres, un avatar. En "Colores" elige tu "Color principal" y los colores de las burbujas, o pulsa "Estilo Twilper".
Paso 2: Texto y tono
En "Texto y tono" escribe tu "Mensaje de bienvenida" y el "Texto de ejemplo", y elige tono formal o informal. En "Textos por idioma" pones los mismos textos en inglés, alemán, francés y español.
Paso 3: Comportamiento
En "Comportamiento" elige la "Posición" (abajo a la derecha o a la izquierda) y el tamaño del botón. Si quieres, activa "Preguntas sugeridas", un "Mensaje proactivo" o la "Captación de leads".
Paso 4: Guarda
Pulsa "Guardar". El widget de tu web recoge los cambios.
Conviene saber
- El widget usa automáticamente el idioma del visitante, según la página y el mensaje.
- Pon el código una sola vez por página; el código duplicado puede mostrar dos botones de chat.
- El CSS personalizado solo está disponible en el plan Business.
- Con "Mostrar citas de las fuentes" el visitante ve en qué página se basa una respuesta.