ClickFono Pop-up Responsivo

ClickFono Pop-up Responsivo


Un pop-up responsivo es aquel que cambia y ajusta su tamaño y contenido a la pantalla en la que se está visualizando. Puede ser en un computador, Tablet o Móvil, el contenido se acomoda y no se ve distorsionado. Para la opción de tener un diseño de pop-up responsivo debes consultarlo vía email con el Equipo de Soporte soporte@clickfono.com.

Luego de tener habilitada la opción del pop-up responsivo, debes ir al Panel Admin e iniciar sesión.

* Seleccionar la opción: Diseños > Listado de diseños


Acá, encontraremos los diseños que fueron creados previamente con ayuda de nuestro equipo de Soporte.

Seleccionar la opción » Editar» del pop-up responsivo que estamos creando. 

Para agregar una imagen, presione la opción » Elegir imagen» a usar en el responsivo, esto es opcional

Presionar » Siguiente«


Seleccionar los campos a mostrar, según información que sea requerida a mostrar para el pop-up responsivo, y presionar » Siguiente«


Presionar de nuevo » Siguiente«


En este último paso, se puede usar un diseño personalizado, insertando el código HTML con los campos identificadores requeridos por ClickFono para estilos y diseño del pop-up responsivo. De no requerir uno personalizado, presionar » Guardar» y se usará el diseño estándar.

Luego de guardar el diseño se debe dirigir a la edición del Popup, y allí habilitar el diseño responsivo.






Los campos identificadores para personalizar el diseño son:

id="header-title" Titulo: Ingresa tus datos y te llamaremos en menos de 20 segundos!
id="name" name="adicional[Nombre]" placeholder="Nombre"
id="lastname" name="adicional[Apellido]" placeholder="Apellido"
id="rut" name="rut" onblur="formatearRut('rut')" placeholder="Rut"
id="email" name="adicional[Email]" placeholder="Email" type="email"
id="number" name="number" type="tel"
id="to_call" name="submit" type="submit" value="Llámame Ahora"
id="text-notice" Tus datos serán encriptados e intransferibles. Las llamadas podrían ser grabadas para mejorar la calidad de atención.
id="footer" Logo clickfono

En caso de no tener un diseño responsivo personalizado, quedaría el diseño estándar por ClickFono, tal como se muestra en la siguiente imagen:

Versión Web - con imagen

Versión Web - sin imagen

Versión Móvil


Para acceder al link que necesita colocar en su portal web, debe ir nuevamente a Panel Admin, opción «Formularios > Listado de Popups«, presionar el botón naranja de la columna «Código» el cual mostrará un recuadro, que indica «Código Modal Responsivo«, seleccionar, copiar y se debe pegar en el <header> del sitio web requerido.



    • Related Articles

    • Diseño Responsivo

      En este caso para usar la opción del diseño responsivo, se debe realizar el mismo Proceso para el diseño básico. El paso adicional es agregar una imagen en la opción de Imagen a usar en responsivo Esta imagen es preferible que tenga las siguientes ...
    • 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 ...
    • API información de llamada ClickFono

      Esta API funciona para las aplicaciones que requieran información completa de una llamada de ClickFono. Este documento explica como ocupar dicha api, con sus parámetros y respuestas. Uso del servicio El servicio se trata de un procedimiento que se ...
    • 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 ...
    • API descarga audio de llamado Clickfono

      Esta API funciona para las aplicaciones que requieran información completa de una llamada de ClickFono. Este documento explica como ocupar dicha api, con sus parámetros y respuestas. Uso del servicio El servicio se trata de un procedimiento remoto ...