La configuración 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.
...
Aquí brindaremos los conocimientos básicos para lograr una ventana, en caso de necesitar mayor complejidad dirigirse a la explicación 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 conversacionconversación.
...
Es necesario entender esta composicion composición debido a que para poder realizar la primer ventana deberemos crear datos/campos, por lo que es sugerible se sugiere 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 el botón Subpantalla.
...
Se abrirá una ventana con todas las ventanas de Webchat generadas. Para dar de alta una nueva ventana se deberá presionar agregar +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 en la Imagen 5, el árbol está conformado por un "nodo de Start" y un "nodo de 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 el botón Editar nos abrirá una popup donde podremos desplazar los datos precargadosventana popup para editar.
...
En el margen superior de la ventana , como se puede apreciar en la imagen ampliada(Imagen 6), se encuentran las etiquetas, botones, grillas, los datos generados previamente, etc. Estos podrán ser arrastrados dentro de la ventana inicial del Webchat.
Finalizado Terminado el modelado de la primer ventana, al posicionarse sobre "End" y presionar editar Editar se encontrará con la ventana de chat. El único campo editable en este nodo es el boton "botón 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 + puerto 5278.
:
Chat directo.
Mensaje Campo de mensaje inicial de chat, previamente configurado en respuestas automáticasdel chat.
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 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 HTML según lo indica en la ventana, ejemplo del código:
La primera parte deberá introducirse dentro del header.:
| Code Block | ||
|---|---|---|
| ||
<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.:
| Code Block | ||
|---|---|---|
| ||
<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 botón o link que haga referencia a la comunicación por chat.
| Code Block | ||
|---|---|---|
| ||
onclick="$('#cntNeoChat').draggable();startNeoWebChat();" |
...
<a href="javascript:$('#cntNeoChat').draggable();document.startNeoWebChat()">WebChat</a> |
Podrá testear su pantalla webchat 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 Contactus del Callcenter e ingresar a Redes Sociales - > Webchat. Al ingresar se encontrarán con una grilla con las cuentas de webchat Webchat dadas de alta. Al presionar agregar +Agregar se podrá dar de alta una nueva cuenta.
...