Agregar un botón flotante de ClickFono


Para agregar un botón flotante de ClickFono como el que está a continuación:


Si tu página está hecha en WordPress debes seguir los pasos que se muestran a continuación:

  1. Debes copiar en el portapapeles el código del pop-up ClickFono, suministrado previamente por el Equipo de Soporte.
  2. Luego debemos pegar ese código en nuestro sitio web.
  3. Finalmente, debemos guardar los cambios generados.
  4. Si deseas instalar un Pop-up de ClickFono responsivo, debes debes solicitarlo a soporte@clickfono.com.

NOTA: Si quieres instalar distintos botones flotantes, que correspondan cada uno a distintas secciones de tu página web, no debes realizar este procedimiento. Si necesitas ayuda, por favor, contacta a nuestro Equipo de Soporte a soporte@clickfono.com y con gusto te apoyaremos.


En un widget HTML:

En el footer.php:

O en un plugin:


Si tu página no está hecha en WordPress los pasos son igual de simples. Sólo debes copiar y pegar una parte del código en tu archivo HTML, antes del cierre de la etiqueta </body> y listo.


Para personalizar el botón flotante de ClickFono se puede utilizar los siguientes códigos:

Fondo de Rectángulo, color de fondo del texto, tamaño ya 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.