Integración con Shopify
Agregue chatbots de IA de ChatReact, formularios de contacto y acordeones de preguntas frecuentes a su tienda Shopify con la aplicación oficial ChatReact para Shopify.
Instalación
- Instale la aplicación ChatReact desde el Shopify App Store
- Abra la aplicación en su panel de administración de Shopify
No se necesita una conexión de cuenta separada: vincula la aplicación a sus chatbots y formularios pegando sus IDs desde el panel de control de ChatReact.
Funciones
La aplicación de Shopify proporciona tres tipos de widgets:
| Widget | Descripción | Ubicación |
|---|---|---|
| Chat Widget | Chatbot de IA con soporte de chat en vivo | En todo el sitio o en páginas específicas mediante App Embed |
| Form Widget | Formularios de contacto con protección contra spam | En línea mediante App Block en el Theme Editor |
| FAQ Widget | Visualización de preguntas frecuentes en estilo acordeón | En línea mediante App Block en el Theme Editor |
Configuración del Chat Widget
Configurar el chat widget requiere dos pasos: crear una asignación de widget en la aplicación ChatReact y luego habilitar el App Embed en su tema.
Paso 1: Crear una Asignación de Widget
- Abra la aplicación ChatReact en su administración de Shopify
- En la pestaña Chat Widget, haga clic en Add Assignment
- Introduzca su Chatbot ID (se encuentra en el panel de ChatReact bajo Settings → Embed)
- Haga clic en Save Assignment
Paso 2: Habilitar el App Embed
- Vaya a Online Store → Themes → Edit theme
- Haga clic en el icono App embeds (pieza de rompecabezas) en la barra lateral inferior izquierda
- Active ChatReact Chat Widget en ON
- Haga clic en Save
Solo necesita habilitar el App Embed una vez. Después de eso, gestiona dónde aparece el widget completamente desde la aplicación ChatReact.
El chat widget aparece en cada página cubierta por una de sus asignaciones de widget.
Asignaciones de Widget
Cada asignación vincula un chatbot a su tienda. Hay dos tipos de asignaciones:
- Everywhere: El widget aparece en todas las páginas (por defecto). Opcionalmente puede añadir Exclude URLs: una ruta por línea, con comodines
*soportados (p. ej./blogs/*) - Specific Page: El widget solo aparece en la ruta de la página que ingrese (p. ej.
/pages/about)
Si una página tiene su propia asignación Specific Page, el chatbot de esa asignación se mostrará allí en lugar del chatbot de Everywhere.
Añadir Widgets de Formulario y FAQ
Los widgets de Form y FAQ se añaden como App Blocks en el Theme Editor:
- Vaya a Online Store → Themes → Edit theme
- Navegue a la página donde desea el widget
- Haga clic en Add block y busque "ChatReact"
- Elija ChatReact Form o ChatReact FAQ
- Introduzca el Form ID o el Chatbot ID en la configuración del bloque
Inserción Manual (Liquid)
Si prefiere editar las plantillas directamente, también puede añadir los widgets a cualquier plantilla Liquid:
<!-- Form widget -->
<div id="chatreact-form"></div>
<script src="https://www.chatreact.ai/embed/form.js"
data-form-id="YOUR_FORM_ID"
data-container="chatreact-form"
async></script>
<!-- FAQ widget -->
<div id="chatreact-faq"></div>
<script src="https://www.chatreact.ai/embed/faq-widget.js"
data-chatbot-id="YOUR_CHATBOT_ID"
data-container="chatreact-faq"
async></script>
Estilos del Form Widget
Personalice la apariencia del formulario en el Theme Editor:
| Ajuste | Opciones |
|---|---|
| Alignment | Left, Center, Right |
| Max Width | 200–1200px |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Detección automática (predeterminado) o uno de 24 idiomas |
Estilos del FAQ Widget
| Ajuste | Opciones |
|---|---|
| Categories | Slugs de categorías opcionales separados por comas (p. ej. general,pricing) para mostrar solo categorías de FAQ seleccionadas |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Detección automática (predeterminado) o uno de 24 idiomas |
Gestión de Widgets
La aplicación ChatReact en su administración de Shopify ofrece tres pestañas:
- Chat Widget — Cree y administre las asignaciones de widget que controlan en qué páginas se muestra el chat widget
- Forms — Instrucciones paso a paso para la inserción, el fragmento manual Liquid y dónde encontrar su Form ID
- FAQ Widget — Instrucciones de inserción para el FAQ widget y dónde encontrar su Chatbot ID
La selección de Form y FAQ se realiza en el Theme Editor: introduzca el Form ID o el Chatbot ID en la configuración del bloque.
Soporte de Idiomas
La aplicación soporta los 24 idiomas de la UE:
- El chat widget detecta automáticamente el idioma del navegador de cada visitante y lo compara con los idiomas soportados por su chatbot, recurriendo al idioma principal del chatbot si no hay coincidencia
- Los bloques Form y FAQ tienen cada uno su propia configuración de Language en el Theme Editor: por defecto está en Auto-detect y puede anularse por bloque
Desinstalación
Cuando desinstala la aplicación ChatReact, todas las configuraciones de widgets y los datos almacenados se eliminan automáticamente de su tienda Shopify.