# Web Chat Widget - Advanced Configurations + Public API/Events

> Chat widget offers many configurations through chat-widget builder but there are few configurations which we are not providing through chat-widget builder

- Source: https://docs.ghlcustomercare.com/docs/developer-resources/advanced-configurations/web-chat-widget-advanced-configurations-public-api-events
- Section: Developer Resources / Advanced Configurations
- Reading time: 3 min
- Images: 4, each explained below
- Modified on Thu, 16 Sep, 2021 at 11:40 AM

---
Chat widget offers many configurations through chat-widget builder but there are few configurations which we are not providing through chat-widget builder to keep it simple for most users and avoid complexity for most of the use cases, in this section we talk about configurations you can make in chat-widget code after copying from builder.

Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.

  <chat-widget
            style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color:#97C8A2"        
            location-id="hgHI41V5EbRCG\*\*\*\*\*">
    </chat-widget>
       <script src="https://widgets.leadconnectorhq.com/loader.js"
          data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js" >
      </script>

### **Open-Icon-url**

This enables you to change the default message icon on chat-widget open button.

 <chat-widget
            style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color:#97C8A2"        
            location-id="hgHI41V5EbRCG\*\*\*\*\*"
            open-icon-url="https://img.icons8.com/cotton/2x/blood-sample.png">
    </chat-widget>
       <script src="https://widgets.leadconnectorhq.com/loader.js"
          data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js" >
      </script>

