Skip to content
Developer Resources

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

3 min read654 words4 explained imagesUpdated Thu, 16 Sep, 2021 at 11:40 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Open-Icon-url
  2. Close-icon-url
  3. Next-prompt-timer
  4. Server-u-r-l
  5. APIs
  6. Events

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) What this shows Let's assume the code below is the code you copied from builder. What this shows Illustrates the "Open-Icon-url" section of "Web Chat Widget - Advanced Configurations + Public API/Events". 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. Image 1 of 4 What this coversLet's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
Buttons and menus referenced Open-Icon-urlClose-icon-urlNext-prompt-timerServer-u-r-lopenWidgetcloseWidgetisActive()localizeWidget via APIi18n: InternationalizationChanging Widget Labels on WordpressLC_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) What this shows Let's assume the code below is the code you copied from builder. What this shows Illustrates the "Close-icon-url" section of "Web Chat Widget - Advanced Configurations + Public API/Events". 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. Image 2 of 4 What this coversLet's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
Buttons and menus referenced Open-Icon-urlClose-icon-urlNext-prompt-timerServer-u-r-lopenWidgetcloseWidgetisActive()localizeWidget via APIi18n: InternationalizationChanging Widget Labels on WordpressLC_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) What this shows Let's assume the code below is the code you copied from builder. What this shows Illustrates the "Next-prompt-timer" section of "Web Chat Widget - Advanced Configurations + Public API/Events". 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. Image 3 of 4 What this coversLet's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
Buttons and menus referenced Open-Icon-urlClose-icon-urlNext-prompt-timerServer-u-r-lopenWidgetcloseWidgetisActive()localizeWidget via APIi18n: InternationalizationChanging Widget Labels on WordpressLC_chatWidgetLoaded

Server-u-r-l

By default chat-widget will communicate (submit lead, etc.) with the server through this (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) What this shows Let's assume the code below is the code you copied from builder. What this shows Illustrates the "APIs" section of "Web Chat Widget - Advanced Configurations + Public API/Events". 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. Image 4 of 4 What this coversLet's assume the code below is the code you copied from builder. We can add new attributes to this code for advanced configuration.
Buttons and menus referenced Open-Icon-urlClose-icon-urlNext-prompt-timerServer-u-r-lopenWidgetcloseWidgetisActive()localizeWidget via APIi18n: InternationalizationChanging Widget Labels on WordpressLC_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>

key

default value(en-US)

Description

name

Name

Name field label

phone

Mobile Phone


Mobile input field label

email


E-mail


email input label

message


Message


Message input field label

required

Required


error message for required fields

received


Received


acknowledgement label below your acknowledgement text

sending


Sending


visible when lead submission is in progress 

invalid_value


Invalid value


error message for invalid values in input fields

send


Send


Title of submit button 

powered_by


Powered by


Powered by text for agency branding

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, 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,
      );

Was this guide helpful?

Related guides