Saltar al contenido principal

Configurar Canales de Comunicacion

Guia detallada para conectar diferentes canales a tu Chatwoot.

Widget de Chat Web​

El canal mas basico y facil de configurar.

Crear el inbox​

  1. Ve a Settings > Inboxes
  2. Click Add Inbox > Website
  3. Configura:
    • Website Name: Nombre para identificar (ej: "Mi Tienda")
    • Website URL: Tu dominio (ej: mitienda.com)
    • Widget Color: Color del boton de chat
    • Welcome Title: Titulo que ve el visitante
    • Welcome Tagline: Subtitulo del widget

Opciones avanzadas​

  • Pre-chat form: Pide datos antes de iniciar chat (nombre, email)
  • Business hours: Define horarios de atencion
  • Auto assignment: Asigna automaticamente a agentes disponibles

Instalar en diferentes plataformas​

WordPress​

  1. Instala el plugin "Insert Headers and Footers"
  2. Ve a Settings > Insert Headers and Footers
  3. Pega el codigo en "Scripts in Footer"

Shopify​

  1. Ve a Online Store > Themes > Edit Code
  2. Abre theme.liquid
  3. Pega el codigo antes de </body>

React / Next.js​

// components/ChatWidget.js
import { useEffect } from 'react';

export default function ChatWidget() {
  useEffect(() => {
    window.chatwootSettings = {
      position: 'right',
      type: 'standard',
      launcherTitle: 'Chat'
    };

    const script = document.createElement('script');
    script.src = 'https://tuapp.deployalo.com/packs/js/sdk.js';
    script.defer = true;
    script.async = true;

    script.onload = () => {
      window.chatwootSDK.run({
        websiteToken: 'TU_TOKEN',
        baseUrl: 'https://tuapp.deployalo.com'
      });
    };

    document.body.appendChild(script);
  }, []);

  return null;
}

Email​

Conecta cuentas de email para gestionar desde Chatwoot.

Configurar IMAP/SMTP​

  1. Ve a Settings > Inboxes > Add Inbox > Email

  2. Configura IMAP (recibir):

    • Address: imap.gmail.com (para Gmail)
    • Port: 993
    • Email: tu email
    • Password: contrasena de app (no la normal)
    • Enable SSL: Si

  3. Configura SMTP (enviar):

    • Address: smtp.gmail.com
    • Port: 587
    • Email: tu email
    • Password: contrasena de app
    • Enable STARTTLS: Si

Gmail: Crear contrasena de aplicacion​

  1. Ve a tu cuenta de Google > Seguridad
  2. Activa verificacion en 2 pasos
  3. Ve a "Contrasenas de aplicaciones"
  4. Crea una nueva para "Correo"
  5. Usa esa contrasena en Chatwoot

WhatsApp Business​

Requiere WhatsApp Business API (via proveedores como 360dialog, Twilio, etc).

Opcion 1: 360dialog​

  1. Crea cuenta en 360dialog
  2. Registra tu numero de WhatsApp Business
  3. En Chatwoot: Settings > Inboxes > Add Inbox > WhatsApp
  4. Selecciona 360dialog
  5. Ingresa tu API key

Opcion 2: Twilio​

  1. Crea cuenta en Twilio
  2. Activa WhatsApp Sandbox (para pruebas) o numero produccion
  3. En Chatwoot: Settings > Inboxes > Add Inbox > WhatsApp
  4. Selecciona Twilio
  5. Ingresa Account SID y Auth Token

Facebook Messenger​

Requisitos previos​

  • Pagina de Facebook
  • Cuenta de desarrollador de Facebook

Configuracion​

  1. Ve a Settings > Inboxes > Add Inbox > Facebook
  2. Click "Connect with Facebook"
  3. Inicia sesion en Facebook
  4. Da permisos a la app de Chatwoot
  5. Selecciona la pagina a conectar

Permisos necesarios​

  • pages_messaging
  • pages_read_engagement
  • pages_manage_metadata

Instagram​

Conecta mensajes directos de Instagram.

Requisitos​

  • Cuenta de Instagram Business o Creator
  • Cuenta de Facebook conectada a la cuenta de Instagram

Configuracion​

  1. Ve a Settings > Inboxes > Add Inbox > Instagram
  2. Click "Connect with Facebook"
  3. Selecciona la cuenta de Instagram

Telegram​

Crear bot​

  1. Abre Telegram y busca @BotFather
  2. Envia /newbot
  3. Sigue las instrucciones
  4. Guarda el token que te da

Conectar a Chatwoot​

  1. Ve a Settings > Inboxes > Add Inbox > Telegram
  2. Ingresa el token del bot
  3. El bot estara listo para recibir mensajes

Configurar comandos del bot​

Con @BotFather, puedes configurar comandos:

/setcommands

Y define comandos como:

start - Iniciar conversacion
help - Obtener ayuda

API Channel​

Para integraciones personalizadas.

Crear canal API​

  1. Ve a Settings > Inboxes > Add Inbox > API
  2. Configura nombre del canal
  3. Obtendras un Inbox Identifier y API access token

Enviar mensajes via API​

curl -X POST https://tuapp.deployalo.com/api/v1/accounts/1/conversations \
  -H "api_access_token: TU_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "source_id": "cliente123",
    "inbox_id": 1,
    "contact": {
      "name": "Juan Perez",
      "email": "juan@example.com"
    },
    "message": {
      "content": "Hola, necesito ayuda"
    }
  }'

Consejos generales​

Horarios de atencion​

Configura horarios para que el widget muestre mensajes apropiados fuera de horario:

  1. En el inbox, ve a Business Hours
  2. Define horarios por dia
  3. Configura mensaje de "Fuera de horario"

Asignacion automatica​

Distribuye conversaciones automaticamente:

  1. En el inbox, activa Auto Assignment
  2. Las conversaciones se asignaran a agentes disponibles
  3. Puedes limitar por equipos