![Open-Icon-url (image 1 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48127183686/original/gwvRAPgzp_jm8-w5U7UhFz4kkpefUycwmw.png)

**Open-Icon-url (image 1 of 4)**

This screenshot appears in the "Open-Icon-url" section of "Web Chat Widget - Advanced Configurations + Public API/Events". The text alongside this image reads: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- What this covers: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- Controls: Open-Icon-url, Close-icon-url, Next-prompt-timer, Server-u-r-l, openWidget, closeWidget, isActive(), localizeWidget via API, i18n: Internationalization, Changing Widget Labels on Wordpress, LC_chatWidgetLoaded

### **Close-icon-url**

This enables you to change the default close icon on chat-widget close button.

<chat-widget
            style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color:#97C8A2"        
            location-id="hgHI41V5EbRCG\*\*\*\*\*"
            close-icon-url="https://img.icons8.com/cotton/2x/blood-sample.png">
    </chat-widget>
       <script src="https://widgets.leadconnectorhq.com/loader.js"
          data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js" >
      </script>

![Close-icon-url (image 2 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48127184178/original/GsAwrDp0M-MLRTze103FditzRyzXXlkhFQ.png)

**Close-icon-url (image 2 of 4)**

This screenshot appears in the "Close-icon-url" section of "Web Chat Widget - Advanced Configurations + Public API/Events". The text alongside this image reads: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- What this covers: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- Controls: Open-Icon-url, Close-icon-url, Next-prompt-timer, Server-u-r-l, openWidget, closeWidget, isActive(), localizeWidget via API, i18n: Internationalization, Changing Widget Labels on Wordpress, LC_chatWidgetLoaded

### **Next-prompt-timer**

The next-prompt-timer determines the number of seconds the webchat widget will wait before showing the chat-bubble to a user when they revisit. The default value is 86400 sec (24 hours), meaning the prompt bubble will not be visible for 24 hours if a user closes the widget. To make chat-bubble visible upon every page visit, you would set its value to 0.

  <chat-widget
            style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color:#97C8A2"        
            location-id="hgHI41V5EbRCG\*\*\*\*\*"
            next-prompt-timer="0">
    </chat-widget>
       <script src="https://widgets.leadconnectorhq.com/loader.js"
          data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js" >
      </script>

![Next-prompt-timer (image 3 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48127187894/original/UzMWDpr4xEnmapRsucaNV8pNABJikjDDKA.png)

**Next-prompt-timer (image 3 of 4)**

This screenshot appears in the "Next-prompt-timer" section of "Web Chat Widget - Advanced Configurations + Public API/Events". The text alongside this image reads: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- What this covers: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- Controls: Open-Icon-url, Close-icon-url, Next-prompt-timer, Server-u-r-l, openWidget, closeWidget, isActive(), localizeWidget via API, i18n: Internationalization, Changing Widget Labels on Wordpress, LC_chatWidgetLoaded

### **Server-u-r-l**

By default chat-widget will communicate (submit lead, etc.) with the server through this ([https://msgsndr.com](https://msgsndr.com/)) base URL, but you can use this attribute to communicate with different server. You would use this attribute for testing/debugging purposes.

    <chat-widget
            style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color:#97C8A2"        
            location-id="hgHI41V5EbRCG\*\*\*\*\*"
            server-u-r-l="https://test-staging.com">
    </chat-widget>
       <script src="https://widgets.leadconnectorhq.com/loader.js"
          data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js" >
      </script>

# Public API / Events

## APIs

1\. **openWidget**: This method will helps you to open widget programmatically from any other action items eg on button click

window.leadConnector.chatWidget.openWidget();

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    window.leadConnector.chatWidget.openWidget()
},false);

//HTML 
<button id='myButton'>Hello</button>

2\. **closeWidget**: This method will helps you to close widget programmatically from any other action items eg on button click

window.leadConnector.chatWidget.closeWidget()

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    window.leadConnector.chatWidget.closeWidget()
},false);

//HTML 
<button id='myButton'>Hello</button>

3\. **isActive()**: This api will return true if the widget is open(expanded) else return false if widget is closed(collapsed).

window.leadConnector.chatWidget.isActive()

if(window.leadConnector.chatWidget.isActive()) {
  //do something CRAZY
}
else {
//stay silent
}

//HTML 
<button id='myButton'>Hello</button>

4\. **localizeWidget via API**: This code allows you to change widget labels after the widget gets loaded

window.leadConnector.chatWidget.localizeWidget({"name": "Nombre"})
//this will change \`Name\` label to \`Nombre\`
//for complete list of supported labels refer to localization section
//ideally you should use the \`i-1-8n-labels\` attribute

![APIs (image 4 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48128186151/original/jBqdi6nPz5ehvH768GIB07K31a76R86Krg.png)

**APIs (image 4 of 4)**

This screenshot appears in the "APIs" section of "Web Chat Widget - Advanced Configurations + Public API/Events". The text alongside this image reads: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- What this covers: Let's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
- Controls: Open-Icon-url, Close-icon-url, Next-prompt-timer, Server-u-r-l, openWidget, closeWidget, isActive(), localizeWidget via API, i18n: Internationalization, Changing Widget Labels on Wordpress, LC_chatWidgetLoaded

5\. **i18n: Internationalization** - The chat widget does not have automatic i18n support based on i18n lang code but you can change any of the labels within the widget (refer below table for all labels) using attribute names.

<chat-widget
      location-id="hgHI41V5EbRCGv\*\*\*\*\*"
      i-1-8n-labels='"{\\"name\\": \\"nombre\\", \\"phone\\": \\"teléfono\\"}"'>
</chat-widget>

<table class="clickup-table" style="font-weight: 400; width: 685px; text-align: left"><colgroup><col width="150"><col width="295"><col width="240"></colgroup><tbody style="font-weight: inherit"><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><span style="font-weight: inherit">key</span></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><span style="font-weight: inherit">default value(en-US)</span></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><span style="font-weight: inherit">Description</span></span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">name</span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Name</span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Name field label</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">phone</span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Mobile Phone</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Mobile input field label</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">email</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">E-mail</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">email input label</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">message</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Message</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Message input field label</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">required</span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Required</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">error message for required fields</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">received</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Received</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">acknowledgement label below your acknowledgement text</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">sending</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Sending</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">visible when lead submission is in progress&nbsp;</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">invalid_value</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Invalid value</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">error message for invalid values in input fields</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">send</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Send</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Title of submit button&nbsp;</span></p></td></tr><tr style="font-weight: inherit"><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">powered_by</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit">Powered by</span></p><p class="qlbt-cell-line" style="font-weight: inherit"><span style="font-weight: inherit"><br></span></p></td><td colspan="1" rowspan="1" style="font-weight: inherit"><p class="qlbt-cell-line" style="font-weight: inherit"><span dir="ltr" style="font-weight: inherit">Powered by text for agency branding</span></p></td></tr></tbody></table>

**Changing Widget Labels on Wordpress** - Currently, there is not a way to change the chat widget labels in the WP LeadConnector plugin settings; however, you can add the following code to the footer of the Wordpress website that will change the labels after the widget loads.

     <script>
window.addEventListener(
        'LC\_chatWidgetLoaded',
        function (e) {
          window.leadConnector.chatWidget.localizeWidget({ 
              name: 'Nombre', 
              phone:'teléfono'
              //refer above table for more labels 
            });
        },
        false,
      );
</script>

If you're not comfortable adding the code into the footer, you can use a plugin like [Insert Headers And Footers](https://wordpress.org/plugins/insert-headers-and-footers/), which makes the process easy.

## Events

1\. **LC\_chatWidgetLoaded**: chat-widget will fire this event after it gets loaded completely on windows

      window.addEventListener(
        'LC\_chatWidgetLoaded',
        function (e) {
          console.log(e);
        },
        false,
      );

---

Documentation for GHL Customer Care. Support: support@ghlcustomercare.com