Cómo configurar el Widget SoluCX

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

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

const apiKey = "SU_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 abierto para:", userId);
            analytics.track("widget_opened", { userId });
        },
        onCompleted: (userId) => {
            console.log("Encuesta completada:", userId);
            analytics.track("survey_completed", { userId });
        },
        onPartialCompleted: (userId) => {
            console.log("Encuesta parcial:", userId);
        },
        onError: (message) => {
            console.error("Error en widget:", message);
            errorTracker.capture(message);
        },
        onClosed: () => {
            console.log("Widget cerrado");
        },
        onPageChanged: (page) => {
            console.log("Página cambiada:", page);
        },
        onQuestionAnswered: () => {
            console.log("Pregunta respondida");
        },
        onResize: (height) => {
            console.log("Nueva altura:", height);
        }
    }
};

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

const apiKey = "SU_API_KEY";
const type = "bottomBox";
const data = {
    transaction_id: "pedido-12345",
    name: "María García",
    email: "[email protected]",
    store_id: "ecommerce-principal",
    amount: 299.90,
    journey: "post-compra",
    param_producto: "Smartphone XYZ",
    param_categoria: "Electrónicos"
};
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 = "SU_API_KEY";
const type = "modal";
const data = {
    name: "Carlos Oliveira",
    email: "[email protected]",
    store_id: "central-atencion",
    employee_id: "agente-42",
    employee_name: "Ana Souza",
    journey: "post-atencion",
    param_protocolo: "2024-ABC-789",
    param_canal: "chat"
};
const options = {
    callbacks: {
        onCompleted: () => {
            window.location.href = "/feedback-gracias";
        },
        onClosed: () => {
            console.log("Cliente cerró encuesta de atención");
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const apiKey = "SU_API_KEY";
const type = "inline";
const data = {
    store_id: "tienda-centro",
    store_name: "Tienda Centro",
    journey: "experiencia-tienda",
    param_totem: "totem-entrada-01"
};
const options = {
    target: "encuesta-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 = "SU_API_KEY";
const type = "inline";
const data = {
    customer_id: "usr-98765",
    name: "Pedro Santos",
    email: "[email protected]",
    journey: "uso-plataforma",
    param_plan: "enterprise",
    param_feature: "reportes"
};
const options = {
    target: "feedback-section",
    width: 600,
    callbacks: {
        onOpened: (userId) => {
            console.log("Encuesta mostrada para:", userId);
        },
        onCompleted: (userId) => {
            showNotification("¡Gracias por su feedback!");
        },
        onResize: (height) => {
            document.getElementById("feedback-section").style.height = height + "px";
        }
    }
};

createSoluCXWidget(apiKey, type, data, options);

const options = {
    callbacks: {
        onOpened: (userId) => console.log("[DEBUG] Abierto:", userId),
        onClosed: () => console.log("[DEBUG] Cerrado"),
        onCompleted: (userId) => console.log("[DEBUG] Completado:", userId),
        onPartialCompleted: (userId) => console.log("[DEBUG] Parcial:", userId),
        onError: (msg) => console.error("[DEBUG] Error:", msg),
        onPageChanged: (page) => console.log("[DEBUG] Página:", page),
        onQuestionAnswered: () => console.log("[DEBUG] Pregunta respondida"),
        onResize: (h) => console.log("[DEBUG] Resize:", h)
    }
};

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Widget SoluCX - Básico</title>
    <script src="https://widget.solucx.com.br/widget.js"></script>
</head>
<body>
    <script>
        createSoluCXWidget("SU_API_KEY", "bottomBox", {
            name: "Nombre del Cliente",
            email: "[email protected]",
            store_id: "tienda-001"
        });
    </script>
</body>
</html>

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

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

        const data = {
            transaction_id: "TXN-2024-001",
            form_id: "form-flex-001",
            customer_id: "CLI-12345",
            name: "María García",
            email: "[email protected]",
            phone: "11999887766",
            phone2: "1133445566",
            document: "123.456.789-00",
            birth_date: "1990-05-15",
            store_id: "tienda-centro",
            store_name: "Tienda Centro",
            employee_id: "emp-042",
            employee_name: "Ana Souza",
            amount: 1599.90,
            score: 8,
            journey: "post-compra",
            param_canal: "sitio-web",
            param_campaña: "verano-2024",
            param_categoria: "electronicos"
        };

        const options = {
            target: "widget-container",
            width: 700,
            height: 500,
            retry: {
                attempts: 5,
                interval: 2
            },
            waitDelayAfterRating: 30,
            callbacks: {
                onOpened: (userId) => {
                    console.log("Widget abierto para:", userId);
                },
                onCompleted: (userId) => {
                    console.log("Encuesta completada por:", userId);
                },
                onPartialCompleted: (userId) => {
                    console.log("Encuesta parcial de:", userId);
                },
                onError: (message) => {
                    console.error("Error:", message);
                },
                onClosed: () => {
                    console.log("Widget cerrado");
                },
                onPageChanged: (page) => {
                    console.log("Página:", page);
                },
                onQuestionAnswered: () => {
                    console.log("Pregunta respondida");
                },
                onResize: (height) => {
                    console.log("Nueva altura:", height);
                }
            }
        };

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

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

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

    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: "Juan García",
    email: "[email protected]",
    store_id: "tienda-01",
    amount: 150.00,
    param_pedido: "PED-9876"
});

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