Widget Web Embebible

El Widget de Synvaxis te permite agregar un chat en vivo con IA directamente en tu sitio web, tienda online o landing page. Tus visitantes pueden interactuar con tu agente de ventas IA sin necesidad de WhatsApp.

¿Qué es el Widget? #

Es una burbuja de chat elegante que aparece en la esquina inferior de tu sitio web. Cuando un visitante hace clic, se abre una ventana de chat donde pueden conversar con tu agente IA en tiempo real.

Características

Instalación #

Obtener tu User ID

1. 1Ve a Configuración → Integraciones en tu dashboard
2. 2Busca la sección de Widget Web
3. 3Copia tu User ID

Opción 1: Script Embed (Recomendado)

Agrega este código antes del cierre de en tu sitio web:

<script
src="https://app.synvaxis.com/widget/embed.js"
data-user-id="TU_USER_ID"
async
></script>

Opción 2: iFrame

Si prefieres control sobre posición y tamaño:

<iframe
src="https://app.synvaxis.com/widget/TU_USER_ID"
style="position: fixed; bottom: 20px; right: 20px; width: 400px; height: 600px; border: none; border-radius: 16px; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,0.12);"
></iframe>

Instalación por Plataforma #

WordPress / WooCommerce

1. 1Instala un plugin como "WPCode" o "Insert Headers and Footers"
2. 2Ve a la sección de "Footer Scripts"
3. 3Pega el código embed
4. 4Guarda

O edita directamente footer.php en Apariencia → Editor de temas.

Shopify

1. 1Ve a Online Store → Themes
2. 2Haz clic en "Actions → Edit code"
3. 3Abre el archivo theme.liquid
4. 4Pega el código embed antes de
5. 5Guarda

Wix

1. 1Ve a Configuración del sitio → Código personalizado
2. 2Haz clic en "Agregar código personalizado"
3. 3Pega el código embed
4. 4Ubicación: "Body - end"
5. 5Aplica a "Todas las páginas"

Squarespace

1. 1Ve a Settings → Advanced → Code Injection
2. 2Pega el código embed en la sección "Footer"
3. 3Guarda

Next.js / React

// components/SynvaxisWidget.tsx
"use client";
import { useEffect } from "react";

export function SynvaxisWidget() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://app.synvaxis.com/widget/embed.js";
script.setAttribute("data-user-id", "TU_USER_ID");
script.async = true;
document.body.appendChild(script);

return () => {
document.body.removeChild(script);
};
}, []);

return null;
}

Personalización #

El widget hereda automáticamente la configuración de tu agente IA:

• Personalidad y tono — El mismo prompt que usas en WhatsApp
• Catálogo de productos — Puede recomendar y mostrar productos
• Idioma — Responde en el idioma que el visitante escribe
• SmartContent — Envía multimedia relevante

Conversaciones del Widget en tu Dashboard #

Todas las conversaciones del widget aparecen en tu sección de Chat con la etiqueta "Web" para diferenciarlas de las conversaciones de WhatsApp.

Si un visitante del widget proporciona su número de WhatsApp, la conversación puede continuar por WhatsApp.

Rendimiento #

Preguntas Frecuentes #

¿El widget es gratis?

Sí, está incluido en todos los planes sin costo adicional.

¿Las conversaciones del widget cuentan como conversaciones IA?

Sí, cada conversación del widget cuenta hacia tu uso de la API de IA.

¿Puedo usar el widget sin WhatsApp?

Sí. El widget funciona independientemente de WhatsApp.

¿Puedo tener el widget en múltiples sitios web?

Sí. El mismo User ID funciona en cualquier cantidad de dominios.

¿El widget afecta mi SEO?

No. Se carga de forma asíncrona y no interfiere con el contenido indexable.

Mejores Prácticas #

1. 1Coloca el widget en todas las páginas — nunca sabes dónde un visitante necesitará ayuda
2. 2Asegúrate de que tu catálogo está completo — el widget usa los mismos productos que WhatsApp
3. 3Prueba en móvil — verifica que el widget se ve bien en pantallas pequeñas
4. 4Monitorea las conversaciones — las consultas del widget pueden revelar dudas que tu sitio no resuelve

Siguientes Pasos #

• Configuración IA — Ajusta cómo responde el agente del widget
• Catálogo de Productos — Productos que el widget puede recomendar
• Contactos y CRM — Cómo se guardan los contactos del widget