Offer Popup

Create a popup that offers a discount or promotion to users.

Open

WINTER SALE!

Take 25% off this product with code: WINTER25

Apply coupon or stock up on beloved stylist-favorites Shop the sale

*Valid 2/13-2/17. Cannot be combined with other coupons. Other restrictions apply.

HTML

<fulcrum-element-dialog
  open
  id="offer-popup"
  position="top-center"
  id="dialog-offer-popup"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
  cloak
>
  <div class="custom-content discount-not-applied">
    <h1 class="custom-content-header">WINTER SALE!</h1>
    <p class="custom-content-description">
      Take 25% off this product with code: WINTER25
    </p>
    <div class="custom-content-buttons">
      <button class="custom-btn" id="apply-coupon-button" type="button">
        Apply coupon
      </button>
      <span class="text-between-buttons"
        >or stock up on beloved stylist-favorites</span
      >
      <button class="custom-btn" id="visit-page-button" type="button">
        Shop the sale
      </button>
    </div>
    <small class="custom-content-disclaimer">
      <em>
        *Valid 2/13-2/17. Cannot be combined with other coupons. Other
        restrictions apply.
      </em>
    </small>
  </div>
</fulcrum-element-dialog>

CSS

#offer-popup {
  --dialog-border-radius: 0;
  --dialog-max-height: 480px;
  --dialog-max-width: 600px;
}

@media screen and (max-width: 550px) {
  #offer-popup {
    --dialog-border-radius: 0;
    --dialog-max-height: 100%;
    --dialog-max-width: 100%;
  }
}
.custom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
}
.custom-content-header {
  align-self: stretch;
  color: #faba13;
  font-family: Neue Haas Unica, sans-serif;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  line-height: 100%;
  margin: 0;
}
.custom-content-description {
  align-self: stretch;
  color: #333f48;
  font-size: 25px;
  font-weight: normal;
  padding: 0 25px;
  text-align: center;
  margin: 0;
  margin-bottom: 3px;
}
.custom-content-disclaimer {
  align-self: stretch;
  color: #333f48;
  font-size: 12px;
  font-weight: normal;
  padding: 0 25px;
  text-align: center;
  margin: 0;
  margin-bottom: 3px;
}
.custom-content-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.text-between-buttons {
  color: #333f48;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  text-align: center;
}
.custom-btn {
  background-color: #333f48;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  font-family: "Arial", sans-serif;
  padding: 10px 48px;
  width: 100%;
  max-width: 320px;
  text-transform: uppercase;
}
.custom-content.discount-applied {
  display: none;
}

JS

initScript();

function initScript() {
  const dialog = document.querySelector("fulcrum-element-dialog");

  if (!dialog) return;

  // Example: Open dialog with menu button (hamburger menu)
  const dialogTrigger = document.getElementById("dialog-trigger");
  if (dialogTrigger) {
    dialogTrigger.addEventListener("click", () => {
      dialog.open();
    });
  }

  // Example: Handle drawer events
  dialog.addEventListener("dialog-open", () => {
    console.log("dialog opened");
  });

  dialog.addEventListener("dialog-close", () => {
    console.log("dialog closed");
  });
}