After someone submits their email address, show a button that takes them straight to their inbox to confirm their email.
Sniper Link is a free, open-source tool that helps increase email confirmation rates by detecting the user's email provider and providing a direct link to their inbox.
Simply include the script tag in your HTML:
<script src="https://sniperl.ink/v1/sniper-link.js" defer></script>- Clone this repository:
git clone https://github.com/buttondown/sniper-link.git
cd sniper-link- Install dependencies:
bun install- Build the project:
bun build- Deploy the
publicdirectory and the Next.js application.
<sniper-link
recipient="[email protected]"
sender="[email protected]"
></sniper-link>
<script src="https://sniperl.ink/v1/sniper-link.js"></script>You can override all styles of the Sniper Link button.
There are a few parts to the button: a button element, which contains an image (the logo of the provider) and text (which says “Open in {Provider}”), and a container that holds the button. While loading, a button is rendered with a loading element inside whose background-image is an SVG loading spinner.
You can override the styles by adding CSS that uses the ::part selector and our names for the elements (container, button, image, and text):
sniper-link::part(container) {
}
sniper-link::part(button) {
}
sniper-link::part(image) {
}
sniper-link::part(text) {
}
sniper-link::part(loading) {
}If the provider of an email address can't be discerned or isn't supported, the sniper-link element will receive a hidden attribute. You can use this attribute to style the button in this case (usually hide, if the browser doesn't do this by default).
By default, the text says “Open in {provider}”. You can customize this:
<sniper-link
recipient="[email protected]"
sender="[email protected]"
template="Confirm email using {provider}"
></sniper-link>To run the development server:
bun devThe application will be available at http://localhost:3040.
Sniper Link supports the following email providers:
- Gmail
- Yahoo
- Proton
- iCloud
- Outlook
- HEY
- AOL
- Mail.ru
These providers account for over 85% of email traffic.
You can also use Sniper Link via API:
fetch(`https://sniperl.ink/v1/render?recipient=${recipient}&sender=${sender}`)
.then(response => response.json())
.then(data => {
// Use data.url to redirect the user
});Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE for details.
Inspired by Sniper Links: How To Increase Your Email Confirmation Rates from growth.design.