How to Configure the SoluCX Widget

const options = {
    width: 600,
    height: 400
};

const options = {
    retry: {
        attempts: 5,
        interval: 2
    },
    waitDelayAfterRating: 30
};

const apiKey = "YOUR_API_KEY";

createSoluCXWidget(apiKey, type, data, options);

interface WidgetOptions {
    target?: string | null;
    width?: number;
    height?: number;
    retry?: {
        attempts?: number;
        interval?: number;
    };
    waitDelayAfterRating?: number;
    callbacks?: WidgetCallbacks;
}

const options = {
    callbacks: {
        onOpened: (userId) => {
            console.log("Widget opened for:", userId);
            analytics.track("widget_opened", { userId });
        },
        onCompleted: (userId) => {
            console.log("Survey completed:", userId);
            analytics.track("survey_completed", { userId });
        },
        onPartialCompleted: (userId) => {
            console.log("Partial survey:", userId);
        },
        onError: (message) => {
            console.error("Widget error:", message);
            errorTracker.capture(message);
        },
        onClosed: () => {
            console.log("Widget closed");
        },
        onPageChanged: (page) => {
            console.log("Page changed:", page);
        },
        onQuestionAnswered: () => {
            console.log("Question answered");
        },
        onResize: (height) => {
            console.log("New height:", height);
        }
    }
};

createSoluCXWidget(apiKey, type, data, options)
    .then(response => {
        console.log(response); // { status: "success" }
    })
    .catch(error => {
        console.log(error); // WidgetError { status: "error", message: "Error message" }
    });

