Personalización del bot

El ConvoKraft JS SDK soporta la personalización de varios elementos de la ventana de chat para adaptarse a los requisitos específicos de tu aplicación. Los siguientes atributos deben usarse en la etiqueta <convokraft-chat-bot> dentro del archivo index.html del código fuente de tu aplicación web:

• lt-prop-convokraft-title
• show-convokraft-header
• bot-name
• lt-prop-conversation
• show-help
• show-typing-suggestions
• show-action-suggestions
• lt-prop-styles

lt-prop-convokraft-title

Este atributo ayuda a establecer el título de la UI de la ventana de chat.

Código de ejemplo:

<convokraft-chat-bot lt-prop-bot-title="Ask convokraft">
</convokraft-chat-bot>

show-convokraft-header

Este atributo se usa para indicar al bot de ConvoKraft si el encabezado de la ventana de chat debe mostrarse o no. El valor de este atributo puede ser true o false según tu requisito. Por defecto, está establecido en true. Y si el valor se establece en false, el encabezado de la ventana de chat no se mostrará.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" show-convokraft-header="false">
</convokraft-chat-bot>

bot-name

Al proporcionar cualquier nombre de bot específico (namespace del bot) como valor de este atributo, ConvoKraft conversará solo con ese bot particular.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "ecommercebot" ></convokraft-chat-bot>

lt-prop-conversation

Este atributo ayuda a establecer la alineación de los mensajes en la conversación del bot. El valor de este atributo puede establecerse como true o false.

• Si es true, todas las conversaciones de mensajes dentro de la ventana de chat se convertirán a la vista de conversación (los mensajes del usuario se alinean a la derecha y las respuestas de ConvoKraft se alinean a la izquierda de la ventana de chat).

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" lt-prop-conversation="true">
</convokraft-chat-bot>

• Si es false, todas las conversaciones de mensajes dentro de la ventana de chat se alinearán a la izquierda.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" 
lt-prop-conversation="false">
</convokraft-chat-bot>

show-help

Este atributo puede usarse para habilitar un ícono de ayuda adyacente al área de escritura en la ventana de chat. Al hacer clic en el ícono de ayuda, se mostrará una pantalla de bienvenida.

La pantalla de bienvenida contiene las oraciones de ejemplo o sugerencias de acciones configuradas para ese bot de ConvoKraft. El valor para este atributo puede ser true o false. Por defecto, está establecido como false.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true">
</convokraft-chat-bot>

show-typing-suggestions

Este atributo se usa para mostrar las sugerencias de acciones simultáneamente mientras escribes cualquier mensaje en el área de escritura. El valor de este atributo puede ser true o false.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-typing-suggestions="true">
</convokraft-chat-bot>

show-action-suggestions

Este atributo puede usarse para mostrar las sugerencias de acciones al final de cada conversación de chat. El valor de este atributo puede ser true o false.

Si este atributo está habilitado, el atributo show-typing-suggestions se habilitará automáticamente.

Código de ejemplo:

<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-action-suggestions="true">
</convokraft-chat-bot>

lt-prop-styles

Este atributo ayuda a configurar los estilos de los diversos elementos en la UI de la ventana de chat. Los estilos pueden configurarse de la siguiente manera:

Para el atributo lt-prop-styles, los estilos y sus valores deben proporcionarse en formato JSON, como se muestra en el código de ejemplo a continuación:

<convokraft-chat-bot  lt-prop-conversation="true" 
lt-prop-styles='{"headerBg":"#5acc42", "headerText":"black", "headerFont":"sans-serif", "userBg":"#5acc42", "userText":"black", "botBg":"#ddd", "botText":"#222", "userFont":"Comic Sans MS", "botFont":"Arial", "bodyBg":"#ddd"}'>
</convokraft-chat-bot>