Web Chat Widget - Advanced Configuration & Developer API

The web chat widget builder includes the most common settings to help you get started quickly. For developers who need more control, you can add advanced attributes directly to your widget code.

Pro Tip: These advanced options are perfect for customizing the chat experience on your enrollment site without cluttering the visual builder.

Getting Started

After copying your widget code from the builder, it will look something like this:

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

You can add new attributes to customize behavior and appearance.

Advanced Attributes

Custom Open Icon

Change the default message icon that appears on your chat button. This is helpful if you want the chat to match your center's branding.

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

[SCREENSHOT: Show chat widget with custom open icon on an enrollment site]

Custom Close Icon

Similarly, you can customize the icon that appears when the chat is open and families want to close it.

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

Prompt Display Timer

Control how long to wait before showing the chat bubble again to returning visitors. By default, if a parent closes the widget, they won't see the prompt bubble for 24 hours (86400 seconds).

To show the chat bubble on every page visit:

<chat-widget 
  style="--chat-widget-primary-color: #97C8A2; --chat-widget-active-color: #97C8A2" 
  location-id="hgHI41V5EbRCG*****" 
  next-prompt-timer="0">
</chat-widget>

Note: Setting this to 0 means the chat prompt will appear every time someone visits a page. This can be helpful during enrollment season but may feel repetitive for families browsing multiple pages.

Custom Server URL

For testing purposes, you can point the widget to a different server. This is typically used only for debugging.

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

Developer API Methods

Use these JavaScript methods to control the chat widget programmatically from your enrollment site.

Open Widget

Open the chat window from a custom button or link:

window.enrollio.chatWidget.openWidget();

// Example: Open chat when someone clicks a button
var button = document.getElementById("myButton");
button.addEventListener("click", function(e) {
  window.enrollio.chatWidget.openWidget();
}, false);

// HTML
<button id="myButton">Chat with us</button>

Close Widget

Programmatically close the chat window:

window.enrollio.chatWidget.closeWidget();

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

Check Widget Status

Check whether the chat is currently open or closed:

if(window.enrollio.chatWidget.isActive()) {
  // Widget is open - do something
} else {
  // Widget is closed
}

Change Widget Labels

Update widget text after it loads. This is useful if you need to change labels dynamically:

window.enrollio.chatWidget.localizeWidget({"name": "Parent Name"});
// Changes the "Name" label to "Parent Name"

Internationalization (Multi-language Support)

If you serve families who speak different languages, you can customize all text labels in the chat widget.

Set Labels in Widget Code

<chat-widget 
  location-id="hgHI41V5EbRCG*****" 
  i-1-8n-labels='{"name":"Nombre","phone":"Teléfono"}'>
</chat-widget>

Available Label Keys

Key	Default Value	Description
name	Name	Name field label
phone	Mobile Phone	Phone input label
email	E-mail	Email input label
message	Message	Message field label
required	Required	Error message for required fields
received	Received	Confirmation message
sending	Sending	Shown during submission
invalid_value	Invalid value	Error for invalid input
send	Send	Submit button text
powered_by	Powered by	Branding text

[SCREENSHOT: Chat widget showing custom Spanish labels]

Change Labels After Widget Loads

If you need to update labels based on user actions or preferences:

<script>
window.addEventListener('EC_chatWidgetLoaded', function(e) {
  window.enrollio.chatWidget.localizeWidget({
    name: 'Nombre',
    phone: 'Teléfono',
    email: 'Correo electrónico'
  });
}, false);
</script>

Widget Events

Widget Loaded Event

Trigger custom code when the chat widget finishes loading:

window.addEventListener('EC_chatWidgetLoaded', function(e) {
  console.log('Chat widget is ready!');
  // Add your custom initialization code here
}, false);

Pro Tip: Use this event to integrate the chat widget with your analytics, apply custom styling, or trigger welcome messages based on the page a family is viewing.

Common Use Cases

Open Chat from Tour Request Button

Make it easy for families to start a conversation after viewing your tour information:

<button onclick="window.enrollio.chatWidget.openWidget()">
  Have questions? Chat with us now
</button>

Auto-open Chat on Specific Pages

Automatically open the chat on your pricing or enrollment page:

<script>
window.addEventListener('EC_chatWidgetLoaded', function() {
  if(window.location.pathname === '/enrollment') {
    window.enrollio.chatWidget.openWidget();
  }
}, false);
</script>

Bilingual Support

Let families choose their preferred language:

<script>
function setLanguage(lang) {
  var labels = lang === 'es' ? {
    name: 'Nombre',
    phone: 'Teléfono',
    email: 'Correo electrónico',
    message: 'Mensaje',
    send: 'Enviar'
  } : {
    name: 'Name',
    phone: 'Phone',
    email: 'Email',
    message: 'Message',
    send: 'Send'
  };
  
  window.enrollio.chatWidget.localizeWidget(labels);
}
</script>

[SCREENSHOT: Language selector buttons with chat widget]