Breve descripción general

El siguiente artículo explica cómo se puede cambiar la apariencia del ActionBot utilizando CSS.

Antes de cambiar el CSS, si planeas añadir tu propio logotipo e iconos de Bots, recomendamos que primero los cargues en la Biblioteca de activos.

1. Carga todos los archivos a la Biblioteca de activos.
2. Copia el ID.
3. Guarda los ID copiados en algún lugar para que puedas añadirlos al CSS más tarde.

Tutorial en video

Consulta este video para un tutorial rápido sobre el CSS de ActionBot.

Estilo de ActionBot utilizando CSS

Para cambiar la apariencia del ActionBot,

1. Ve al Editor
2. Abre ActionBot (Todos los elementos → ActionBot).
3. Ve al Bot.
4. Haz clic en Personaliza el aspecto y el diseño de tu Bot.
5. Haz clic en Personalizaciones avanzadas para abrir el Editor de CSS

Cambiar el color del encabezado del cuadro de diálogo de chat

Selector de CSS: .chat-wrapper .chat-header

Ejemplo de CSS:

.chat-wrapper .chat-header {

background: red !important;
border: red !important;

}

Cambiar el color del texto del mensaje del cuadro de diálogo

Selector de CSS: .message .message-text

Ejemplo de CSS:

.message .message-text {

color: red !important;

}

Cambiar el color de fondo de la burbuja del mensaje

Selectores de CSS:

• .message .message-text
• .message .message-text-arrow::before
• .message .message-text-arrow::after
• .message.user-message .message-text
• .message.user-message .message-text-arrow::before
• .message.user-message .message-text-arrow::after

Ejemplo de CSS:

.message .message-text {

background: red !important;

}

.message .message-text-arrow::before {

background: red !important;

}

.message .message-text-arrow::after {

background: red !important;

}

Para cambiar el mensaje del usuario:

.message.user-message .message-text {

background: red !important;

}

.message.user-message .message-text-arrow::before {

background: red !important;

}

.message.user-message .message-text-arrow::after {

background: red !important;

}

Eliminar la sombra de los mensajes.

Para eliminar la sombra detrás del cuadro de mensaje, añade la siguiente línea en las declaraciones:

• .message .message-text
• message .message-text-arrow::before
• .message .message-text-arrow::after

Ejemplo de CSS:

.message .message-text {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::before {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::after {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !important;

}

Cambiar el color del texto del mensaje de error

Selector de CSS: .message .message-text-error

Ejemplo de CSS:

.message .message-text-error {

color: red !important;

}

Cambiar el logotipo del encabezado

Selector de CSS: .chat-wrapper .chat-header .chat-logo

Ejemplo de CSS:

.chat-wrapper .chat-header .chat-logo {

background: url(https://.....image...) no-repeat center center !important;
background-size: 82px !important;
width: 82px !important

}

Cambiar el color del botón ENVIAR

Selectores de CSS:

• .input-send .message-btn
• .input-send .message-btn:disabled
• .input-send .message-btn:hover

Ejemplo de CSS:

.input-send .message-btn {

background-color: red !important;

}

.input-send .message-btn:disabled {

background-color: red !important;

}

.input-send .message-btn:hover {

background-color: orange !important;

}

Cambiar el icono de ActionBot.

Selectores de CSS:

• .message-bot-icon
• .message-bot-icon-error

Ejemplo de CSS:

.message-bot-icon {

background-image: url(https://.....image...)!important;

}

.message-bot-icon-error {

background-image: url(https://.....image...)!important;

}

Cambiar el color del icono "eliminar mensaje"

Selectores de CSS:

• .message.can-be-removed .chat-message-remove
• .message.can-be-removed .chat-message-remove:hover

Ejemplo de CSS:

.message.can-be-removed .chat-message-remove {

background-color: red !important;
color: red !important;

}

.message.can-be-removed .chat-message-remove:hover {

background-color: red !important;
color: red !important;

}

Cambiar el color del icono "comenzar de nuevo"

Selectores de CSS:

• .chat-wrapper .chat-btn-over
• .chat-wrapper .chat-btn-over:hover

Ejemplo de CSS:

.chat-wrapper .chat-btn-over {

background-color: orange !important;
color: black !important;

}

.chat-wrapper .chat-btn-over { 

background-color: orange !important; 
color: black !important; 

}

Cambiar el color del icono "abrir chat en vivo"

Selectores de CSS:

• .chat-wrapper .chat-btn-live-chat
• .chat-wrapper .chat-btn-live-chat:hover

Ejemplo de CSS:

.chat-wrapper .chat-btn-live-chat {

background-color: orange !important;
color: black !important;

}

.chat-wrapper .chat-btn-live-chat:hover { 

background-color: green !important; 
color: black !important; 

}

Cambiar el color de todos los botones de acción superiores.

Selectores de CSS: .chat-wrapper .chat-action-btn

Ejemplo de CSS:

.chat-wrapper .chat-action-btn {

background-color: orange!important;
color: black !important;

}

Cambiar el color del botón de desplazamiento hacia abajo

Selectores de CSS: .chat-wrapper .chat-scroll-button-inner

Ejemplo de CSS:

.chat-wrapper .chat-scroll-button-inner {

background-color: red !important;

}

Cambiar el color de fondo

Selectores de CSS: .chat-wrapper .chat-body

Ejemplo de CSS:

.chat-wrapper .chat-body {

background-color: purple !important;

}

Cambiar el color de las sugerencias del chat en vivo

Selectores de CSS: .chat-wrapper .live-chat-suggestion

Ejemplo de CSS:

.chat-wrapper .live-chat-suggestion {

background-color: orange !important
color: black !important
}

Cambiar el borde del mensaje del usuario

Selector de CSS: .message.user-message .message-text

Ejemplo de CSS:

.message.user-message .message-text {

border: 2px solid black;
}

Cambiar el borde del mensaje sugerido

Selector de CSS: .chat-wrapper .suggestion-box-text

Ejemplo de CSS:

.chat-wrapper .suggestion-box-text {

border: 2px solid blue;
}

Cambiar el color del icono del chat en vivo

Selectores de CSS: .chat-wrapper .chat-action-btn .chat-action-btn-icon

Ejemplo de CSS:

.chat-wrapper .chat-action-btn .chat-action-btn-icon {

fill: red !important;
}

Cambiar la posición del contenedor de ActionBot

Para cambiar la posición del contenedor, ve al CSS principal del Editor:

1. Ve al Editor
   
2. Haz clic en Personalizar
   
3. Ve a la pestaña de CSS.
   

El selector para todo lo relacionado con el contenedor del Bot es: .wm-chatbot .wm-chatbot-container

Por lo tanto, puedes combinar el CSS para la posición en pantalla y el alto y el ancho dentro del mismo selector. El posicionamiento absoluto define la posición de la caja del bot desde los márgenes laterales superior, derecho, inferior e izquierdo de la página web.

Ejemplo de CSS:

.wm-chatbot .wm-chatbot-container {

height: 800px !important;
width: 800px !important;
position: absolute !important;
top: 200px !important;
left: 0px !important;

}