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 facilites estas instrucciones. La instalación será muy fácil para ellos.
¿EN QUÉ CONSISTE EL WIDGET DINÁMICO?
El widget dinámico de Oct8ne, es un widget que centraliza todos los canales de comunicación de tu empresa a modo de ‘aglutinador’. Tan solo es un botón que permite al usuario visualizar de forma rápida, las vías disponibles de tu empresa para poder comunicarse con ella, ya sea desde los medios más clásicos, como teléfono o mail; hasta canales digitales como redes sociales y chat ‘en vivo’
Vamos a ver como se configura en 2 sencillos pasos. Empecemos:
1.- Enlazar CSS a tu página.
Primero de todo debes invocar al CSS que, por defecto, Oct8ne pone a tu disposición. Debes introducirlo en la página (generalmente en la página master de todo tu sitio web) en la que quieras configurar el widget dinámico de Oct8ne.
Para ellos deberás añadir esta línea en tu web dentro de la etiqueta <head>.
El servidor al que deben dirigirse las llamadas depende del centro de datos Oct8ne al que esté suscrita tu empresa.
** Si tiene dudas sobre qué centro de datos es el adecuado para usted, consulte al equipo de asistencia de Oct8ne.
Una vez realizado pasamos al paso 2.
2.- Añadir el ‘template’ HTML
En este punto deberás añadir un código en la página (generalmente la página master de todo tu sitio web) en la que quieras configurar el widget dinámico de Oct8ne.
Aquí tienes el código:
Este código consta de una capa general contenedora (div #oct8ne-widget-dynamic) dónde en el interior, encontramos otra capa con toda la lista de canales (div .oct8ne-channels).
Dentro de la lista de canales, encontramos cada canal por separado. Cada capa con la clase ‘.channel-item’, corresponde a una bolita en el widget.
Finalmente encontramos la capa del botón principal (.oct8ne-main-btn), que es el botón que inicia la acción.
2.1 - MODIFICAR ESTRUCTURA DE CANALES.
Puedes configurar el widget que desees. Puedes borrar los ítems de la capa (.oct8ne-channels) que no te interesen o que no desees. Quédate solo con los que más te convengan.
Deberás borrar todo la sección correspondiente al ítem (div .channel-item) que no desees.
2.2- MODIFICAR ENLACES
Algunos canales necesitan ser configurados con las ‘urls’ pertinentes de cada red social, o con algún dato adicional. Deberás modificar la propiedad ‘href’ de los enlaces (<a>) correspondientes.
Canal WhatsApp:
Si deseas usar este canal necesitarás construir la URL del número de WhatsApp que vas a usar.
Debes substituir la variable {PhoneNumber} por tu número.
Canal Messenger
Si deseas usar este canal necesitarás construir la URL de tu perfil de Messenger que vas a usar.
Debes substituir la variable {MessengerNameAccount} por el nombre de tu cuenta.
Canal Instagram:
Si deseas usar este canal necesitarás construir la URL del perfil de Instagram que vas a usar.
Debes substituir la variable {InstagramUsername} por el nombre de usuario de tu cuenta de Instagram.
Llamada telefónica:
Si deseas usar este canal necesitarás construir la URL con el número de teléfono deseado.
Debes substituir la variable {Phone} por el número de teléfono.
Enviar Mail:
Si deseas usar este canal necesitarás construir la URL con el correo deseado.
Debes substituir la variable {Email} por un correo válido y con el formato correcto.
¡Enhorabuena! Con estos 2 pasos ya tienes instalado el widget dinámico de Oct8ne
OPCIONES AVANZADAS
MODIFICAR ICONO DEL BOTON PRINCIPAL
El widget dinámico de Oct8ne se puede configurar con diferentes iconos del botón principal.
Oct8ne pone a tu disposición 2 iconos diferentes para que puedas elegir. Esto lo puedes hacer a través de clases de CSS, añadiendo una clase CSS a la capa del botón principal (div .oct8ne-main-btn)
Puedes escoger una de entre las dos imágenes disponibles:
MENU DE PUNTOS EN CIRCULOS
La clase a usar es: circled-icon
BURBUJAS DE CHAT
La clase a usar es: bubble-icon
MODIFICAR POSICIONES
El widget dinámico de Oct8ne se puede configurar en diferentes posiciones de tu web.
Oct8ne pone a tu disposición 4 posiciones para que puedas elegir la que más conviene a tu web. Esto lo puedes hace a través de clases de CSS, añadiendo una clase CSS a la capa contenedora general del widget principal (div #oct8ne-widget-dynamic)
Debes escoger una de entre las cuatro posiciones disponibles:
BOTTOM RIGHT
Aparece el widget en la esquina inferior derecha de tu pagina
La clase a usar es: oct8ne-dynamic-br
**Por defecto, si no se especifica ninguna clase mediante las 2 letras, es bottom-right
TOP RIGHT
Aparece el widget en la esquina superior derecha de tu página.
La clase a usar es: oct8ne-dynamic-tr
BOTTOM LEFT
Aparece el widget en la esquina inferior izquierda de tu página.
La clase a usar es: oct8ne-dynamic-bl
TOP LEFT
Aparece el widget en la esquina superior izquierda de tu pagina
La clase a usar es: oct8ne-dynamic-tl
MODIFICAR ANIMACIÓN
Análogamente, dependiendo de la posición del widget, el efecto de la animación también se puede configurar, modificando la clase de la capa contenedora de canales (.oct8ne-channels).
Puedes escoger una de entre las cuatro animaciones disponibles, según la posición que hayas escogido.
UP: Efecto de animación hacia arriba
La clase a usar es: oct8ne-animation-up
DOWN: Efecto de animación hacia abajo
La clase a usar es: oct8ne-animation-down
RIGHT: Efecto de animación hacia la derecha
La clase a usar es: oct8ne-animation-right
LEFT: Efecto de animación hacia la izquierda
La clase a usar es: oct8ne-animation-left
ADAPTACIÓN EN MOBIL
Existe una clase opcional que se puede usar en determinados escenarios. Debes aplicarla en dispositivos móviles y está pensada para reducir el tamaño del widget, para que se adapte a la mayoría de dispositivos.
Para aplicarla se deberá añadir la clase ‘oct8ne-dynamic-mobile’ a la capa contenedora general (#oct8ne-widget-dynamic).
SOBREESCRIBIR CSS (opcional)
En principio Oct8ne da un widget genérico, pero entendemos que el ‘look and feel’ de tu página es importante para ti, y por eso, siempre podrás sobrescribir las propiedades del CSS del widget dinámico para satisfacer tus necesidades.
Siéntete libre de modificar los colores e incluso los iconos/imágenes que Oct8ne proporciona por defecto. Puedes incluir reglas en tu propio CSS, y no te olvides de añadir ‘!important’ en la regla que vayas a modificar.
Ejemplo de código a incluir en tu CSS:
Related Articles
Diseño widget de Oct8ne custom
¿EN QUÉ CONSISTE EL EMBED LINK o LINK ‘EMBEBIDO’? Los desarrolladores pueden crear enlaces personalizados para acceder al coviewer de Oct8ne. Esto permite que, a la hora de añadir elementos visuales a tu web, tengas una mayor flexibilidad para ...Triggers personalizados o custom
Los triggers de Oct8ne ofrecen la posibilidad de interactuar con el visitante en el momento en que se den unas circunstancias concretas definidas previamente en el apartado de ‘Triggers’ dentro del dashboard de Oct8ne (por ejemplo: tiempo en 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 ...Asignación de agente personalizada
Asignación de agentes avanzada Oct8ne permite a sus clientes, asignar o forzar directamente determinados agentes en una página concreta. No sólo eso, sino que además, el sistema flexible de oct8ne detecta si el agente (forzado) NO está conectado en ...Integra Oct8ne con tu APP mobile
Integración Oct8ne con webviews Funcionamiento básico En apps móviles basadas en un webview que contenga la web del cliente podemos mostrar el chat de Oct8ne, ya sea utilizando el widget en la web del cliente que se lanza dentro del webview, o ...