How to Change your Corner Peel

In this guide, you'll learn how to manage, adjust, or disable aspects of the Corner Peel — a key engagement touchpoint in the Mention Me referral journey. You’ll also understand the performance impact of any changes you make.

You’ll learn:

• Why we recommend keeping the overlay enabled
• How to disable the Corner Peel across all or individual campaigns
• How to reposition the Corner Peel with CSS (bottom-right, bottom-left, top-left, top-right)

By the end, you'll be able to confidently adapt the overlay to suit your site's layout, while maintaining referral performance. For larger changes, contact our team for expert support.

General Guidance

While element edits are possible, we advise caution — visual/functional changes to referral elements can reduce conversion rates by over 50%.

The corner peel overlay consistently outperforms embedded offers (typically 2–5x). Discuss any major changes with our team first.

Disabling the Corner Peel

Per Offer

1. Click "Campaigns"
2. Click the name of the campaign you wish to amend.
3. Click "Drafts, Upcoming & History"
4. Click "experiment actions menu" (3 dots)
5. Click "Duplicate (to draft)" or "Create new A/B test"
6. Click "offer actions menu" (3 dots)
7. Click "View offer settings"
8. Click "Integration" tab
9. Uncheck boxes: 
   • "Show the corner peel overlay when closing a popup on desktop" 
   • "Show the corner peel overlay when closing a popup on responsive versions"
10. Click "Save"

This disables the overlay for that specific offer only. Other offers remain unaffected.

Changing the Position of the Corner Peel

Corner Peel positioning can only be updated at the global (merchant-wide) level.

1. Go to Settings & Tools → Onsite Content
2. Select the “Corner Peel” or “Post-Purchase Referrer Tab” item
3. Edit the Style injection labelled: “Stylesheet to alter how our injected content appears”
4. Apply your desired CSS (see examples below)

Corner Peel CSS Position Examples

Bottom-Right (Default)

This is the default setting. No changes are needed.

Bottom-Left

.mm-overlay-fixed {
  bottom: 0;
  left: 0;
  top: initial;
  right: initial;
}

.mm-frame-overlay {
  border-top: 1px solid;
  border-right: 1px solid;
  border-radius: 0 10px 0 0;
}

.mm-overlay-fixed-in {
  animation: mm_overlay_appear_from_left 0.6s forwards;
}

.mm-overlay-fixed-out {
  animation: mm_overlay_vanish_to_left 0.6s forwards;
}

/* Keyframes for appear/vanish animation */
@keyframes mm_overlay_appear_from_left {
  0% { transform: translate(-100px, 100px); }
  100% {}
}

@keyframes mm_overlay_vanish_to_left {
  100% { transform: translate(-100px, 150px); }
}

Top-Left

.mm-overlay-fixed.top-left {
  top: 0; left: 0; bottom: initial; right: initial;
}

.mm-frame-overlay.top-left {
  border-bottom: 1px solid;
  border-radius: 0 0 10px 0;
}

Top-Right

.mm-overlay-fixed.top-right {
  top: 0; right: 0; bottom: initial; left: initial;
}

.mm-frame-overlay.top-right {
  border-bottom: 1px solid;
  border-radius: 0 0 0 10px;
}

You may need to write custom animation keyframes for smooth transitions between positions. Contact us if you need assistance.

Need help adjusting layout or styles? Contact our Support Team