const apiKey = "YOUR_API_KEY";
const type = "bottomBox";
const data = {
    transaction_id: "order-12345",
    name: "Maria Smith",
    email: "[email protected]",
    store_id: "main-ecommerce",
    amount: 299.90,
    journey: "post-purchase",
    param_product: "Smartphone XYZ",
    param_category: "Electronics"
};
const options = {
    width: 400,
    retry: { attempts: 3, interval: 2 },
    waitDelayAfterRating: 30,
    callbacks: {
        onCompleted: (userId) => {
            dataLayer.push({
                event: "survey_completed",
                userId: userId
            });
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const apiKey = "YOUR_API_KEY";
const type = "modal";
const data = {
    name: "Carlos Oliveira",
    email: "[email protected]",
    store_id: "support-center",
    employee_id: "agent-42",
    employee_name: "Ana Souza",
    journey: "post-service",
    param_ticket: "2024-ABC-789",
    param_channel: "chat"
};
const options = {
    callbacks: {
        onCompleted: () => {
            window.location.href = "/feedback-thanks";
        },
        onClosed: () => {
            console.log("Customer closed service survey");
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const apiKey = "YOUR_API_KEY";
const type = "inline";
const data = {
    store_id: "store-downtown",
    store_name: "Downtown Store",
    journey: "store-experience",
    param_kiosk: "kiosk-entrance-01"
};
const options = {
    target: "survey-container",
    width: 800,
    height: 600,
    waitDelayAfterRating: 0,
    retry: { attempts: 1, interval: 0 },
    callbacks: {
        onCompleted: () => {
            setTimeout(() => {
                location.reload();
            }, 5000);
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const apiKey = "YOUR_API_KEY";
const type = "inline";
const data = {
    customer_id: "usr-98765",
    name: "Pedro Santos",
    email: "[email protected]",
    journey: "platform-usage",
    param_plan: "enterprise",
    param_feature: "reports"
};
const options = {
    target: "feedback-section",
    width: 600,
    callbacks: {
        onOpened: (userId) => {
            console.log("Survey displayed for:", userId);
        },
        onCompleted: (userId) => {
            showNotification("Thank you for your feedback!");
        },
        onResize: (height) => {
            document.getElementById("feedback-section").style.height = height + "px";
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const options = {
    callbacks: {
        onOpened: (userId) => console.log("[DEBUG] Opened:", userId),
        onClosed: () => console.log("[DEBUG] Closed"),
        onCompleted: (userId) => console.log("[DEBUG] Completed:", userId),
        onPartialCompleted: (userId) => console.log("[DEBUG] Partial:", userId),
        onError: (msg) => console.error("[DEBUG] Error:", msg),
        onPageChanged: (page) => console.log("[DEBUG] Page:", page),
        onQuestionAnswered: () => console.log("[DEBUG] Question answered"),
        onResize: (h) => console.log("[DEBUG] Resize:", h)
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>SoluCX Widget - Basic</title>
    <script src="https://widget.solucx.com.br/widget.js"></script>
</head>
<body>
    <script>
        createSoluCXWidget("YOUR_API_KEY", "bottomBox", {
            name: "Customer Name",
            email: "[email protected]",
            store_id: "store-001"
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>SoluCX Widget - Advanced</title>
    <script src="https://widget.solucx.com.br/widget.js"></script>
</head>
<body>
    <div id="widget-container"></div>

    <script>
        const apiKey = "YOUR_API_KEY";
        const type = "inline";

        const data = {
            transaction_id: "TXN-2024-001",
            form_id: "form-flex-001",
            customer_id: "CLI-12345",
            name: "Maria Smith",
            email: "[email protected]",
            phone: "11999887766",
            phone2: "1133445566",
            document: "123.456.789-00",
            birth_date: "1990-05-15",
            store_id: "downtown-store",
            store_name: "Downtown Store",
            employee_id: "emp-042",
            employee_name: "Ana Souza",
            amount: 1599.90,
            score: 8,
            journey: "post-purchase",
            param_channel: "website",
            param_campaign: "summer-2024",
            param_category: "electronics"
        };

        const options = {
            target: "widget-container",
            width: 700,
            height: 500,
            retry: {
                attempts: 5,
                interval: 2
            },
            waitDelayAfterRating: 30,
            callbacks: {
                onOpened: (userId) => {
                    console.log("Widget opened for:", userId);
                },
                onCompleted: (userId) => {
                    console.log("Survey completed by:", userId);
                },
                onPartialCompleted: (userId) => {
                    console.log("Partial survey from:", userId);
                },
                onError: (message) => {
                    console.error("Error:", message);
                },
                onClosed: () => {
                    console.log("Widget closed");
                },
                onPageChanged: (page) => {
                    console.log("Page:", page);
                },
                onQuestionAnswered: () => {
                    console.log("Question answered");
                },
                onResize: (height) => {
                    console.log("New height:", height);
                }
            }
        };

        createSoluCXWidget(apiKey, type, data, options)
            .then(response => console.log("Success:", response))
            .catch(error => console.error("Error:", error));
    </script>
</body>
</html>

function initSoluCXWidget(customerData) {
    const apiKey = "YOUR_API_KEY";
    const type = "bottomBox";

    const data = {
        ...customerData,
        journey: "post-purchase"
    };

    const options = {
        width: 400,
        retry: { attempts: 3, interval: 1 },
        waitDelayAfterRating: 60,
        callbacks: {
            onOpened: (userId) => {
                gtag("event", "widget_opened", {
                    event_category: "SoluCX",
                    event_label: userId
                });
            },
            onCompleted: (userId) => {
                gtag("event", "survey_completed", {
                    event_category: "SoluCX",
                    event_label: userId
                });
                showThankYouBanner();
            },
            onError: (message) => {
                Sentry.captureMessage("SoluCX Widget Error: " + message);
            },
            onClosed: () => {
                gtag("event", "widget_closed", {
                    event_category: "SoluCX"
                });
            }
        }
    };

    return createSoluCXWidget(apiKey, type, data, options);
}

initSoluCXWidget({
    name: "John Smith",
    email: "[email protected]",
    store_id: "store-01",
    amount: 150.00,
    param_order: "ORD-9876"
});

https://widget.solucx.com.br/widget.js