Sustituir el antiguo Web Chat de Saysimple por la nueva versión mediante Google Tag Manager

Esta guía explica cómo reemplazar el antiguo webchat de Saysimple (ya no disponible después del 1 de noviembre de 2025) por la nueva versión.

Tabla de Contenidos

1.0 Configurar el nuevo Webchat en Saysimple

1.1 General

1.2 Formulario

1.3 Horario de Atención

1.4 Campos Personalizados

1.4.1 Añadir Campos Personalizados a tu formulario

2.0 Gestionar y revisar tu Widget de Webchat

3.0 Añadir el código a tu sitio web

3.1 Añadir directamente a tu sitio web

3.2 Usando Google Tag Manager

4.0 Preguntas Frecuentes

4.1 ¿Qué pasa si CSP (Política de Seguridad de Contenidos) bloquea el Widget?

4.2 ¿Puedo ocultar el Widget de Webchat y usar un botón o enlace en su lugar?

1.0 Configurar el nuevo Webchat en Saysimple

• En la plataforma de Saysimple, haz clic en el icono de engranaje en la barra lateral izquierda para abrir Configuración.
• En la sección Canales, haz clic en el botón azul Gestionar canales.
• En la esquina superior derecha, haz clic en el botón azul Iniciar sesión en Webchat. Se abrirá una nueva ventana.

En la esquina superior derecha, haz clic en el botón morado + Crear Nuevo Chat. Se abrirá una nueva ventana.

El generador de webchat tiene cuatro pestañas que puedes usar para personalizar el widget:

• General

• Formulario

• Horario de Atención

• Campos Personalizados

Cada pestaña se explica en los pasos siguientes.

1.1 General

En la pestaña General, puedes configurar tu foto de perfil, color de marca, idioma, posición del widget y mensaje de bienvenida. Algunos campos son internos y otros visibles para los usuarios.

1.2 Formulario

En la pestaña Formulario, puedes elegir qué información recolectar antes de iniciar un chat. Por defecto, se puede recolectar:

• Nombre

• Número de teléfono

• Correo electrónico

Puedes usar el Toggle para activar o desactivar los campos en el formulario previo al chat.

Cuando un usuario completa el formulario, esta información se agrega al perfil de contacto en Saysimple y se muestra en el primer mensaje de la conversación.

También puedes añadir campos personalizados como se explica en la sección 1.4.

1.3 Horario de Atención

En la pestaña Horario de Atención, puedes configurar los horarios de disponibilidad del widget de webchat.

Nota: Debes activar esta configuración, de lo contrario el widget permanecerá offline para los usuarios.

Los horarios de webchat no están vinculados a los horarios generales de tu cuenta de Saysimple. Debes configurar ambos.

1.4 Campos Personalizados

En la pestaña Campos Personalizados, puedes crear campos adicionales para tu formulario. Puedes elegir entre:

• Campo de texto

• Campo numérico

• Lista desplegable (permite ofrecer opciones múltiples al usuario)

1.4.1 Añadir Campos Personalizados a tu Formulario

• Después de crear los campos, haz clic en Guardar.
• Cuando todos los campos estén creados, haz clic en Guardar Widget en la esquina inferior derecha. Aparecerá un bloque de código. Puedes cerrarlo por ahora.
• Vuelve a la pestaña Formulario y activa los campos personalizados que quieras incluir.
• Haz clic en Actualizar Widget para guardar los cambios.

2.0 Gestionar y revisar tu Widget de Webchat

Después de actualizar, volverás a la pantalla de resumen del Webchat. Aquí puedes gestionar y revisar tu widget.

Si todo es correcto, haz clic en </> Obtener código y continúa con el paso 3.

3.0 Añadir el Código a tu Sitio Web

Tienes dos opciones:

• Añadirlo directamente a tu sitio web

• Usar Google Tag Manager

3.1 Añadir directamente a tu sitio web

• Copia el código HTML.

• Pégalo justo antes de la etiqueta de cierre </body> de tu sitio web.

Esto asegura que el widget se cargue correctamente.

3.2 Usando Google Tag Manager

• Copia el código HTML.

• Accede a Google Tag Manager e inicia sesión.

• Selecciona el contenedor correcto de tu sitio web.

• En el menú de la izquierda, haz clic en Etiquetas.

• Busca la etiqueta donde está instalado tu antiguo código de Webchat Saysimple.

• Haz clic en el nombre de la etiqueta para abrirla.

• Reemplaza el antiguo código HTML con el nuevo.

• Haz clic en Guardar y luego en Enviar → Publicar para que el nuevo código se active.

Más información sobre Google Tag Manager está disponible en el Centro de Soporte de Google.

4.0 Preguntas frecuentes

4.1 ¿Qué pasa si CSP bloquea el Widget?

Puedes usar la siguiente configuración para evitar que CSP bloquee el script del Widget:

default-src 'self';
script-src 'self' https://web-chat.saysimple.io;
connect-src 'self' https://web-chat.saysimple.io wss://web-chat.saysimple.io;
style-src 'self' 'unsafe-inline' https://web-chat.saysimple.io;
img-src 'self' data: https://web-chat.saysimple.io;
font-src 'self' https://web-chat.saysimple.io;

¿Cómo agregar estas reglas CSP en tu sitio web?

• WordPress → Usa un plugin como HTTP Headers o edita .htaccess si el sitio es autohospedado.

• Wix / Webflow → Algunos planes permiten añadir reglas CSP en Encabezados personalizados dentro de la configuración del sitio.

• Cloudflare → Si tu web usa Cloudflare, agrega CSP en Cloudflare Rules → Response Headers.

4.2 ¿Puedo ocultar el Widget y usar un botón o enlace?

Sí, puedes configurar un disparador click-to-chat que abra el Webchat cuando un usuario haga clic en un botón o enlace.

Para ocultar el icono al cargar la página, agrega esta línea antes de ejecutar el script:

window.chatwootSettings.hideMessageBubble = true;

Esto hace que el widget se cargue oculto. Una vez añadido al HTML completo, debería verse así:

<script>
  window.chatwootSettings = {"position": "right"};
  window.chatwootSettings.hideMessageBubble = true;
  (function(d, t) {
    var BASE_URL = "https://web-chat.saysimple.io";
    // RESTO DEL CÓDIGO
})();
</script>

Después, puedes controlarlo con JavaScript, por ejemplo un botón que abra o cierre el chat manualmente.

Ejemplo de enlace:

<a href="javascript:void(0)" onclick="window.$chatwoot && window.$chatwoot.toggle()"
   class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">
   💬 Toggle chat
</a>

Ejemplo de botón:

<script>
document.getElementById('open-chat').addEventListener('click', function() {
  if (window.$chatwoot) {
    window.$chatwoot.toggle();
  } else {
    console.log("Chat no cargado aún");
  }
});
</script>
<button id="open-chat">💬 Abrir chat</button>