Diseño del widget personalizado (Diseño a medida)
Estas instrucciones van dirigidas a personas con un mínimo conocimiento de lenguaje de programación web: HTML y CSS. Si no es tu caso, recomendamos que te pongas en contacto con tus desarrolladores y les facilites estas instrucciones. La instalación será muy fácil para ellos.
¿EN QUÉ CONSISTE EL DISEÑO A MEDIDA o LINK ‘EMBEBIDO’ (embed link)?
Los desarrolladores pueden crear elementos personalizados para acceder al visor de Oct8ne. Esto permite que tenger una mayor flexibilidad para hacer atractivo el elemento o el botón (call-to-action) que abrirá la conversación, para así, animar a tus potenciales clientes a ponerse en contacto con los agentes/bot para que le aconsejen y ayuden durante el proceso de compra. Podrás dotar a éste elemento con tu procpio CSS y darle el 'look & feel' acorde con tu pagina.
Para ello es necesario añadir un elemento HTML en tu pagina con una determinada clase.
No hay ninguna limitación con el tipo de elemento HTML ni con su ubicación en la página — esta clase puede aplicarse en imágenes, bloques HTML como DIV o SPAN o a cualquier otro tipo de etiqueta y pueden colocarse donde desees en tu web, ya que el control es exclusivamente tuyo.
¿QUE CLASES DEBO USAR?
“oct8ne-widget-on": Cuando los agentes (ya sean humanos o bots) estén conectados, los elementos del DOM marcados con la clase CSS “oct8ne-widget-on" serán visibles. Al clicar, se abrirá la sesion con un agente.
“oct8ne-widget-off": Cuando los agentes (ya sean humanos o bots) estén desconectados, todos los elementos del DOM marcados con la clase CSS “oct8ne-widget-off" serán visibles. Al clicar aparecerá el formulario de contacto, ya que no hay agentes en ese momento.
En el siguiente código se muestra un elemento del tipo ON y puede personalizarse modificando los estilos en línea. Lo importante es que el lemento contenga la clase que se desee.
Los estilos pueden ser en linea o mediante un archivo CSS anexo.
- <body>
- ...
- <div class="oct8ne-widget-on" style="display: none; position: fixed; top: 0; right: 0; z-index: 9999">
- Talk to an expert
- </div>
- ...
- </body>
*Los estilos aplicados en este código son de ejemplo.
Es obligatorio que el elementos, al cargar la página , estén ocultos, ya sea usando estilos de línea o hojas de CSS. Debes establecer su estilo a display: none. Oct8ne es el que se encargará de mostrar aquellos elementos cuando corresponda.
Asegurate también de añadir éstos elementos antes de la carga del script MASTER de oct8ne. Es decir, los elementos deben estar ya en el DOM en el momento que cargue el script de oct8ne.
Todos estos elementos pueden coexistir dentro de la misma página para que ambas clases puedan mostrar un mensaje u otro dependiendo de si los agentes están o no disponibles.
Ejemplo:
- <body>
- ...
- <div class="oct8ne-widget-on" style="display: none">
- Talk to an expert
- </div>
- <div class="oct8ne-widget-off" style="display: none">
- Email us
- </div>
- ...
- </body>
Estas clases también pueden ser combinadas en el mismo elemento para hacerlo visible independientemente de si los agentes están disponibles o no, con un mismo texto (o una misma imagen):
- <body>
- ...
- <div class="oct8ne-widget-on oct8ne-widget-off" style="display: none">
- Talk to us!
- </div>
- ...
- </body>
Para que este desarrollo no entre en conflicto con el icono que Oct8ne proporciona por defecto, deberás apagar el widget por default desde el panel de control de Oct8ne. En la sección Settings > Engagements > Livechat
CLASES ADICIONALES PARA DISTINGUIR ENTRE AGENTES FÍSICOS (personas) Y BOTS
Si nos interesa personalizar el mensaje y comportamiento en función de la disponibilidad de agentes distinguiendo entre personas y bots, Oct8ne facilita clases CSS adicionales para ello.
La siguiente tabla resume estas clases, así como el momento en el que Oct8ne hará visibles los elementos que las utilicen:
El siguiente bloque de código muestra un ejemplo de utilización de estas clases para mostrar mensajes distintos en función de la disponibilidad de personas humanas o bots:
- <body>
- ...
- <div class="oct8ne-widget-agents-on" style="display: none">
- Talk to a sales person
- </div>
- <div class="oct8ne-widget-bots-on" style="display: none">
- Talk to our bot!
- </div>
- ...
- </body>
Para estas clases adicionales, tambien aplica los mismos requisitos vistos anteriormente:
- Asegúrate de que estos elementos están en
ocultos en la página usando los estilos de línea y/o hojas de estilo, estableciendo la propiedad "display:none".
- Asegúrate de que estén presentes en el DOM ante de la carga del script principal de Oct8ne
Related Articles
Diseño Widget Dinámico
Como configurar el widget DINAMICO de OCT8NE Estas instrucciones van dirigidas a personas con un mínimo conocimiento de lenguaje de programación web: HTML y CSS. Si no es tu caso, recomendamos que te pongas en contacto con tus desarrolladores y les ...Triggers personalizados o custom
Estas instrucciones van dirigidas a personas con un mínimo conocimiento de lenguaje de programación web: HTML y JAVASCRIPT. Si no es tu caso, recomendamos que te pongas en contacto con tus desarrolladores y les facilites estas instrucciones. La ...API Oct8ne de integración con CSM a medida
Documentación del API Oct8ne Versión del API 2.4 (Octubre 2024 / rev05) Índice de contenidos 1. Introducción 2. Arquitectura 3. Vista general 3.1. Descargar e instalar plugin/extensión 3.2. Registro como desarrollador y activación de la plataforma ...Integración de Oct8ne con Google Analytics 4
Integración de Oct8ne con Google Analytics 4 Introducción Oct8ne permite la integración directa con Google Analytics versión 4 (GA4) a través del envío de eventos. Estos aportan información vital sobre las interacciones que se realizan dentro de ...API envíos transaccionales o masivos desde Whatsapp
Introducción WhatsApp Delivery API permite automatizar el envío de plantillas WhatsApp a través de Oct8ne. Las operaciones disponibles son las siguientes: Enviar plantilla a WhatsApp Consultar estado del envío Consultar resumen de envíos Consultar ...