In this guide, you'll learn how to manage, adjust, or disable aspects of the Corner Peel, a key touchpoint in the Mention Me referral journey, while understanding the performance impact any changes may bring.
You'll discover:
- Why we recommend keeping the overlay enabled.
- How to disable the Corner Peel across all campaigns.
- How to reposition the Corner Peel across your site using CSS edits.
- Pre-customised code snippets are included for Bottom-Right (default), Bottom-Left, Top-Left, and Top-Right placements.
- How to create a custom Corner Peel for homepage promotions by:
- Creating a new injection point,
- Assigning a triggering situation,
- Configuring the properties and design styles,
- Ensuring the wrapper class includes
mm-overlay-fixedto correctly apply styles.
By the end, you’ll understand how to confidently manage and customise the overlay to suit your brand’s layout, while maintaining referral performance. If you’re considering major changes, we recommend speaking to our team for expert guidance.
General Guidance
While it is technically possible to disable or change aspects of the referral journey, we strongly advise against doing so. Altering certain elements, especially the visual or interactive components, can significantly reduce campaign performance. In some cases, we've observed conversion rates drop by more than 50%.
In particular, the overlay (e.g., corner peel) consistently outperforms embedded offers, typically by 2–5x.
If you're considering changes, we’re happy to discuss your options. Get in touch with us for advice tailored to your use case.
Disabling the Corner Peel
Globally
To disable the corner peel across all campaigns:
- Go to: Settings & Tools → Merchant Settings → Mention Me Journey → Referrer
- Untick the box labelled "Is the corner peel enabled?"
This change will disable the corner peel platform-wide.
Image showing how to turn off the Corner Peel
Per Offer
To disable the corner peel on a single offer:
- Go to: Campaigns → Select the relevant campaign
Image showing the Campaigns page overview
- Duplicate the currently running experiment
Image showing how to duplicate a running experiment
- In the draft experiment, click Offer Actions (3 dots) → Edit Details
Image showing how to edit the details on a draft offer
- Go to the Integration tab
- Untick the following options:
- "Show the corner peel overlay when closing a popup on desktop versions of the flow"
- "Show the corner peel overlay when closing a popup on responsive versions of the flow"
Image showing the Integrations page and what options to untick
- Save your changes
This will disable the corner peel on that specific offer only, while keeping it active on others.
Changing the Position of the Corner Peel
Corner peel position can only be changed at a global (merchant-wide) level.
To update the position:
- Go to: Settings & Tools → Onsite Content
Image showing how to access the On-site content
- Select the Corner Peel or Post-Purchase Referrer Tab
- Edit the injection labelled: “Stylesheet to alter how any of our injected content appears”
Image showing the correct injection point to edit
- Apply one of the following CSS blocks based on the desired location (see below)
Image showing an example of the edited injection point
Corner Peel Position CSS Examples
Bottom-right (Default)
No changes needed — this is the default placement.
Bottom-Left
.mm-overlay-fixed {
bottom: 0px;
left: 0px;
top: initial;
right: initial;
}
.mm-frame-overlay {
border-bottom: initial;
border-left: initial;
border-top: 1px solid;
border-right: 1px solid;
border-radius: 0 10px 0 0;
}
/* Custom animation override to animate from bottom-left */
.mm-overlay-fixed-in {
animation: mm_overlay_appear_from_left 0.6s forwards;
-webkit-animation: mm_overlay_appear_from_left 0.6s forwards;
-moz-animation: mm_overlay_appear_from_left 0.6s forwards;
-o-animation: mm_overlay_appear_from_left 0.6s forwards;
}
.mm-overlay-fixed-out {
animation: mm_overlay_vanish_to_left 0.6s forwards;
-webkit-animation: mm_overlay_vanish_to_left 0.6s forwards;
-moz-animation: mm_overlay_vanish_to_left 0.6s forwards;
-o-animation: mm_overlay_vanish_to_left 0.6s forwards;
}
/* Keyframes: appear animation /
@keyframes mm_overlay_appear_from_left {
0% {
-ms-transform: translate(-100px, 100px); / IE 9 /
-webkit-transform: translate(-100px, 100px); / Safari */
transform: translate(-100px, 100px);
}
100% { }
}
@-webkit-keyframes mm_overlay_appear_from_left {
0% {
-ms-transform: translate(-100px, 100px);
-webkit-transform: translate(-100px, 100px);
transform: translate(-100px, 100px);
}
100% { }
}
@-moz-keyframes mm_overlay_appear_from_left {
0% {
-ms-transform: translate(-100px, 100px);
-webkit-transform: translate(-100px, 100px);
transform: translate(-100px, 100px);
}
100% { }
}
@-o-keyframes mm_overlay_appear_from_left {
0% {
-ms-transform: translate(-100px, 100px);
-webkit-transform: translate(-100px, 100px);
transform: translate(-100px, 100px);
}
100% { }
}
/* Keyframes: vanish animation */
@keyframes mm_overlay_vanish_to_left {
0% { }
100% {
-ms-transform: translate(-100px, 150px);
-webkit-transform: translate(-100px, 150px);
transform: translate(-100px, 150px);
}
}
@-webkit-keyframes mm_overlay_vanish_to_left {
0% { }
100% {
-ms-transform: translate(-100px, 150px);
-webkit-transform: translate(-100px, 150px);
transform: translate(-100px, 150px);
}
}
@-moz-keyframes mm_overlay_vanish_to_left {
0% { }
100% {
-ms-transform: translate(-100px, 150px);
-webkit-transform: translate(-100px, 150px);
transform: translate(-100px, 150px);
}
}
@-o-keyframes mm_overlay_vanish_to_left {
0% { }
100% {
-ms-transform: translate(-100px, 150px);
-webkit-transform: translate(-100px, 150px);
transform: translate(-100px, 150px);
}
}
Top-Left
.mm-overlay-fixed.top-left {
bottom: initial;
left: 0px;
top: 0px;
right: initial;
}
.mm-frame-overlay.top-left {
border-bottom: 1px solid;
border-left: initial;
border-top: initial;
border-right: 1px solid;
border-radius: 0 0 10px 0;
}
Top-Right
.mm-overlay-fixed.top-right {
bottom: initial;
left: initial;
top: 0px;
right: 0px;
}
.mm-frame-overlay.top-right {
border-bottom: 1px solid;
border-left: 1px solid;
border-top: initial;
border-right: initial;
border-radius: 0 0 0 10px;
}
You may need to include custom animation keyframes to maintain smooth visual transitions. Contact our support team if you'd like help applying these.
Customising the Corner Peel for Homepage Promotions
If you're using a corner peel specifically for homepage promotions (separate from post-purchase), follow these steps:
Step 1: Define a New Injection Point
Go to: Settings & Tools → Merchant Settings → Tag Customisation
Add a customisation
Set the triggering situation to "Homepage Promotion" (or similar)
Step 2: Configure the New Injection
Navigate to Settings & Tools → Onsite Content
Find Referrer-[Your Situation Name]
Configure the properties, including any special CSS
Step 3: Add Required Class to Wrapper
In your website code, add the class mm-overlay-fixed to the wrapper of the embedded div to match the correct CSS.
Step 4: Edit Corner Peel Design (Not Injection Point)
Go to: Design → Edit Corner Peel CSS
Use this section to control the visual style and animation of the corner peel itself.
Our team is here to support you. Get in touch if you'd like assistance with setup, positioning, or optimising the appearance of your corner peel.