7. Personalizar

En esta guía se describen los ajustes "Avanzados" de la sección de personalización del widget del chatbot, que permiten refinar aún más el comportamiento y la funcionalidad del chatbot.

Personalización de la apariencia de su chatbot

La página de personalización de tu chatbot está dividida en diferentes pestañas: Contenido, Apariencia, Avanzado, Mensaje sin conexión y CSS personalizado. En esta guía, nos centramos en los Ficha Contenidoque permite cambiar el texto que ven los usuarios cuando interactúan con el chatbot.

Ficha Contenido

En la pestaña Contenido, puede personalizar el texto que se muestra a los usuarios cuando interactúan con el chatbot.

Rúbrica

• Introducir encabezamiento - Introduzca un título en el campo "Título". Este texto es lo primero que ven los usuarios, normalmente en la parte superior del widget de chat. Ejemplo: "Soy tu asistente de IA".

Descripción

• Añadir descripción - Introduce una descripción en el campo "Descripción". Esto debería dar a los usuarios más contexto sobre las capacidades del chatbot, por ejemplo: "Pregúntame cualquier cosa. Intento responder basándome en los datos de este sitio web".

Texto de marcador de posición para el campo de entrada del chat

• Personalizar el texto del marcador de posición - Introduzca el texto deseado en el campo "Texto de entrada del chat". Puede ser un mensaje del tipo "Escriba su mensaje".

Mensajes de bienvenida

• Añadir mensaje de bienvenida - Añade un mensaje de bienvenida que los usuarios recibirán la primera vez que contacten con el chatbot. Escribe tu mensaje en el campo correspondiente y haz clic en "Añadir mensaje de bienvenida".

Mensaje emergente de bienvenida y retraso

• Mostrar mensajes de bienvenida en una ventana emergente - Active "Mostrar mensajes de bienvenida como popup" si desea que el mensaje de bienvenida aparezca como popup.
• Establecer retardo emergente - Introduzca un valor en milisegundos en el campo "Mostrar ventana emergente después de (ms)" para especificar tras cuántos milisegundos debe aparecer la ventana emergente después de que se haya cargado la página.

La ventana emergente no molesta a los visitantes de su página de inicio y también puede indicarse mediante emojis en el chat.

Ejemplos de preguntas

• Añadir ejemplos de preguntas - Introduce una pregunta de ejemplo para mostrar a los usuarios lo que pueden preguntar al chatbot. Introduzca la pregunta en el campo "Pregunta" e introduzca una etiqueta en el campo "Etiqueta". A continuación, haz clic en "Añadir pregunta de muestra".

Vista previa de los cambios

• Avance en directo - En la parte derecha de la pantalla, verás una vista previa en directo del widget del chatbot. A medida que realices cambios en los ajustes de personalización, esta vista previa se actualizará en tiempo real para reflejar los cambios.

Guardar las personalizaciones

• Guardar personalizaciones - Cuando estés satisfecho con los cambios, haz clic en el botón "Actualizar estilo del widget" en la parte inferior derecha de la página para aplicar los cambios a tu widget de chatbot en directo.
• Volver sin guardar - Si desea volver a la página anterior sin guardar, pulse el botón "Volver" en la parte inferior izquierda.

Apariencia

Personaliza la apariencia de tu widget de chatbot

Esta guía te ayudará a personalizar el aspecto visual de tu widget de chatbot para que encaje a la perfección con el diseño y la identidad de marca de tu sitio web.

Acceso a los ajustes de la apariencia

1. Inicie sesión en el panel de control de su chatbot.
2. Haga clic en "Personalizar" en el menú de navegación de la izquierda.
3. Dentro de la sección "Personalizar", vaya a la pestaña "Aspecto", que aparece resaltada en la interfaz.

Personalización de la apariencia del widget del chatbot

Color de fondo (Background Color)

