Cómo cambiar el estilo personalizado (CSS) de ActionBot.
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.
- Carga todos los archivos a la Biblioteca de activos.
- Copia el ID.
- Guarda los ID copiados en algún lugar para que puedas añadirlos al CSS más tarde.
Estilo de ActionBot utilizando CSS
Para cambiar la apariencia del ActionBot,
- Ve al Editor
- Abre ActionBot (Todos los elementos → ActionBot).
- Ve al Bot.
- Haz clic en Personaliza el aspecto y el diseño de tu Bot.
- 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:
- Ve al Editor
- Haz clic en Personalizar
- 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; }