Web Chat Widget Advanced Configurations and JavaScript API

The chat widget builder covers most use cases, but a few configurations are only available by editing the embed code directly. This article documents the HTML attributes and the JavaScript API the widget exposes after it loads.

Base Embed Code

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

HTML Attributes

open-icon-url

Replaces the default message icon on the widget's open button. Pass any image URL.

<chat-widget location-id="..." open-icon-url="https://example.com/icon.png"></chat-widget>

close-icon-url

Replaces the default close icon when the widget is open.

<chat-widget location-id="..." close-icon-url="https://example.com/close.png"></chat-widget>

next-prompt-timer

Seconds to wait before showing the prompt bubble after a visitor closes the widget. Default is 86400 (24 hours). Set to 0 to show on every page visit.

<chat-widget location-id="..." next-prompt-timer="0"></chat-widget>

server-u-r-l

Override the default server URL (https://msgsndr.com) for testing or staging environments.

<chat-widget location-id="..." server-u-r-l="https://test-staging.com"></chat-widget>

JavaScript API

openWidget()

Programmatically expand the widget, useful for triggering chat from a custom button.

document.getElementById('myButton').addEventListener('click', function() {
  window.leadConnector.chatWidget.openWidget();
});

closeWidget()

window.leadConnector.chatWidget.closeWidget();

isActive()

Returns true if the widget is open, false if collapsed.

if (window.leadConnector.chatWidget.isActive()) {
  // widget is open
}

localizeWidget(labels)

Change widget labels at runtime. Prefer the i-1-8n-labels attribute for static translations.

window.leadConnector.chatWidget.localizeWidget({ name: 'Nombre' });

Internationalization (i18n)

Set translations as a JSON-encoded attribute on the widget.

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

Supported Label Keys

WordPress Label Translation

The Sparkforge WordPress plugin does not expose label translation in settings. Add this to the site footer instead.

<script>
window.addEventListener('LC_chatWidgetLoaded', function() {
  window.leadConnector.chatWidget.localizeWidget({
    name: 'Nombre',
    phone: 'teléfono'
  });
}, false);
</script>

Use a footer-injection plugin like Insert Headers and Footers if you do not want to edit theme files.

Events

LC_chatWidgetLoaded

Fires on the window once the widget finishes loading.

window.addEventListener('LC_chatWidgetLoaded', function(e) {
  console.log(e);
}, false);