window.Windback.show({
  customerEmail: "jane@example.com",
  reasons: [
    { id: "too_expensive", label: "Too expensive" },
    { id: "missing_features", label: "Missing features I need" },
    { id: "switching", label: "Switching to a competitor" },
    { id: "not_using", label: "Not using it enough" },
    { id: "temporary", label: "Just need a break" },
    { id: "other", label: "Other", allowFreeText: true },
  ],
});

window.Windback.show({
  customerEmail: "jane@example.com",
  onSubmit: (data) => {
    console.log("Cancel reason:", data.reason);
    console.log("Feedback:", data.feedbackText);
    console.log("Accepted offer:", data.selectedOffer);

    // Proceed with your cancellation logic
    cancelSubscription(data);
  },
  onDismiss: () => {
    console.log("Customer dismissed the widget");
    // Customer chose not to cancel --- no action needed
  },
});

<!-- Add the widget script -->
<script
  src="https://api.windbackai.com/widget.js"
  data-api-key="pub_your_key"
  data-theme="dark"
  data-position="center"
  async
></script>

<script>
  document.getElementById("cancel-btn").addEventListener("click", () => {
    window.Windback.show({
      customerEmail: currentUser.email,
      customerName: currentUser.name,
      planName: currentUser.plan,
      mrr: currentUser.mrr,
      reasons: [
        { id: "too_expensive", label: "Too expensive" },
        { id: "missing_features", label: "Missing features" },
        { id: "not_using", label: "Not using it enough" },
        { id: "other", label: "Other", allowFreeText: true },
      ],
      onSubmit: (data) => {
        // Your cancellation logic
        fetch("/api/cancel", {
          method: "POST",
          body: JSON.stringify({ reason: data.reason }),
        });
      },
      onDismiss: () => {
        // Customer stayed --- nothing to do
      },
    });
  });
</script>