Diseño Widget Dinámico
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>.
Para Europa:
- <link rel="stylesheet" href="https://static-eu.oct8ne.com/api/dynamic/css/style.css">
El servidor al que deben dirigirse las llamadas depende del centro de datos Oct8ne al que esté suscrita tu empresa.
Una vez dentro del panel de control de Oct8ne, observe la dirección (url) del navegador:
Si es del tipo ‘backoffice.oct8ne.com’, le corresponde el centro de datos de USA.
Si por el contrario es ‘backoffice-eu.oct8ne.com’, le corresponde el centro de datosEU.
En EU, se debe usar → static-eu.oct8ne.com
En USA, se debe usar → static.oct8ne.com
** 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:
- <div id="oct8ne-widget-dynamic" class="oct8ne-dynamic">
- <div class="oct8ne-channels oct8ne-animation-up">
- <div class="channel-item oct8nechat" title="Oct8ne CHAT">
- <a class="oct8nechat oct8ne-widget-on oct8ne-widget-off oct8ne-widget-no
- hide"></a>
- </div>
- <div class="channel-item" title="Open WhatsApp">
- <a class="whatsapp"
- href="https://wa.me/{PhoneNumber}?text={OptionalText}" target="_blank"> </a>
- </div>
- <div class="channel-item" title="Open Messenger">
- <a class="messenger" href="https://m.me/{MessengerNameAccount}"
- target="_blank"></a>
- </div>
- <div class="channel-item" title="Open Instagram">
- <a class="instagram"
- href="https://www.instagram.com/{InstagramUsername}/" target="_blank"> </a>
- </div>
- <div class="channel-item" title="Phone call">
- <a class="oct8nephone" href="tel:+{Phone}"> </a>
- </div>
- <div class="channel-item" title="Send an email">
- <a class="oct8nemail" href="mailto:{Email}"> </a>
- </div>
- </div>
- <div class="oct8ne-main-btn bubble-icon" title="All channels"></div>
- </div>
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 toda 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.
{PhoneNumber} → número de WhatsApp
Ejemplo de URL final: https://wa.me/34666778899
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.
{MessengerNameAccount} → nombre de cuenta de Messenger
Ejemplo de URL final: https://m.me/my_fb_user
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.
{InstagramUsername} → nombre de usuario de Instagram
Ejemplo de URL final: https://www.instagram.com/my_ig_username/
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.
{Phone} → número de teléfono
Ejemplo de URL final: tel:+34666778899
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.
{Email} → correo electrónico
Ejemplo de URL final: mailto:email@server.com
¡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
Ejemplo: En este caso vamos a usar ‘bubble-icon’.
- <div class="oct8ne-main-btn 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
Ejemplo: En este caso vamos a usar ‘top-left’.
- <div id="oct8ne-widget-dynamic" class="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
Ejemplo: En este caso usamos una animación hacia abajo.
- <div class="oct8ne-channels oct8ne-animation-down">
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).
Aplicamos la adaptación en móviles:
- <div id="oct8ne-widget-dynamic" class="oct8ne-dynamic-tl oct8ne-dynamic-mobile">
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:
- .channel-item a.whatsapp {
- background-color: #000000 !important;
- }
- .channel-item a.messenger {
- background-color: #000000! important;
- background-image: url(https://tuserver.com/tusimagenes/tuicono.png) !important;
- }
En caso de que uséis los ‘callouts’ de mensaje, quizá también queráis modificar el CSS
de éstos.
Las capas que debéis modificar es la capa con ID 'oct8ne-alerts-callouts-wrapper' e
interiores
Related Articles
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 ...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 ...Integra Oct8ne con tu APP mobile (mediante webviews)
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 ...Métodos públicos en Javascript
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 ...