Styling
We recommend making the iframe feel like part of your website rather than giving it a separate design treatment. This can include buttons, colours, card styling, border radius, and more.
You can customise your design theme yourself with the theme editor and see changes in real time, or provide us with the information below and we can edit it for you. If you use Optimise, your journey includes a dynamic Trustpilot integration which we can also style for you.
If you’ve already had a demo created for your brand, we’ve already considered your site’s styling. Otherwise, to get all your touchpoints looking on brand with a consistent look and feel, we need the following information:
| Type | Description | CSS |
|---|
| Logo | See image dimensions and file types | |
| Header | Font name, font weight, font colour | font-family: font-weight: color: |
| Paragraph | Font name, font weight, font colour | font-family: font-weight: color: |
| Button | Default colour, default text colour, hover colour, hover text colour | color: (x4) |
| Background | Colour | color: |
The Mention Me logo cannot be removed from customer journeys. Its inclusion is required for GDPR compliance, as we engage with customers via email and handle their data as part of your referral programme. Conversion rates also tend to improve when customers feel assured the referral programme is an integral part of your brand.
Golden Rules of Referral
These are the best practices we recommend to maximise your offer’s effectiveness when first presented to a customer.
Call to Action
This is the button that progresses your customers to the next step and confirms they want the reward. To make this a successful call to action:
- Big and bold
- The most prominent UI element
- Make sure the main CTA is obvious at every stage
- Perfectly matched to your branding
- Use a colour that contrasts with most UI elements
Message Hierarchy
The offer needs to be the first thing the customer sees and therefore the most prominent message:
- Clear to grasp in 1–2 seconds
- Visually bigger than all other text
- Draws attention to the reward
- Never too long
Fonts
Fonts are a key element of each brand’s identity. Your referral design should be completely indistinguishable from your own website.
We recommend using the same headings and body fonts as your site, but we will adjust sizing to improve the message hierarchy in most cases. Find out more about custom fonts.
Make Sharing Simple
The sharing screen is where customers choose their preferred method of sharing. To make this as simple as possible:
- Simplify and declutter as much as possible
- Ensure customers understand they have different options
- Use a distinct design for active and inactive tabs
Key Functionality
These features have been proven to improve performance. We are always looking at how to improve conversion in the customer journey.
Personalised Share Image
Personalising the sharing image lets you put dynamic copy on the image that referrers share. This is the image and copy the referee will receive on their sharing channel (for example, Facebook or WhatsApp).
We have seen as high as a 17% increase in purchase rate and a 14% increase in overall referral conversion. See how to customise the share image and copy.
Native Share
Native share makes sharing easier by allowing referrers to share using any app on their mobile, including Instagram.
We have seen it deliver anywhere from a 5%–15% increase in share rate and overall conversion. See how to set up Native Share.
Social Proof
Social proof displays the number of rewards given out in the previous calendar month. It appears on several referee pages.
When tested, social proof for the referee has driven a 10%–20% increase in purchase rate. See how to set up Social Proof.
A/B Testing New Functionality
When adopting new functionality, we recommend A/B testing against your current offer to measure effectiveness via conversion data. To request a test, .
Imagery
One of the most impactful elements on your main referral screens is the imagery, due to its size on desktop and hierarchical order on mobile.
See image dimensions and how to manage your imagery.
Landscape vs. Portrait
There is a range of touchpoints with different sizes and one image may not fit all.
Depending on your brand’s offer, you may want to focus on a product or particular section of an image. A portrait image may cut off the focus area on mobile because there’s not enough space to scale it down.
Where possible, provide or use an image that covers both landscape and portrait orientations, or a range of images that can be used where appropriate.
Imagery Themes
Simple
The referral journey has limited space with lots of content at every stage. Complex images can cause design problems, so sometimes simple is best.
- Solid colour backgrounds work best as they make it easy to overlay text with contrast
- Identify plenty of clear space in a good position for each screen
- Close up and zoom in
Product Focussed
Showing the customer what they can potentially spend their reward on will help progress their decision making.
- Put the product in focus
- Make it look desirable
- Consider a close-up or detail view
- Don’t cover or overlap with other UI elements
Social
Referral is a social activity, so help people think about their friends. Look for images that hint at doing things together and friendship:
- A photo of two models together
- Two cups of coffee
- Two pairs of shoes side by side
Emotional
Make people feel something positive when they look at the visual. Inspire positive emotions like amazement, awe, intrigue, amusement, and determination. People’s facial expressions help bring emotions to design:
- Smile kindly
- Laugh
- Looking down the lens
Illustrated
You don’t need photos for a well-designed referral journey. If illustrations are part of your brand language, you can integrate them in your designs. When using minimal imagery, typography plays a very important role — ensure the fonts have a strong presence.
Graphics can add an extra layer of incentive via reassurance or social proof:
- Show a positive review
- Add the potential gift cards they can receive
- Insert branded elements for coherence
- Illustrated examples of the offer
Mention Me is unable to create, add, or resize graphics on artwork, or create animations or GIFs.
Touchpoints
There are several touchpoints where your customers will come across your offer, each with their own levels of customisation.
Referrer and Referee Screens
These are the main screens where offers, sign-ups, and rewarding take place. On desktop, choose between a half panel or full width design.
Half Panel — The image takes up 50% of the referral screens. A portrait image works best for this.
Full Width — The text sits on top of the image and to one side. A landscape image works best, but the focus of the image must be to one side.
The purpose of an information notice is to make consumers aware of how their data is being used. This is a key privacy law requirement across the UK and European territories, and is increasingly becoming a requirement in other territories such as the US.
This information notice provides a link to our privacy policy and tells consumers how we use their data acting as your data processor.
The order of information is deliberate: the customer is aware of what they are agreeing to before clicking the button. This is our interpretation of the requirements under GDPR; you should speak with your own legal team if you have any questions about this privacy notice.
Iframe
The container all Mention Me content sits in is called the iframe. This is a fixed size based on desktop browsing and differs slightly between the Referrer and Referee screens. The mobile iframe is responsive across all compatible devices.
Mobile
The mobile image is kept short in height to increase the likelihood of content appearing above the fold on all mobile devices. This is important for user experience, as no dwell time is lost scrolling.
Corner Peel
The corner peel sits in the corner of your website and is used to trigger the referral pop-up.
Flexibility
The default structure of the corner peel contains the optimal message hierarchy to increase conversion. For high contrast, a block colour background is recommended.
Position
The corner peel can be positioned anywhere on the screen. This helps avoid overlap with other tools or marketing prompts.
Size
You can change the size of your corner peel to better suit your needs — to improve prominence on the page or to allow for a more branded look and feel via a bigger canvas.
Dashboard
The dashboard allows you to share your referral, track successful referrals, and track the rewards you’ve earned. It’s styled in a carded format, so you can easily match your site’s styling using the theme editor.
Email
We send emails at key stages of the customer journey to maximise the potential of both the referrer and referee journeys. The emails follow a simple, effective format. The structure is fixed: imagery, sections, and buttons cannot be moved from their default positions.
Depending on your journey, you can have different images per email or choose to have none at all. We use a design that is compatible with most email clients. See our email client support.
Share by Email and Forwarded Email
The Share by Email and Forwarded emails are designed to mimic a message sent from a customer’s native device. These emails are in plain text format and cannot be styled.
Mention Me does not support adding or editing custom CSS for email client-specific rendering issues (such as Outlook). Email display differences across clients cannot be resolved through custom CSS updates.
