Parámetros de JavaScript válidos en el widget del bot – Arkibot

Como te habrás dado cuenta, es muy sencillo instalar el bot en tu web utilizando un código que nosotros mismos te facilitamos.

No obstante, si eres un usuario avanzado, es posible que tengas algunas inquietudes de personalización de la información que muestra el bot.

En esta guía vamos a revisar cuáles son los parámetros que puedes modificar directamente en el código del widget para conseguirlo.

Lo primero que debes hacer es ir a Panel de Bots > Ajustes > Código widget.

El apartado donde vas a poder modificar los parámetros es dentro de las llaves de la variable arkibotSettings.

En general, los parámetros que veremos aquí son las mismas personalizaciones que puedes hacer visualmente en el apartado Panel de Bots > Ajustes > Configuración widget solo que al tener acceso al código, tienes mayor flexibilidad de personalización, como en el caso del mensaje de bienvenida.

➕ En esta otra guía puedes ver las opciones de ese apartado de configuración visual: Personalizar el diseño del widget de tu bot

Parámetros por defecto

Los primeros dos que te vas a encontrar son la configuración más importante del bot, pues indican el identificador de tu bot y la URL de tu Plan Arkibot a donde va a ir a buscarlo.

Es importante que no modifiques estos dos parámetros.

Se trata de:

"botId": "-aqui-va-una-serie-de-numeros-y-letras-que-identifican-a-tu-bot",

"botUrl": "-esta-es-la-url-de-tu-plan-de-arkibot",

"position": "bottom-right-1,

Por defecto, tu bot sale en esta posición, que quiere decir que está abajo a la derecha de tu web, con un cierto margen predeterminado.

Este parámetro se puede modificar para personalizar la posición donde quieres que salga el widget de tu bot, es decir, en la parte derecha (right) o izquierda (left) y con separación 1, 2 ó 3.

bottom-right-1

bottom-left-1

bottom-right-2

bottom-left-2

bottom-right-3

bottom-left-3

En esta guía lo explicamos más a detalle: Cómo mover el widget de tu bot en tu sitio web

"pollingIntervalTime": 15,

Esta configuración es para determinar cada cuantos segundos pregunta el widget al servidor si hay nuevos mensajes para descargar. Por defecto, son 15 segundos.

Parámetros de apariencia

"overlayText": 'Pregúntame',

Es el texto que aparece en la parte inferior del avatar. Solo debes modificar el texto que viene entre las comillas simples.

"showBotNameOverlay": true,

Al abrir la ventana del chat, determina si aparece el nombre del bot o no en la cabecera de la ventana de la conversación. Sus valores con true o false.

"primaryColor": '#6366F9',

"secondaryColor": '#FCC114',

"headerColor": '#6366F0',

Con estos parámetros configuramos la apariencia del widget del bot en cuanto a sus colores primario (primaryColor) y secundario (secondaryColor). El tercer parámetro es para el color de la cabecera (headerColor).

El valor del color elegido debe ir entre comillas simples y puede asignarse con:

Hexadecimal ⇒ #FA8072

RGB ⇒ rgb(250, 128, 114)

Código de color ⇒ salmon

"horizontalMargin": '0px',

"verticalMargin": '0px',

Adicional al posicionamiento del bot en la pantalla, nos permite generar un margen con respecto al borde de la página. Este parámetro es en píxeles.

Distancia respecto al borde lateral ⇒ horizontalMargin

Distancia respecto al borde inferior ⇒ verticalMargin

Parámetros de comportamiento

"askName": true,

"askEmail": true,

Permite configurar si el bot va a preguntar el nombre del visitante y su email justo al iniciar la conversación. Sus valores con true o false.

"showDropDownMenu": true,

"showHelpMenuItem": true,

"showSendEmailMenuItem": true,

Estos tres parámetros están relacionados con el menú desplegable de opciones que tenemos en la ventana del chat. Los tres se especifican con true si queremos que aparezca o false si no es así.

Menú de opciones ⇒ showDropDownMenu

Opción de enviar feedback ⇒ showHelpMenuItem

Opción de enviar chat por email ⇒ showSendEmailMenuItem

"welcomeMessage": "¡Hola! Estoy aquí para ayudarte con tus consultas.",

Este parámetro sirve para configurar el mensaje de bienvenida que da el bot cuando el visitante abre la ventana del chat.

Este mensaje de bienvenida puede ser un punto de partida para la funcionalidad de chat de flujo si se le añaden botones que estén enlazados a intents específicos.

Ejemplo de código:

💬

"welcomeMessage": "¡Bienvenido! Elige una opción: <button class='btn btn-sm btn-secondary' onclick='window.wevue.shortcodeGetIntentResponse(\"categoria.opciones.opcion-a\", \"bot-id\" )'>Opción A</button> <button class='btn btn-sm btn-secondary' onclick='window.wevue.shortcodeGetIntentResponse(\"categoria.opciones.opcion-b\", \"bot-id\" )'>Opción B</button>",

En este código, hay tres opciones que debes personalizar:

\”categoría.opciones.opcion-a\” ⇒ aquí va el intent con el que estará enlazado el botón

\”bot-id\” ⇒ aquí va el identificador de tu bot, que está en el parámetro botId del mismo código del widget

Opción A ⇒ previo al cierre de la etiqueta </button> se establece el texto que llevará el botón

Cómo se vería en el chat:

"initialQuestion": "¿Ya eres cliente?”,

Permite que al abrir la ventana del chat se muestre una pregunta al inicio de la conversación.

Con base en la respuesta del visitante, podemos evitar que se muestre el recuadro para iniciar la conversación con el bot o que sí permita escribir para poder hablar con el chatbot. Puede servir por ejemplo, para delimitar consultas de clientes y no clientes.

Este parámetro solo define la pregunta, para que funcione correctamente, debe utilizarse en conjunto con el siguiente parámetro:

“initialQuestionResponses”: [{ … }]

Se trata de la estructura más compleja que va a definir las posibles respuestas que va a recibir el bot a la pregunta inicial y el comportamiento que va a seguir con base en ellas.

Lo primero que hay que definir es el texto que tendrá la respuesta, por ejemplo:

"text": "Sí, soy cliente"

Luego, se determina la acción que ocurrirá si se pulsa dicho botón con el parámetro:

"action”: { … }

Dentro de "action” se definen otros dos parámetros:

Para que el bot se detenga ⇒ "type": "replyAndStop",

Para que el bot continúe ⇒ "type": "replyAndContinue",

Y finalmente, se define la respuesta que dará el bot cuando se pulse en el botón:

"response": "Si ya eres cliente, por favor accede a tu área de cliente desde aquí.”

Aquí tienes un ejemplo de todo el código:

"initialQuestion": "¿Ya tienes cuenta?",
"initialQuestionResponses": 
[
		{
		"text": "Sí",
		"action": 
				{
				"type": "replyAndStop",
				"response": 'Si ya tienes cuenta, por favor accede a tu cuenta desde <a href="#">este enlace</a>.'
				}
		},
		{
		"text": "No",
		"action": 
				{
				"type": "replyAndContinue",
				"response": "Ok, dime ¿qué consulta tienes? :)"
				}
		}
]

En la ventana del chat se vería así:

Si estamos utilizando el bot como chat de flujo, esta funcionalidad puede utilizarse como punto de partida para la conversación a través de la cual vamos a ir guiando al visitante a través de intents. Puedes leer más en esta guía: Como crear un chat de flujo