Cómo configurar una cuenta Webchat

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.

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 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 conversación.

Imagen 1

Es necesario entender esta composición debido a que para poder realizar la primer ventana deberemos crear datos/campos, por lo que 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).

Imagen 2

Para agregar un dato basta con presionar agregar y seguir el circuito de alta.

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 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 el botón Editar nos abrirá una ventana popup para editar.

En el margen superior de la ventana (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.

Terminado 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 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 .

Al presionar HTML abrirá un popup solicitando:

Chat directo.
Campo de mensaje inicial del 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 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 botón 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.