> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Homepage Promotions
> Add referral promotion placements to your homepage with cornerpeel and click-overlay options
export const SignInNotice = ({message = "To see code snippets pre-filled with your partner code"}) => {
return
';
nav.parentNode.insertBefore(badge, nav);
badge.querySelector(".mm-partner-badge-reset").addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
if (source === "clerk" && window.Clerk && window.Clerk.signOut) {
clearMerchant();
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
window.Clerk.signOut().then(() => {
window.location.href = redirect;
}).catch(() => {
window.location.reload();
});
return;
}
clearStoredPartner();
window.location.reload();
});
};
const removePartnerBadge = () => {
const el = document.getElementById(BADGE_ID);
if (el) el.remove();
};
const showNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "";
});
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
document.querySelectorAll("[data-mm-sign-in-link]").forEach(a => {
a.href = redirect;
});
};
const hideNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "none";
});
};
const walkCodeBlocks = replacements => {
document.querySelectorAll("pre code").forEach(codeEl => {
let html = codeEl.innerHTML;
if (replacements) {
for (const [from, to] of replacements) {
html = html.split(from).join(escapeHtml(to));
}
}
const paramStyle = "color:inherit;filter:brightness(110%);font-weight:bold;text-decoration:underline;cursor:pointer";
html = html.replace(/(\?|&)([a-z_]+)=/g, (match, prefix, name) => {
const slug = name.replace(/_/g, "-");
const target = document.getElementById("param-" + slug);
if (!target) return match;
return prefix + '' + name + "=";
});
codeEl.innerHTML = html;
});
};
const observeTabSwitches = callback => {
let processing = false;
const observer = new MutationObserver(() => {
if (processing) return;
processing = true;
setTimeout(() => {
callback();
processing = false;
}, 50);
});
setTimeout(() => {
const tabs = document.querySelector("[role='tablist']");
if (tabs && tabs.parentElement) {
observer.observe(tabs.parentElement, {
attributes: true,
subtree: true,
childList: true
});
}
}, 500);
};
const pollForClerk = (onReady, onTimeout) => {
let n = 0;
const tick = () => {
if (window.Clerk && window.Clerk.loaded) {
return onReady(window.Clerk);
}
if (++n < 40) {
setTimeout(tick, 250);
} else {
onTimeout();
}
};
setTimeout(tick, 100);
};
const fetchMerchantFromAPI = () => {
return fetch(API_BASE + "/api/docs/context", {
credentials: "include",
cache: "no-store"
}).then(res => res.ok ? res.json() : null);
};
useEffect(() => {
let cancelled = false;
const urlPartner = captureQueryParams();
const onPersonalised = (merchant, source) => {
if (cancelled) return;
const replacements = [["YOUR_PARTNER_CODE", merchant.partnerCode]];
if (merchant.displayName) {
replacements.push(["YOUR_TRADING_NAME", merchant.displayName]);
}
hideNotices();
showPartnerBadge(merchant, source);
walkCodeBlocks(replacements);
observeTabSwitches(() => walkCodeBlocks(replacements));
};
const onUnauth = () => {
if (cancelled) return;
clearMerchant();
removePartnerBadge();
showNotices();
walkCodeBlocks(null);
observeTabSwitches(() => walkCodeBlocks(null));
};
const tryUrlFallback = () => {
if (cancelled) return;
if (urlPartner) {
onPersonalised(urlPartner, "url");
} else {
onUnauth();
}
};
if (!document.cookie.includes("__client_uat")) {
tryUrlFallback();
return;
}
pollForClerk(clerk => {
if (cancelled) return;
if (!clerk.session) {
tryUrlFallback();
return;
}
fetchMerchantFromAPI().then(data => {
if (data) {
publishMerchant(data);
onPersonalised(data, "clerk");
} else {
tryUrlFallback();
}
}).catch(() => tryUrlFallback());
}, () => {
if (!cancelled) tryUrlFallback();
});
return () => {
cancelled = true;
};
}, []);
return null;
};
## Why you should promote referral on your homepage
Homepage promotion is an effective method of driving acquisition. Depending on your number of monthly visitors, it could drive up to 60% of all new customer acquisition.
The most common homepage promotion methods require a [landing page](/developer-docs/integration/entry-points/landing-page) to point customers to and allow them to register and share the referral offer.
## Implementation options
There are two main ways to enable homepage promotions: via a link to the referral landing page, or via a tag.
Gives you full control over your homepage assets. You can promote your referral programme via a link to the referral landing page and fully control the design, but you cannot mention specific available rewards.
Requires adding a simple tag to your homepage so your marketing team can customise design and copy via the Mention Me platform. Available as a homepage corner peel or a link to an overlay.
## How to enable homepage promotions via a landing page
Ensure you've already created a referral landing page. See [landing page instructions](/developer-docs/integration/entry-points/landing-page).
Create a link on your homepage that points to the referral landing page. This can be in any form you like — a text link, a banner or an image. We recommend creating a dedicated banner below the header or a homepage tile.
So you can track performance, add a situation parameter to the landing page link. For example:
```
www.example.com/refer-a-friend?situation=homepage-promo
```
If you're promoting the referral programme in multiple places on the homepage, use a unique situation for each promotion point. This will let you track each one separately.
If you're integrating this homepage promotion option, avoid specifying rewards or any other elements being tested in the copy. Otherwise you risk showing information that doesn't match A/B testing set up in the Mention Me platform by your marketing team.
For example, instead of saying **"Earn £50 credit when you refer"**, use a more generic message such as **"Earn rewards by sharing with friends"**.
## How to enable homepage promotions via a tag
The corner peel is one of the best ways to promote referral on your homepage. It's easy to implement, requiring only adding a tag to the page that shows a referral overlay when clicked.
Add the following in the body of the homepage:
```html Demo theme={null}
```
```html Live theme={null}
```
This option will display a link that shows the referral overlay when clicked. This has the advantage of letting customers register without leaving the homepage. The link can be customised to look like a button, and can be incorporated within a banner, image or another element on the page.
Create an empty div with the ID `mmWrapper`. This is just a placeholder which is populated via the JavaScript tag.
```html theme={null}
```
```html Demo theme={null}
```
```html Live theme={null}
```
Mention Me will customise the link style to match the look and feel of your website. The end result will be a CTA which displays the overlay when clicked.
## Parameters
### Mandatory
`homepage-cornerpeel` or `homepage-click-overlay`. Example: `homepage-cornerpeel`
### Optional
Locale code. Example: `en_GB`