Skip to main content
The Salesive Widget system provides embeddable UI components for Salesive storefronts. All widgets use Shadow DOM for complete style isolation and expose a global SalesiveWidget API for programmatic control.
The widget script (https://www.salesive.shop/widget.js) is automatically injected and initialized in all Salesive storefronts. No manual setup is required.

​
Available widgets

Live Support Chat

Real-time chat widget connecting customers with your sales and support team.

​
Live Support Chat

The Live Support Chat widget provides real-time communication between customers and your team. It supports route-based visibility, dark mode, and preserves chat history across page navigations.

​
Default behavior

The chat widget initializes automatically with these defaults:
  • Appears on all pages (no route filtering)
  • Light mode enabled
  • Shadow DOM isolation active
  • Bundled CSS auto-injected
Use the API methods below to customize behavior at runtime.

​
API methods

The SalesiveWidget global object exposes the following methods for the chat widget:

​
hide()

Hide the widget while keeping it mounted. Preserves chat state and history. 
SalesiveWidget.hide();

​
show()

Show the widget if it was previously hidden. 
SalesiveWidget.show();

​
toggle()

Toggle widget visibility. Returns the new visibility state. 
const isVisible = SalesiveWidget.toggle();
console.log("Widget visible:", isVisible);

​
setRoutes(routes)

Update the route filtering dynamically. 
// Show only on specific pages
SalesiveWidget.setRoutes(["/checkout", "/cart"]);

// Show on all pages
SalesiveWidget.setRoutes(null);

​
setDarkMode(enabled)

Toggle or set dark mode. The preference persists across page loads. 
// Enable dark mode
SalesiveWidget.setDarkMode(true);

// Toggle dark mode
SalesiveWidget.setDarkMode();

​
visible (property)

Read-only property to check current visibility state. 
if (SalesiveWidget.visible) {
    console.log("Widget is visible");
}

​
version (property)

The current widget version string. 
console.log(SalesiveWidget.version); // "1.0.0"

​
Route filtering

Control which pages display the widget using the routes option. Routes use smart matching:
  • "/" — Matches only the exact homepage, not sub-paths
  • Other routes — Use prefix matching with path boundary detection
// Show on homepage only
SalesiveWidget.setRoutes(["/"]);

// Show on /shop and all sub-paths (/shop/item, /shop/category/shoes)
// Does NOT match /shopping or /shops
SalesiveWidget.setRoutes(["/shop"]);

// Show on multiple sections
SalesiveWidget.setRoutes(["/", "/shop", "/support"]);
Route filtering works with single-page applications. The widget listens to popstate events and intercepts pushState/replaceState calls to detect navigation changes.

​
Visibility control

Use hide(), show(), and toggle() to control visibility without losing chat state: 
// Hide widget during checkout flow
function startCheckout() {
    SalesiveWidget.hide();
}

// Show widget after checkout
function completeCheckout() {
    SalesiveWidget.show();
}

// Toggle with a custom button
document.getElementById("toggle-chat").addEventListener("click", () => {
    SalesiveWidget.toggle();
});
Use hide()/show() instead of unmount()/init() when you want to preserve the user’s chat session and message history.

​
Dark mode

Dark mode can be toggled dynamically: 
// Toggle based on user preference
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
SalesiveWidget.setDarkMode(prefersDark);

// Listen for system preference changes
window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
        SalesiveWidget.setDarkMode(e.matches);
    });
Dark mode preference is automatically persisted to localStorage and restored on subsequent page loads.

​
Shadow DOM isolation

The widget renders inside a Shadow DOM to prevent style conflicts with the host page:
  • Widget styles don’t leak into the host page
  • Host page styles don’t affect the widget
  • Complete encapsulation of the widget UI

​
Example: custom controls

Add custom buttons to control the widget programmatically: 
// Toggle button
document.getElementById("toggle-widget").addEventListener("click", () => {
    SalesiveWidget.toggle();
});

// Dark mode toggle
document.getElementById("dark-mode").addEventListener("click", () => {
    SalesiveWidget.setDarkMode();
});

// Configure route filtering
SalesiveWidget.setRoutes(["/", "/shop", "/support"]);

// Sync with system dark mode preference
window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
        SalesiveWidget.setDarkMode(e.matches);
    });