Customize the widget using JavaScript

Configure your live chat widget to match your website’s design and enhance user experience using JavaScript.

In the JavaScript configuration file, you can set the following optional parameters.

`primaryColor`	Sets the primary color of your live chat background, messages, and header using a hex code.
`colorScheme`	Sets a theme mode: `light`, `dark`, and `auto`.
`chatPosition{}`	Sets your live chat's position. Specify the parameters: `bottom` – distance from the bottom edge; `right` – distance from the right edge.
`custom_img_button{}`	Sets a custom button icon with a hover effect. Specify the parameters: `url` – link to your icon image; `hover_url` – link to your icon image when hovered over.
`height`	The widget height, from 480 to 720 pixels.
`language`	The language of the widget's system elements. The following values are supported: `en` – English, `uk` – Ukrainian, `ru` – Russian, `es` – Spanish, `pt` – Portuguese, `fr` – French, `it` – Italian, `tr` – Turkish. By default, the widget language is determined by the visitor’s browser language (if it’s in the list above) or set to English.

Here’s an example of customized live chat parameters:

<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>

Last Updated: 29.04.2025

Rate this article about "Customize the widget using JavaScript"

User Rating: 4 / 5 (9)

Popular in Our Blog

Customize the widget using JavaScript

Start using free live chat on your website