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 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:
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>
<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>
<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.