In this post, we'll take a closer look at one of the standout features of our Links. As we previously discussed in this post, Links are an essential tool for marketers, allowing them to shorten URLs, direct users to specific areas within a mobile app, and effortlessly create landing pages. This time, we’ll focus specifically on the last use case — creating landing pages.
Grabbing your audience’s attention at the right moment is key. That’s where Landing Pages come in. With this powerful feature, you can create static webpages with a short URL that can be easily shared across multiple channels — including websites, ads, social media, email, push notifications, and text messages.
Whether you want to promote a new product, collect customer feedback, or offer exclusive deals, these pages can be quickly published with minimal development.
Key Benefits:
Easy to Share: Short URLs make it simple to distribute your message across various channels.
Quick to Create: No need for complex web development — build your page in minutes.
Personalized Content: Tailor your message for specific platforms.
Trackable Performance: Measure engagement and conversions with built-in analytics.
Perfect for Last-Minute Needs: Ideal when you're short on web development capacity or need a page that can't be added to your brand’s website quickly.
Where Can You Use Landing Pages
Websites & Ads
Direct visitors to a dedicated page with more details and a clear call-to-action.
Social Media
Share exclusive content or promotions with your followers.
Email Campaigns
Enhance your emails by linking to a focused landing page.
Push Notifications
Deliver instant and engaging content to mobile users.
SMS & Messaging Apps
Make your messages more impactful with a short, clickable link.
How You Can Use Landing Pages
Let’s explore a powerful example. Suppose you want to distribute digital passes via text messages, which you already generate with Notificare whenever users make a purchase. However, directly including links to these digital cards in your messages isn’t ideal, as the cost of your campaign depends on the length of your message.
Additionally, you want to provide more details about your discount while ensuring compliance with Apple and Google's guidelines for distributing digital cards. This is where landing pages become the perfect solution.
With Notificare, you can leverage your HTML, CSS, and JavaScript skills to create a customized landing page for this purpose. Consider the following markup:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your Pass</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
<style>
body {
background: #2B42F7;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 16px;
line-height: 1;
color: #232C2A;
font-weight: 400;
overflow-x: hidden;
}
.main-content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 50%;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 6px 6px 24px -6px rgba(0, 0, 0, 0.48);
}
.pass-info {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error {
display: none;
font-size: 18px;
text-align: center;
}
.logo {
max-width: 200px;
margin-bottom: 30px;
}
.button img {
width: 150px;
margin-top: 10px;
}
.small-text {
font-size: 12px;
}
</style>
</head>
<body>
<div class="main-content">
<img class="logo" src="https://notificare.com/assets/images/logo-actito-white.png" border="0" alt="">
<div class="box">
<div class="pass-info">
<p>Scan this code:</p>
<img id="barcode" src="https://push.notifica.re/pass/barcode/qr/123456890" border="0" alt="" width="100" height="100">
<p style="margin: 10px 0 0 0;">OR</p>
<a class="button" id="googleButton" href="" target="_blank"><img alt="" src="https://notificare.com/assets/images/add_to_google_wallet_badge.svg" width="150" height="auto" /></a>
<a class="button" id="appleButton" href="" target="_blank"><img alt="" src="https://notificare.com/assets/images/add_to_apple_wallet_badge.svg" width="150" height="auto" /></a>
<p class="small-text">This promotion expires on 31 March 2025</p>
</div>
<div class="error">
No digital card found
</div>
</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search),
barcode = urlParams.get('b'),
app = 'YOUR_APP_ID',
btns = document.querySelector('.pass-info'),
err = document.querySelector('.error'),
barcodeImage = document.getElementById('barcode'),
googleButton = document.getElementById('googleButton'),
appleButton = document.getElementById('appleButton');
if (!barcode) {
err.style.display = 'block';
btns.style.display = 'none';
} else {
barcodeImage.src = `https://push.notifica.re/pass/barcode/qr/${barcode}`;
fetch(`https://push.notifica.re/pass/savelinks/forbarcode/${app}/${barcode}`)
.then((response) => response.json()).then((result) => {
googleButton.href = result.saveLinks.googlePay;
appleButton.href = result.saveLinks.appleWallet;
})
.catch(() => {
err.style.display = 'block';
btns.style.display = 'none';
});
}
</script>
</body>
</html>With Notificare's landing pages, you can effortlessly create, refine, and publish a fully functional webpage in no time:
And you can seamlessly include its short URL in your event-based campaign's text message:
And just like that, you can now distribute digital cards via text messages without relying on your development team.
How to Get Started
Creating a landing page with Notificare is quick and effortless. Simply design and save your page to generate a short URL, and start sharing it wherever your audience is. Plus, our actionable analytics help you track clicks, categorize user interactions and create follow-up campaigns that maximize your results.
As always, you can find us available for any question you might have via our Support Channel.