Personaliza el botón flotante 

Desde la Plataforma ClickFono

Para personalizar tu botón widget es muy fácil y sencillo. Solo debes ingresar al Portal ClickFono y dar click en el módulo de Formularios > Listado de Popups.

La columna Widget es la opción para personalizar el botón Widget. Dar click en el circulo amarillo del servicio que deseas personalizar. 

Al abrirse la ventana de personalización, lo primero que verás es una vista previa de cómo se verá el botón widget en tu sitio web. Debajo de esta vista tienes 2 enlaces:

• El enlace de la izquierda abrirá un video demostrativo donde podrás ver un ejemplo de personalización de un botón widget. 

• El enlace de la derecha abrirá un formulario donde podrás colocar tus datos y solicitar una llamadas de nuestro Equipo de Soporte.

Mas abajo en la misma página, estarán los atributos que permitirán modificar el botón widget:

• POSICIÓN

  • Automática: puedes elegir una ubicación predeterminada 

    • Superior Izquierda

    • Superior Derecha

    • Inferior Izquierda

    • Inferior Derecha

  • Posición a mano

    • Modificando los valores representado en porcentaje podrás mover el widget

      • Arriba

      • Abajo

      • Izquierda

    • Icono a la derecha: Fija el icono del teléfono hacia la derecha

    • Mantener el Widget abierto (Sin animación)

• COLOR

  • Usando la herramienta de paleta de colores o colocando un código RGB, HSL o HEX puedes elegir el color de tu preferencia en distintas partes del botón

    • Fondo

    • Ícono

    • Fondo del ícono

• TEXTO

  • Puedes modificar el texto del botón incluyendo el tamaño, color y fuente de la letra.

Si has finalizado con la personalización de tu botón widget, sólo debes dar click en el botón Guardar que está al final de la página. Y para ver el resultado, puedes verlo en la vista previa o mejor aún, actualizar tu sitio web para ver los cambios del botón. 

De forma avanzada

También se pueden realizar personalizaciones vía CSS, en la página donde se haya insertado el widget. Ver algunos ejemplos abajo.

Fondo del rectángulo, color de fondo del texto, tamaño y fuente del texto, fondo de la imagen, reemplazo de imagen.

<style>

   /*Color fondo rectangulo borde rendondeado*/

   #clickfono-widget #rectangle-rounded {

      background-color: #D9D9D9;}

   /*Color fondo texto*/

   #clickfono-widget #text {

      background-color: #D9D9D9 !important;}

   /*Tamaño y fuente del texto*/

   #clickfono-widget #rectangle-rounded #text {

      color: navy !important;

      font-size: 15px !important;

      font-family: 'Arial' !important;}

   /*Imagen y fondo de la imagen*/

   #clickfono-widget #icon {

      background-color: #FF6600;

      background-image: url(https://s3.amazonaws.com/demo.clickfono.com/assets/css/images/icon-cf-widget_white.png);}<style>

Posición del Widget 

<style>  

  /*Posición del Widget*/  

  #clickfono-widget {    

    bottom: 120px;    

    right: 10px;  

  }

</style>

Bloquear movimiento del icono (Dejarlo abierto) 

<style>

  #icon {

     right: 170px !important;

     z-index: 30 !important;

  }

 #rectangle-rounded {

    display: block !important;

  }

</style>

Modificar Texto 

<script>

   setTimeout(function(){

   document.getElementById("text").innerHTML = 'Te llamamos Gratis';

  }, 1000);

</style>

Fijar Icono hacia la derecha

<style>

  #icon {

    left: 140px !important;

    z-index: 30 !important;

  }

  #text {

    float: none !important;

    left: 84% !important;

  }

</style><br>

Apertura del Widget hacia la derecha 

<style>

  /*Posición del Widget*/

  #clickfono-widget {

    right: px !important;

    left: 500px !important;

    position: relative;

    top: 100px;

  }

  /*Posición del icono*/

  #clickfono-widget #icon {

    right: 500px !important;

  }

  /*Ancho del rectangulo*/

  #clickfono-widget #rectangle-rounded {

    width: 200px;

  }

  #clickfono-widget #rectangle-rounded {

    right: 355px;

  }

  /*posición del texto*/

  #clickfono-widget #text {

    left: 78%;

  }

</style><br> 

Puedes utilizar el estilo que quieras, para que el botón flotante esté acorde con el diseño de tu sitio web.