Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

La Configuracion 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 conversacion.Image Removed

...

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).Image Removed

...

Para agregar un dato basta con presionar agregar y seguir el circuito de alta (para mas información leer el manual de CRM).

...

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.Image Removed

...

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.Image Removed

...

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.Image Removed

...

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.Image Removed

...

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.

...

Finalizada esta etapa se deberá volver a la ventana de las pantallas Chat, posicionarse sobre el registro recientemente agregado y presionar "HTML CODE".Image Removed

...

Al presionar HTML CODE abrirá un popup solicitando

  1. Ip/dominio donde se encuentra alojado el CRM, en este caso debará ser un dominio/ip pública del servidor Neotel + puerto 5278.

  2. Chat directo.

  3. Mensaje inicial de chat, previamente configurado en respuestas automáticas.

  4. Adjuntos.

  5. Emojis.

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

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

...

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.Image Removed

...

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.

...