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