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.
