Personaliza el botón flotante

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:

  1. El enlace de la izquierda abrirá un video demostrativo donde podrás ver un ejemplo de personalización de un botón widget. 
  2. 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:
  1. POSICIÓN
    1. Automática: puedes elegir una ubicación predeterminada 
      1. Superior Izquierda
      2. Superior Derecha
      3. Inferior Izquierda
      4. Inferior Derecha
    2. Posición a mano
      1. Modificando los valores representado en porcentaje podrás mover el widget
        1. Arriba
        2. Abajo
        3. Izquierda
      2. Icono a la derecha: Fija el icono del telefóno hacia la derecha
      3. Mantener el Wigedt abierto (Sin animación)


  1. COLOR
    1. 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
      1. Fondo
      2. Ícono
      3. Fondo del ícono


  1. TEXTO
    1. 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);
</script>


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.


    • Related Articles

    • Agregar un botón flotante de ClickFono

      Agrega un botón flotante de ClickFono como el que está a continuación sólo en 2 pasos: Si tu página está hecha en WordPress debes seguir los pasos que se muestran en el siguiente vídeo: Ingresa a ClickFono Click en Popups Copia el Código Custom ...

    • Servicio Fuera de Horario de Atención

      Nuestro servicio ClickFono tiene un comportamiento especifico al momento de que el Popup se encuentre fuera de Horario de Atención al Cliente, y este se configura en cada Popup dentro del Panel Admin. En la edición de un Popup se encuentra un campo ...

    • Dirección de un pop-up y UUID

      La dirección del pop-up es la URL web a la que apunta el botón de Te Llamamos en el sitio web. En el ejemplo anterior, el botón Te llamamos ahora dirige a la URL ...

    • Asignar un Agente (teléfono) a un Popup

      En este articulo, indicaremos como cambiar un Agente (teléfono) a un popup. Primero, debes ingresar al portal Admin ClickFono, con un usuario que tenga privilegios Admin. Si no tienes una cuenta Admin, comunícate con tu encargado TI o solicítalo a ...

    • Agregar URL del Popup a firma de correo

      Las firmas de los correos pueden tener un Link directo al Popup. Luego que el equipo de Soporte de ClickFono haga entrega del Link del Pop-up configurado para su empresa ( Ej. ...