• Seleccionar color - Localice el campo "Color de fondo". Haz clic en el campo de color para seleccionar un color o introduce un código hexadecimal (por ejemplo, #000000 para el negro) para adaptar el color a la combinación de colores de tu sitio web.

Color del texto (Text Color)

• Cambiar el color del texto - En el campo "Color del texto", puede hacer clic en el campo de color para seleccionar un color o introducir un código hexadecimal (por ejemplo, #FFFFFFFF para el blanco) que ofrezca un buen contraste con el color de fondo para mejorar la legibilidad.

Radio de esquina (radio del borde)

• Redondear las esquinas - Ajusta el campo "Radio del borde" para cambiar el redondeo de las esquinas del widget del chatbot. Introduce un valor en píxeles (por ejemplo, 12px) para determinar cuánto deben redondearse las esquinas.

Posición del widget (posición del widget)

• Fijar la posición del widget - Seleccione la posición del widget en su sitio web seleccionando "Izquierda" o "Derecha". Esto determina en qué lado de la página aparecen el icono del chatbot y la ventana.

Vista previa de los cambios

• Avance en directo - A medida que realice cambios en la configuración de la apariencia, la vista previa en vivo en la parte derecha de la pantalla se actualizará para reflejar sus personalizaciones. Utilice esta vista previa para evaluar cómo se verá el chatbot en su sitio web.

Aplicar el aspecto personalizado

• Guardar cambios - Cuando estés satisfecho con el aspecto del widget del chatbot, haz clic en el botón "Actualizar estilo del widget" de la parte inferior derecha para guardar los cambios y aplicarlos a tu sitio web.
• Volver sin guardar - Si desea volver a la página anterior sin guardar los cambios, pulse el botón "Volver" en la parte inferior izquierda.

Ficha Avanzado

Aviso básico

En el campo "Base Prompt" se definen las instrucciones básicas que debe seguir el chatbot. Esto sirve de base para las respuestas del chatbot.

• Ejemplo de consulta base - "¡Eres un chatbot muy entusiasta al que le encanta ayudar a la gente! Tu nombre es {{chatbotName}} y tu tarea es responder a las consultas basadas en el contexto proporcionado y los mensajes anteriores, en formato Markdown. Si los datos proporcionados no permiten una respuesta, responde con '{{defaultAnswer}}'."

Esta instrucción básica puede personalizarse según sus necesidades. Por ejemplo, si quieres que tu chatbot responda exclusivamente en francés, puedes añadir la instrucción: "Responder sólo en lengua francesa".

Consejo:

Es aconsejable dar al chatbot alguna información básica sobre su sitio web en el prompt base para dar a las respuestas más contexto.

Respuesta por defecto

El campo "Respuesta por defecto" permite definir una respuesta por defecto que el chatbot utilizará si no encuentra una respuesta adecuada a una solicitud.

• Ejemplo de respuesta estándar - "No sé cómo responder a eso"
• Puede adaptar este texto como desee o traducirlo a otro idioma. Por ejemplo, puede escribir
  "Lo siento, no tengo la respuesta. Envíe un correo electrónico a hi@example.com en busca de ayuda".

Esta respuesta da al chatbot la oportunidad de responder amablemente a las solicitudes que no puede procesar.

Captura de correo electrónico (Collect Email)

Si esta opción está activada, el chatbot puede solicitar una dirección de correo electrónico a los usuarios si no puede responder a su consulta. Esto es útil para permitir el seguimiento con el cliente.

Mostrar enlaces "Leer más" (Show Read More Links)

Si activas esta opción, el chatbot añadirá enlaces "Leer más" a las respuestas que permitan a los usuarios obtener información adicional.

• Leer más texto - Aquí puede personalizar el texto que se muestra para los enlaces "Leer más". Por defecto, es "Leer más:"
• Puede cambiar este texto para adaptarlo mejor a su marca o a la experiencia del usuario.

Selección del modelo para el chatbot

En esta sección, puede seleccionar el modelo de lenguaje que debe utilizar su chatbot. Dependiendo del modelo seleccionado, el rendimiento y el comportamiento de su chatbot cambiarán. Aquí se describen en detalle los modelos disponibles:

1. GPT-3.5-Turbo

• Descripción - GPT-3.5-Turbo es una versión optimizada de GPT-3 y ofrece un rendimiento más rápido y eficiente. Es muy adecuada para tareas de IA estándar y ofrece un buen equilibrio entre coste y rendimiento.
• VentajasTiempos de respuesta rápidos y amplia aplicabilidad a las tareas conversacionales cotidianas.

2. GPT-4

• Descripción - GPT-4 es el último modelo lingüístico de OpenAI y ofrece un procesamiento del lenguaje mejorado, una mayor comprensión del contexto y respuestas más precisas en comparación con sus predecesores.
• VentajasMayor precisión y mejor calidad de las respuestas, ideal para tareas más complejas.

3. GPT-4-Turbo

• Descripción - GPT-4-Turbo es una versión más potente y rápida de GPT-4, que combina las funciones avanzadas de GPT-4 con recursos optimizados para una mayor velocidad de cálculo.
• Ventajas - Alta velocidad de respuesta con las funciones avanzadas de GPT-4. Ideal para situaciones en las que la velocidad y la precisión son igual de importantes.

4. GPT-4o

• Descripción - Este modelo es una variante experimental de GPT-4 diseñada específicamente para optimizaciones y ampliaciones. Ofrece personalizaciones únicas orientadas a casos de uso específicos.
• Ventajas - Opciones de personalización ampliadas para requisitos muy específicos o escenarios de aplicación experimentales.

Conclusión - La elección del modelo adecuado depende de los requisitos de su aplicación. Si desea una solución estándar de alto rendimiento, GPT-4 o GPT-4-Turbo pueden ser la mejor opción. Para aplicaciones críticas de protección de datos, un LLM privado de Konfuzio puede ofrecer una alternativa al proporcionar un equilibrio óptimo entre rendimiento y seguridad.

Resumen

Los ajustes "Avanzados" le ofrecen opciones flexibles para personalizar aún más las respuestas de su chatbot. Puede refinar las instrucciones básicas, proporcionar una respuesta predeterminada y añadir funciones adicionales como la captura de direcciones de correo electrónico y enlaces de "Leer más". Estas configuraciones ayudan a que su chatbot sea más fácil de usar y eficiente, al tiempo que satisface las necesidades de sus clientes.

CSS personalizado

Acceso a las funciones CSS personalizadas

• Inicie sesión en el panel de control de su chatbot.
• Seleccione la opción "Personalizar" en el menú de navegación de la izquierda para abrir las opciones de personalización.
• Haga clic en la pestaña "CSS personalizado", que es la última opción del menú de pestañas.

Comprender el CSS personalizado

• CSS personalizado (hojas de estilo en cascada) te permite realizar cambios de estilo específicos en el widget del chatbot que no están disponibles en la interfaz de personalización estándar. Esto incluye cambios en el tamaño de las fuentes, los colores, el espaciado y otros elementos visuales.

Precaución al utilizar

• Es importante utilizar la función CSS personalizada con cuidado. Un CSS incorrecto puede provocar problemas de visualización o conflictos con los estilos existentes en su sitio web.
• Utilice CSS personalizado sólo si está familiarizado con la sintaxis CSS y comprende los cambios que está realizando.
• Tenga en cuenta que usted es responsable de garantizar la compatibilidad con versiones anteriores para futuras actualizaciones de la plataforma de chatbot.

Aplicar CSS personalizado

• Puede escribir o insertar su código CSS en el área de texto "CSS personalizado". Por ejemplo, el código proporcionado se ajusta a .ai-assistant-header p { line-height: 1.6; } La altura de línea de los párrafos de la cabecera del chatbot.
• Puede seleccionar elementos específicos dentro del widget del chatbot por sus nombres de clase y aplicar los estilos deseados con reglas CSS estándar.

Vista previa de los cambios

• A medida que apliques CSS personalizado, la vista previa en vivo de la parte derecha de la pantalla se actualizará para reflejar tus cambios. Esto le permite ver inmediatamente cómo su código afectará a la apariencia del chatbot.

Guardar los cambios CSS personalizados

• Una vez que hayas completado tus personalizaciones CSS, haz clic en el botón "Actualizar estilo del widget" en la parte inferior derecha de la pantalla para guardar los cambios y aplicarlos al widget del chatbot.
• Si decide no aplicar los cambios o volver a los estilos por defecto, haga clic en el botón "Volver" de la parte inferior izquierda para salir de la interfaz CSS personalizada sin guardar.