Modo integrado: chat en un contenedor o a pantalla completa

Cuándo usarlo

Usa el modo integrado cuando el chat es el contenido de una pantalla y no un botón encima de ella:

• Una WebView en tu app móvil, por ejemplo detrás de un elemento Contactar a soporte. La app móvil de Deskwoot usa el modo integrado en su propia pantalla Contactar a soporte.
• Una página de contacto a página completa en tu sitio web.
• Un modal o un panel que trae su propio marco.

Si solo quieres ocultar el botón del chat y abrir el chat flotante normal desde tu propio botón, no necesitas el modo integrado. Abrir el widget de chat desde tu propio botón explica cómo.

Qué cambia en el modo integrado

• El chat se abre en cuanto carga la página y llena su contenedor, o toda la pantalla cuando no hay contenedor.
• El botón redondo del chat, los mensajes que aparecen por tus disparadores de chat y el botón de cerrar del chat están ocultos. Tu página o app decide cómo llega la gente al chat y cómo sale de él.
• El chat no tiene sombra, ni esquinas redondeadas, ni el margen de 20px al borde.
• Los colores, el tema claro u oscuro y los textos de bienvenida siguen viniendo de la configuración de tu bandeja de entrada, igual que en el chat flotante.
• La API de JavaScript sigue funcionando: window.deskwoot.close() oculta el chat, y open() o toggle() lo vuelve a mostrar.

Cómo configurarlo

1. Ve a Configuración > Bandejas de entrada, abre tu bandeja de entrada de chat en vivo y haz clic en En tu sitio web. En Cómo agregar el chat, haz clic en Copiar.
2. En el código, agrega embedded: true a window.deskwootSettings, junto a tu widgetToken.
3. Para llenar solo una parte de la página, agrega también container. Acepta un selector CSS como "#support-pane" o el propio elemento. Dale una altura a ese elemento.
4. Pega el código en la página donde debe aparecer el chat, idealmente justo antes de la etiqueta de cierre </body>. Pon el elemento contenedor antes del código, para que ya esté en la página cuando el widget se inicie.

Ejemplos

Pantalla completa, para una página de contacto o una WebView de una app

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Sin container, el chat cubre toda la ventana del navegador.

Dentro de un contenedor de tu página

<div id="support-pane" style="height: 600px"></div>

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true,
    container: "#support-pane"   // leave out to fill the whole viewport
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

El chat llena todo el ancho y el alto del elemento, así que el elemento necesita una altura propia.

Tu propio botón para mostrar y ocultar el chat

<button onclick="window.deskwoot.toggle()">Contact Support</button>

El modo integrado no tiene botón de cerrar, así que un botón como este le permite a la gente ocultar el chat y volver a abrirlo. Usa open() en lugar de toggle() si el botón solo debe mostrarlo. window.__deskwootUnread guarda la cantidad de respuestas nuevas de tu equipo o de tu bot de IA que llegaron mientras el chat estaba oculto, para mostrar un contador en tu botón.

Buenos lugares para el botón: un elemento Contactar a soporte en tu navegación, junto a Configuración o Ayuda (así lo hace Deskwoot), una fila Chatear con soporte arriba de tu menú de Ayuda o de Cuenta, o un pequeño botón flotante en la esquina cuando tu app no tiene una barra de navegación siempre visible. Ponlo en el mismo lugar en todas las páginas que requieren inicio de sesión, para que la gente siempre sepa dónde está el soporte.

Preguntas frecuentes

¿Puedo activar el modo integrado en el panel?

No. El modo integrado se configura solo en el código del widget de tu página. El aspecto del chat, como los colores, el tema y los textos de bienvenida, lo sigues configurando en tu bandeja de entrada. Más sobre eso en Personalizar tu widget de chat.

El chat no aparece en mi contenedor. ¿Qué reviso?

El elemento tiene que estar en la página cuando el widget se inicia. Si Deskwoot no lo encuentra, el chat no se carga (no pasa a pantalla completa), y la consola del navegador muestra [deskwoot] embedded container not found. Revisa también que el elemento tenga una altura, porque el chat ocupa el 100% de ella.

¿Los visitantes pueden cerrar el chat?

El modo integrado no tiene botón de cerrar. Tu página decide: window.deskwoot.close() oculta el chat, y open() o toggle() lo vuelve a mostrar.

¿El modo integrado funciona con la verificación de identidad?

Sí. Pon el objeto user en el mismo window.deskwootSettings, junto a embedded: true. Cómo firmarlo está en Verificación de identidad de clientes con sesión iniciada.

¿Puedo mostrar el botón del chat en algunas páginas y el chat integrado en otras?

Sí. El modo integrado se configura en el código de cada página. Las páginas con embedded: true muestran el chat dentro de la página, y las páginas sin esa opción muestran el chat como siempre.

¿Dónde puedo leer más sobre las opciones?

Todas las opciones del widget y la API de JavaScript están en la documentación del widget.