Diseño Básico
Para crear un diseño básico, primero se deberá de crear una imagen (JPG o PNG), las dimensiones recomendadas para la imagen son de 340 x 398 px, 72 pp.
Esta imagen debe tener el un espacio considerable para ubicar los campos básicos (NOMBRE Y NÚMERO DE TELÉFONO) y el botón de "Solicitar Llamada"
Ejemplo:
Estado Disponible / Dentro de horario
A parte del diseño de la gráfica inicial, se deberán de crear otros adicionales con mensajes de comportamiento del servicio ClickFono® con las mismas dimensiones
Estado Llamada en progreso / Texto alternativo: "Te estamos llamando".
Estado Fuera de Horario / Texto alternativo: "Estimado cliente, nuestro servicio se encuentra fuera del horario de atención".
Estado Ocupado / Texto alternativo: "Nuestros ejecutivos se encuentran ocupados, favor, intentar más tarde".
Estado Llamada finalizada / Texto alternativo: "Llamada terminada, gracias por preferirnos".
Estado Deshabilitado / Texto alternativo: "Nuestro servicio se encuentra momentáneamente fuera de servicio. Servicio No disponible".
Además de diseñar la imagen inicial y los estados de la llamada, debemos crear el diseño del botón de llamada. Ejemplo:
El diseño del botón deberá estar por duplicado tal y como lo muestra el ejemplo, siendo el duplicado de abajo ligeramente más claro o más oscuro, para que exista una diferencia al colocar el puntero encima y hacer click. Las dimensiones del alto de la imagen deberán de ser de número par, si no, tendremos un error de visualización. El recomendado es 190 x 76 px, 72 pp
Luego de haber creado todas las imágenes, es momento de proceder a crear el diseño en la Plataforma ClickFono, y para ello hay que ejecutar los siguientes pasos:
1.- Click en nuevo diseño
2.- Colocar Nombre al Diseño
3.- Cargar todas las imágenes creadas a la opción correspondiente. Nota: la opción Logo empresa no se usa actualmente, por la cual el logo debe considerarse en la imagen inicial.
Por último dar click en Siguiente.
4.- En esta sección podrás elegir los campos necesarios para tu formulario, la preferencia de logo en el Popup y la ubicación manual (a través del cursor) de los campos y el botón. Luego dar click en Siguiente.
5.- Por defecto, la plataforma ofrece un texto del estado de la llamada, este puedes hacer que desaparezca cambiando de color (dejándolo en blanco). Si bien deseas usar este estado, sólo debes ubicarlo en donde quieras de forma manual y darle el color que prefieras. Nota: si usas el texto del estado por defecto, sugerimos quitar los textos que puedan tener en la imagen para no crear confusión a tu cliente.
Además del texto del estado, también puedes dar ubicación manual al ícono del "loading" (imagen gif) que se aparece en el momento en que se están ejecutado las llamadas.
6.- En este último paso se tiene la posibilidad de hacer cualquier personalización a nivel de desarrollador, ya que aquí está una opción para agregar cualquier modificación usado código HTML ccs o JavaScript.
Como ejemplo tienes la opción de personalizar características de los campos insertos anteriormente en su Pop-up con cierto código usando Javascript, ejemplo:
<script>
$j(document).ready(function(){
$j('#firstname').attr('style','font: 13px Arial; width:180px;');
$j('#firstname').attr('placeholder',"Nombre y Apellido");
$j('#lastname').attr('style','font: 13px Arial; width:180px;');
$j('#lastname').attr('placeholder',"Apellido");
$j('#email').attr('style','font: 13px Arial; width:180px;');
$j('#rut').attr('placeholder',"RUT");
$j('#rut').attr('style','font: 13px Arial; width:180px;');
$j('#phonenumber').attr('style', 'font: 13px Arial; width:135px;');
$j('#areacode').attr('style', 'font: 13px Arial; width: 30px;');
$j('#dv_phonenumber > div:nth-child(1)').css('width','35px');
});
</script>
Para mayor información consultar con el Equipo de Soporte a soporte@clickfono.com
En caso de no querer usar esta sección, sólo debe dar click en guardar y se habrá creado tu nuevo Diseño Básico. Sólo deberás asignarlo en tu formulario y probarlo.
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 ...Glosario de Términos
Términos básicos utilizados. Término Definición Llamada Exitosa Llamada con duración cliente igual o mayor a 25 segundos. Personalización de Pop-up «Al presionar el botón de acción para solicitar el llamado instantáneo, al usuario se le pide su ...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 ...Agrega opciones a tu formulario
Una función que será muy útil para tus operaciones es el poder derivar las solicitudes de llamadas al ejecutivo que corresponda sin la necesidad de que tu cliente tenga que marcar una opción en un IVR o contestadora automática. Formulario con Lista ...Personalizar mensaje de comportamiento del servicio
En caso de que en las imágenes de los estados no se coloque el mensaje del comportamiento del servicio, la plataforma ya tiene 4 mensajes de forma predeterminada que indica dicho comportamiento. Estamos conectando tu llamada Un ejecutivo te está ...