Customize the widget using JavaScript

Use JavaScript parameters to control how the live chat widget appears and behaves on your website, including its visual style, position, size, and system language.

For example, you can match the widget to your brand colors, adjust its distance from the screen edges, or embed it into a specific page element.

Let’s talk about how to configure JavaScript parameters and enable embedded mode.

Customize the widget

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

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>

Embed the widget

Embedded mode places the widget within a selected page element, making it part of the page layout. To give you an idea, you can embed the widget on a dedicated support page.

To enable embedded mode, add the data-is-embedded="true" attribute to your widget script.

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

In embedded mode, the widget uses the full width and height of the page element where you place the <script> tag.

If you need more control over placement, set a target element and embed the widget inside it.

Add the data-embedding-target attribute and pass a CSS selector. Make sure the selector matches the element on your page:

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

Set the target container size in your CSS so the widget fits your layout. For example, set the width and height of #chat:

<style>
  #chat {
    width: 100%;
    height: 600px;
  }
</style>

Last Updated: 29.04.2025