Widget SDK & Customization

Revora renders inside <div id="revora-widget-root"> with an open Shadow Root (attachShadow({ mode: 'open' })). This guarantees:

• Your application CSS stylesheets (Tailwind, Bootstrap, Styled Components) cannot bleed into or break the cancellation modal layout.
• Revora styles cannot collide with or alter your application buttons, typography, or page elements.

HTML Data Attributes

Tag any HTML clickable element on your billing page:

<button
  data-revora-cancel
  data-customer-id="cus_Nx8294hjk2"
  data-subscription-id="sub_1M982jkl1"
  data-plan-value="9900"
  data-plan-name="Pro Monthly"
  data-currency="usd"
  data-billing-interval="month"
>
  Cancel Plan
</button>

JavaScript SDK Methods

Interact programmatically with the global window.Revora instance:

// 1. Initialize custom configuration
window.Revora.init({
  publicKey: "pk_live_revora_...",
  productName: "Acme SaaS",
  customer: { id: "cus_...", subscriptionId: "sub_..." },
  onComplete: (res) => {
    console.log("Outcome:", res.action, "Retained:", res.retained);
  }
});

// 2. Open modal programmatically
window.Revora.open();

// 3. Close modal
window.Revora.close();

Pro and Enterprise workspaces can inject scoped stylesheet overrides from the Widget Configuration dashboard. Target internal widget classes:

.r-card {
  border-radius: 28px;
  box-shadow: 0 35px 80px -20px rgba(15, 23, 42, 0.35);
}

.r-btn-primary {
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.r-option {
  border-radius: 14px;
}

Competitor Comparison Matrix (Pro)

When customers select “Switching to another product”, Pro merchants can display an authentic side-by-side comparison across 4 standardized dimensions: Quality, Quantity, Price, and Value.

Note: Revora strictly requires merchants to configure their product baseline and competitor comparisons before competitor offers display. If unconfigured, the widget cleanly collects destination feedback instead.