La Configuracion de una cuenta Webchat se compone de tres fases, el armado de la ventana, luego se deberá cargar esta en la página web que se desee y por último cargar la cuenta.
El armado de la ventana de chat no difiere del armado de un CRM convencional. Aquí brindaremos los conocimientos básicos para lograr una ventana, en caso de necesitar mayor complejidad dirigirse a el manula de CRM.
La ventana de chat la podremos dividir a su vez en dos partes, siendo la primera donde se solicita los datos del cliente y la segunda donde tiene lugar la conversacion.
Es necesario entender esta composicion debido a que para poder realizar la primer ventana deberemos crear datos/campos, por lo que es sugerible que antes de comenzar con este desarrollo se haga un borrador de los datos que se vayan a incluir.
La ruta para acceder es Configuración CRM -> Datos, donde se deberán dar de alta todos los campos que se deseen incluir en la primer ventana (sea cual fuese el tipo de control a utilizar).
Para agregar un dato basta con presionar agregar y seguir el circuito de alta (para mas información leer el manual de CRM).
Es importante destacar la posibilidad de incluir datos claves como ser CUIT/CUIL/DNI/ID CLIENTE, esto permitirá sincronizar directamente con los contactos del gestor del cliente (en caso de ser inexistente generará un contacto nuevo).
El paso siguiente a la creación de datos es el armado de las ventanas, para ello deberemos seguir la ruta Configuración CRM -> Pantallas & Grillas -> Pantallas, luego posicionarse sobre el registro CHAT y presionar Subpantalla.
Se abrirá una ventana con todas las ventanas de Webchat generadas. Para dar de alta una nueva ventana se deberá presionar agregar y completar los campos correspondientes.
Esto generará un nuevo registro. Ahora para poder editar esto debemos posicionarnos sobre el registro y presionar "Diseño". En la siguiente pantalla se deberá seleccionar la opción "Editar Diseño Pantalla" y aceptar donde se ingresará a una pantalla con un árbol.
Como se puede apreciar, el árbol está conformado por un "Start" y un "End", el primero contiene la primer ventana donde se hará la solicitud de los distintos datos y en el segundo la pantalla de conversación.
Al posicionarnos sobre el nodo "Start" y presionar editar nos abrirá una popup donde podremos desplazar los datos precargados.
En el margen superior de la ventana, como se puede apreciar en la imagen ampliada, se encuentran las etiquetas, botones, grillas, los datos generados previamente, etc. Estos podrán ser arrastrados dentro de la ventana inicial del Webchat.
Finalizado el modelado de la primer ventana, al posicionarse sobre "End" y presionar editar se encontrará con la ventana de chat.
El único campo editable en este nodo es el boton "Attachar", pudiendo habilitarlo o deshabilitarlo.
Finalizada esta etapa se deberá volver a la ventana de las pantallas Chat, posicionarse sobre el registro recientemente agregado y presionar "HTML CODE".
Al presionar HTML CODE abrirá un popup solicitando
- Ip/dominio donde se encuentra alojado el CRM, en este caso debará ser un dominio/ip pública del servidor Neotel.
- Chat directo.
- Mensaje inicial de chat, previamente configurado en respuestas automáticas.
- Adjuntos.
- Emojis.
- Nombre operador, pudiendo seleccionar “Leyenda Operador”, “Leyenda Asesor”, “Nombre agente” o “Nombre y apellido agente”. Es la leyenda que el cliente leerá al utilizar el web-chat.
- Header color
Luego de completar esto, como puede observarse, abrirá una nueva ventana con un código html el cual deberá ser usado en la página web y el Id Aplicación para ser utilizado en la generación de la cuenta.
Deberá introducirse el código html según lo indica en la ventana, ejemplo del código:
La primera parte deberá introducirse dentro del header.
<link rel='stylesheet' href='http://192.168.5.4/ecrm/css/webchat.css' type='text/css' />
La segunda parte del código deberá introducirse al comienzo del body.
<script src='//code.jquery.com/jquery-1.10.2.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
<div id='cntNeoChat' style='position:fixed;right:0px;border:none;width:460px;height:445px;display:none; z-index:999999' >
<div id='Div1' style='position:absolute;top: 0px; left:0px; width:100%;height:30px;background-color: #008FD4;cursor:move;'>
<span id='lblWebChatTitle' style='color:White;width:100%;position:absolute;top:0px;left:0px;text-align:center;font-family:roboto;font-weight:normal;font-size:20px;margin-top:5px'>titulo</span>
<a onclick="javascript:$('#cntNeoChat').slideUp(3000);"><img alt='' style='position:absolute;right:3px;top:3px;width:27px;height:27px;cursor:pointer;cursor:hand;' id='imgWebChatMinimize'/>
</a>
</div>
<div id='containerNeoChat' style='position:absolute;top: 30px; left:0px'>
<iframe src='http://127.0.0.1/ECRM/WebChat.aspx?info=3Hlser5a8Z21YCaDH2Ph49WcEWrLNKhZ1TFBu8gWjJTzd/PFTjEF06ddrdS7vBEzpBWtzvYICeP/VWxxxxxxRrMD45mpMoCSEpx8jALaE5bdHF3wMF7QNGAbhWCpWmhdPtyjYpzDbH1oxMDFC/NE+YvMzdGoDhRs' id='iframeWebCHat' style='border:none;width:460px;height:415px' ></iframe>
</div>
</div>
Y por último, tanto la tercera o cuarta parte del código deberá ubicarse en el boton o link que haga referencia a la comunicación por chat.
onclick="$('#cntNeoChat').draggable();startNeoWebChat();"
<a href="javascript:$('#cntNeoChat').draggable();document.startNeoWebChat()">WebChat</a>
Podrá testear su pantalla webchat pegando la URL dentro de una ventana incógnito.
En este punto ya se tendrá generado el chat y subido a la página, ahora resta asociar la cuenta a la herramienta, para ello debemos ir a la plataforma contactus del Callcenter e ingresar a Redes Sociales -> Webchat. Al ingresar se encontrarán con una grilla con las cuentas de webchat dadas de alta. Al presionar agregar se podrá dar de alta una nueva cuenta.
Dentro se deberá completar el "Id Aplicación" que se debe rescatar de la pantalla de HTML CODE, "Descripción" nombre con el que se reconoce la cuenta e "Imagen de Perfil" cuya imagen será utilizada por el gestor cuando se esté posicionado sobre una conversación de esta cuenta.
Concluido esto se habrá dado de alta una cuenta Webchat.