Cómo personalizar el widget utilizando JavaScript
Utiliza los parámetros de JavaScript para controlar cómo aparece y se comporta el widget de chat en vivo en tu sitio web, incluyendo su estilo visual, posición, tamaño e idioma del sistema.
Por ejemplo, puedes adaptar el widget a los colores de tu marca, ajustar su distancia con respecto a los bordes de la pantalla o incrustarlo en un elemento específico de la página.
Hablemos de cómo configurar los parámetros de JavaScript y habilitar el modo incrustado.
Personaliza el widget
En el archivo de configuración de JavaScript, puedes establecer los siguientes parámetros opcionales.
primaryColor |
Establece el color primario del fondo de tu chat en vivo, mensajes y encabezado usando un código hexadecimal. |
colorScheme |
Establece un modo de tema: claro, oscuro, y auto. |
chatPosition{} |
Establece la posición de tu chat en vivo.
Especifica los parámetros:
|
custom_img_button{} |
Establece un ícono de botón personalizado con efecto hover.
Especifica los parámetros:
|
Aquí tienes un ejemplo de parámetros de chat en vivo personalizados:
<script>
document.addEventListener('spLiveChatLoaded', function() {
window.sp.liveChat.config({
primaryColor: '#48A0BD',
colorScheme: 'auto',
chatPosition: {
bottom: '32px',
right: '32px'
},
custom_img_button: {
url: 'https://cdn.sendpulse.com/files/mp/5/e4b2d2664f05a7069ad2dedad9c590f6.jpg',
hover_url: 'https://cdn.sendpulse.com/files/mp/5/610bdd6248d1304ddfbbda55794fcb86.png'
},
height: "600px",
language: "pt"
});
});
</script>
Incrusta el widget
El modo incrustado coloca el widget dentro de un elemento seleccionado de la página, convirtiéndolo en parte del diseño de la página. Por ejemplo, puede incrustar el widget en una página de soporte específica.
Para habilitar el modo incrustado, añade el atributo data-is-embedded="true" al script de tu widget.
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
async>
</script>En modo incrustado, el widget utiliza todo el ancho y alto del elemento de la página donde se coloca la etiqueta <script>.
Si necesitas más control sobre la ubicación, establece un elemento de destino e incrusta el widget dentro de él.
Añade el atributo data-embedding-target y pasa un selector CSS. Asegúrate de que el selector coincida con el elemento de tu página:
<div id="chat"></div>
<script
src="https://s3.eu-central-1.amazonaws.com/live-chat.beautychat.prod/loader.js"
data-live-chat-id="361b69835262bd54da072375"
data-is-embedded="true"
data-embedding-target="#chat"
async>
</script>Establece el tamaño del contenedor de destino en tu CSS para que el widget se ajuste a tu diseño. Por ejemplo, establece el ancho y el alto de #chat:
<style>
#chat {
width: 100%;
height: 600px;
}
</style>
Última actualización: 30.04.2025
o