Como configurar webchats

CSS Class

Descripción

Ejemplo implementación

.chat-header

Da estilo al área del encabezado del chat.

.chat-header { background-color: #f4f4f4; padding: 10px; }

.m-0

Elimina todos los márgenes (margen: 0).

.m-0 { margin: 0; }

.py-3

Agrega relleno en la parte superior e inferior (relleno: 1rem).

.py-3 { padding-top: 1rem; padding-bottom: 1rem; }

.chat-area

Da estilo al área de chat principal.

.chat-area { background: linear-gradient(90deg, #FFDEE9 0%, #B5FFFC 100%); padding: 20px; }

.py-4

Agrega relleno en la parte superior e inferior (relleno: 1,5rem).

.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.px-4

Agrega relleno a la izquierda y a la derecha (relleno: 1,5rem).

.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }

.chat-area2

Estilo alternativo para el área de chat cuando el encabezado está oculto.

.chat-area2 { background-color: #e0f7fa; }

.my-message

Da estilo a los mensajes de chat propios del usuario.

.my-message { background-color: #d1e7dd; padding: 10px; border-radius: 10px; }

.animate__animated

Aplica animación al elemento (desde la biblioteca Animate.css).

.animate__animated { animation-duration: 1s; }

.animate__slideInRight

Anima el elemento con un efecto de deslizamiento desde la derecha (de la biblioteca Animate.css).

.animate__slideInRight { animation-name: slideInRight; }

.other-message

Da estilo a los mensajes de chat de otros.

.other-message { background-color: #f8d7da; padding: 10px; border-radius: 10px; }

.animate__slideInLeft

Anima el elemento con un efecto de deslizamiento desde la izquierda (de la biblioteca Animate.css).

.animate__slideInLeft { animation-name: slideInLeft; }

.clearfix

Limpia los flotadores en ambos lados del elemento.

.clearfix { clear: both; }

.chat-avatar

Da estilo a la imagen del avatar en el chat.

.chat-avatar { width: 40px; height: 40px; border-radius: 50%; }

.float-left

Flota el elemento hacia la izquierda.

.float-left { float: left; }

.mr-2

Añade margen derecho (margen derecho: 0,5rem).

.mr-2 { margin-right: 0.5rem; }

.mt-2

Agrega margen superior (margen superior: 0,5rem).

.mt-2 { margin-top: 0.5rem; }

.my-0

Elimina los márgenes superior e inferior (margin-top: 0; margin-bottom: 0).

.my-0 { margin-top: 0; margin-bottom: 0; }

.px-4

Agrega relleno a la izquierda y a la derecha (relleno: 1,5rem).

.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }

.text-center

Centra el texto horizontalmente dentro del elemento.

.text-center { text-align: center; }

.text-secondary

Aplica un estilo de color secundario al texto.

.text-secondary { color: #6c757d; }

.message

Da estilo al área de contenido del mensaje.

.message { padding: 10px; border-radius: 8px; }

.my-2

Agrega márgenes verticales (margen superior: 0,5rem; margen inferior: 0,5rem).

.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.message-text

Da estilo al contenido del texto dentro de un mensaje.

.message-text { font-size: 14px; }

.m-0

Elimina todos los márgenes (margen: 0).

.m-0 { margin: 0; }

.message-attach

Da estilo al contenedor para los medios adjuntos dentro de los mensajes.

.message-attach { padding: 10px; }

.message-attach-big

Estilos de medios adjuntos más grandes dentro de los mensajes.

.message-attach-big { padding: 20px; }

.flow

Aplica un estilo relacionado con el flujo al elemento.

.flow { display: flex; }

.flow-text

Aplica estilos al texto dentro de elementos relacionados con un flujo.

.flow-text { font-size: 16px; }

.div_flow_content

Da estilo al contenedor de contenido dentro de un flujo.

.div_flow_content { padding: 15px; }

.pb-0

Elimina el relleno de la parte inferior (padding-bottom: 0).

.pb-0 { padding-bottom: 0; }

.textarea_c

Da estilo al contenedor del área de texto.

.textarea_c { padding: 10px; }

.div_text_c

Da estilo al contenido del texto dentro de un área de texto.

.div_text_c { font-size: 14px; }

.div_btts

Da estilo al contenedor de botones dentro de un flujo o mensaje.

.div_btts { display: flex; justify-content: space-around; }

.p_add_btt

Diseña botones adicionales en la interfaz de chat.

.p_add_btt { padding: 10px; background-color: #007bff; color: white; }

.fal

Aplica estilo a los íconos de Font Awesome Light (FAL).

.fal { font-size: 16px; }

.fa-file

Aplica estilo al ícono del archivo desde Font Awesome.

.fa-file { color: #6c757d; }

.hide

Oculta el elemento de la vista (visualización: ninguna).

.hide { display: none; }

.d-flex

Aplica el diseño de flexbox al elemento.

.d-flex { display: flex; }

.align-items-center

Centra verticalmente los elementos flexibles dentro del contenedor flexible.

.align-items-center { align-items: center; }

.message-attach-midia

Aplica estilo a los archivos multimedia adjuntos dentro de los mensajes (como imágenes o vídeos).

.message-attach-midia { max-width: 100%; border-radius: 8px; }

.carousel

Da estilo al contenedor del carrusel para elementos deslizantes.

.carousel { width: 100%; overflow: hidden; }

.slide

Aplica estilo a cada diapositiva en un carrusel.

.slide { transition: transform 0.5s ease; }

.carousel-inner

Da estilo al contenedor interno de un carrusel que contiene diapositivas.

.carousel-inner { display: flex; }

.carousel-item

Aplica estilo a elementos individuales dentro de un carrusel.

.carousel-item { min-width: 100%; }

.div_c2

Da estilo a un contenedor de contenido específico dentro del chat.

.div_c2 { padding: 20px; }

.pt-0

Elimina el relleno de la parte superior (padding-top: 0).

.pt-0 { padding-top: 0; }

.img-box

Da estilo al contenedor que contiene una imagen.

.img-box { display: inline-block; }

.r_horizontal

Aplica estilo a imágenes con una relación de aspecto horizontal.

.r_horizontal { aspect-ratio: 16/9; }

.bg-white

Aplica un color de fondo blanco al elemento.

.bg-white { background-color: white; }

.quick-reply

Estilos de botones de respuesta rápida en la interfaz de chat.

.quick-reply { background-color: #17a2b8; color: white; border-radius: 50px; }

.pill

Aplica esquinas redondeadas a los botones (en forma de píldora).

.pill { border-radius: 50px; }

.mt-3

Añade margen superior (margen superior: 1rem).

.mt-3 { margin-top: 1rem; }

.shadow-sm

Añade una pequeña sombra al elemento.

.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }

.powered

Da estilo al mensaje “Desarrollado por” en la parte inferior del chat.

.powered { font-size: 12px; text-align: center; color: #6c757d; }

.flex-wrap

Permite envolver artículos flexibles dentro del contenedor.

.flex-wrap { flex-wrap: wrap; }

.pr-3

Agrega relleno derecho (padding-right: 1rem).

.pr-3 { padding-right: 1rem; }

.pl-4

Agrega relleno izquierdo (relleno izquierdo: 1.5rem).

.pl-4 { padding-left: 1.5rem; }

.pr-2

Agrega relleno derecho (padding-right: 0.5rem).

.pr-2 { padding-right: 0.5rem; }

.cursor_pointer

Cambia el cursor a un puntero (icono de mano).

.cursor_pointer { cursor: pointer; }

.bg-light-hover

Aplica un color de fondo claro cuando se pasa el cursor sobre él.

.bg-light-hover:hover { background-color: #f8f9fa; }

.uploadBtt

Da estilo al botón de carga en la interfaz de chat.

.uploadBtt { background-color: #007bff; color: white; padding: 10px; border-radius: 50px; }

.spinner-grow

Da estilo al cargador giratorio en crecimiento.

.spinner-grow { width: 2rem; height: 2rem; animation: spinner-grow 0.75s linear infinite; }

.mr-2

Añade margen derecho (margen derecho: 0,5rem).

.mr-2 { margin-right: 0.5rem; }

.composerC

Aplica estilo al contenedor del compositor de mensajes.

.composerC { display: flex; padding: 10px; background-color: #f4f4f4; }

.input-group

Grupos de entrada de estilos para formularios o entradas de chat.

.input-group { display: flex; }

.form-control

Los estilos forman controles como campos de entrada.

.form-control { width: 100%; padding: 10px; }

.input-group-append

Los estilos añaden elementos a los grupos de entrada.

.input-group-append { margin-left: -1px; }

.dropdown

Da estilo al contenedor del menú desplegable.

.dropdown { position: relative; }

.dropup

Diseña el menú desplegable como un contenedor “desplegable”.

.dropup { position: relative; }

.dropdown-toggle

Da estilo al botón que alterna el menú desplegable.

.dropdown-toggle { background-color: #007bff; color: white; }

.dropdown-menu

Da estilo al contenedor del menú desplegable.

.dropdown-menu { background-color: white; border-radius: 4px; }

.dropdown-item

Aplica estilo a elementos individuales dentro de un menú desplegable.

.dropdown-item { padding: 10px; color: #333; }

.chat-ice-breaker

Diseña el contenedor de los botones para romper el hielo en la interfaz de chat.

.chat-ice-breaker { text-align: right; }

.text-right

Alinea el texto a la derecha.

.text-right { text-align: right; }

.btn-outline-primary

Botones de estilos con un color primario delineado.

.btn-outline-primary { border: 1px solid #007bff; color: #007bff; }

.flex-wrap

Permite envolver artículos flexibles dentro del contenedor.

.flex-wrap { flex-wrap: wrap; }

.input-group

Grupos de entrada de estilos para formularios o entradas de chat.

.input-group { display: flex; }

pre

Controla el tamaño y el formato del texto de los mensajes del usuario y del bot en la interfaz de chat.

pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-size: 14px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }