Salesive Widget

SalesiveWidget.chat.open();

SalesiveWidget.chat.close();

SalesiveWidget.chat.toggle();

if (SalesiveWidget.chat.isOpened) {
    console.log("Chat is open");
}

SalesiveWidget.chat.hide();

SalesiveWidget.chat.show();

const isVisible = SalesiveWidget.chat.toggleVisibility();
console.log("Widget visible:", isVisible);

// Show only on specific pages
SalesiveWidget.chat.setRoutes(["/checkout", "/cart"]);

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

// Enable dark mode
SalesiveWidget.chat.setDarkMode(true);

// Toggle dark mode
SalesiveWidget.chat.setDarkMode();

if (SalesiveWidget.chat.isVisible) {
    console.log("Widget is visible");
}

// Prefill text
SalesiveWidget.chat.prefill({ text: "I need help with my order" });

// Prefill an image (must be an already-accessible URL)
SalesiveWidget.chat.prefill({ imageUrl: "https://example.com/screenshot.png" });

// Both text and image
SalesiveWidget.chat.prefill({
    text: "This product arrived damaged",
    imageUrl: "https://example.com/photo.jpg",
});

SalesiveWidget.chat.on("message:new", (message) => {
    console.log("New message received:", message);
});

SalesiveWidget.chat.emit("user:typing", { conversationId: "123" });

SalesiveWidget.setDebugMode(true);

console.log(SalesiveWidget.version); // "1.0.0"

// Show on homepage only
SalesiveWidget.chat.setRoutes(["/"]);

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

// Show on multiple sections
SalesiveWidget.chat.setRoutes(["/", "/shop", "/support"]);

// Hide widget during checkout flow
function startCheckout() {
    SalesiveWidget.chat.hide();
}

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

// Toggle with a custom button
document.getElementById("toggle-chat").addEventListener("click", () => {
    SalesiveWidget.chat.toggleVisibility();
});

// Toggle based on user preference
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
SalesiveWidget.chat.setDarkMode(prefersDark);

// Listen for system preference changes
window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
        SalesiveWidget.chat.setDarkMode(e.matches);
    });

<script>
    window.SalesiveWidgetConfig = {
        theme: {
            primary: "#7c3aed",
            secondary: "goldenrod",
            dark: "#1a1a2e",
        },
    };
</script>
<script src="https://www.salesive.shop/widget.js"></script>

SalesiveWidget.setTheme({
    primary: "rebeccapurple",
    secondary: "gold",
    dark: "#1a1a2e", // Dark mode background color
});

const theme = SalesiveWidget.getTheme();
console.log(theme); // { primary: "rebeccapurple", secondary: "gold", dark: "#1a1a2e" }

SalesiveWidget.init({
    theme: { primary: "#ef4444", secondary: "#22c55e", dark: "#1a1a2e" },
});

// 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);
    });

SalesiveWidget.subscription.open();

const count = SalesiveWidget.subscription.getSubscriptionCount();
console.log("Subscription count:", count);

SalesiveWidget.pwa.open();

const canInstall = SalesiveWidget.pwa.isInstallable();
if (canInstall) {
    document.getElementById("install-button").style.display = "block";
}

SalesiveWidget.reviews.open();

SalesiveWidget.reviews.close();