Custom Display Mode

Custom mode lets you display discount data anywhere on your page using your own HTML and styling. The script still handles fetching — you just control how it looks.

Best for: Sites that want the discount inside a pricing table, hero section, or any custom component instead of a floating banner.

When to use Custom (CSS) vs API

Rule of thumb: Static display (text + flag) → Custom. Dynamic behavior (button URLs, price math) → API. See Choosing a display mode for the full guide.

Setup

Two steps:

1. In Dashboard → Banner Design, set Show Banner to off
2. Add the script tag (same as banner mode):

<script src="https://www.evendeals.com/banner.js"></script>

The script fetches the discount but won't render any banner. Instead, it exposes the data for you to use.

Two ways to access the data

Using React, Vue, Next.js, or another framework? You'll get more control with the API — call it directly from your components without needing the script tag.

CSS classes

The simplest approach. Add these CSS classes to any HTML element and the script auto-fills them with discount data. No JavaScript needed.

Example

<div class="my-discount-banner">
  <img class="ed-country-flag" />
  You're visiting from <span class="ed-country"></span>!
  Get <span class="ed-discount-amount"></span> off
  with code <strong class="ed-coupon-code"></strong>
</div>

<style>
  .ed-hidden { display: none; }
</style>

When a visitor from India loads the page, the script fills in:

• .ed-country → "India"
• .ed-discount-amount → "30%"
• .ed-coupon-code → "PPP_IN_30"
• .ed-country-flag → sets src to the flag SVG (on <img> tags) or text to country code

When no discount is available, the script adds ed-hidden to these elements. Add the CSS rule above to hide them.

Available classes

Webflow / Framer example

In your visual builder:

1. Add a text element, give it the class ed-country
2. Add another text element with class ed-discount-amount
3. Add another with class ed-coupon-code
4. Wrap them in a container and style however you want
5. Add a custom CSS block with .ed-hidden { display: none; }

Tips

• Always add .ed-hidden { display: none; } (or display: none !important) so when there's no discount, the script (which adds ed-hidden to those elements) hides them cleanly.
• No-code HTML widgets: If your widget also needs coupon-in-URL buttons or slashed prices, use the client API instead — one scoped block of HTML/CSS/JS avoids timing and layout issues with the builder. For text-only display, CSS classes here are fine.
• Flag on non-<img>: On a <span> or <div>, .ed-country-flag gets the country code (e.g. "IN") as text. On <img>, the script sets src (and alt) to the flag image URL.

Window object

After the script loads, window.evendeals contains the discount data. Useful for debugging or one-off checks.

// Shape of window.evendeals
{
  discount: {
    couponCode: string;
    discountAmount: string;
    country: string;
    countryFlag: string;     // "IN"
    flagUrl: string;          // full URL to flag SVG
  } | null;
  ready: boolean;
}

// Check anytime after script load
if (window.evendeals?.ready && window.evendeals.discount) {
  console.log(window.evendeals.discount.couponCode);
}

This is a read-only snapshot — it won't notify you when data arrives. For reactive integrations (React, Vue, Next.js, etc.), use the API instead.