Adding link-sharing features to your application is a great way to incentivize users to share your app with others, increasing product adoption.
Ray.so is one of those applications. It's one of the top code screenshot tools on Google, and is used by 100,000+ developers monthly to share beautiful images of their code.
When Raycast decided to add link-sharing features to Ray.so, they turned to Dub.co's link infrastructure, which allowed them to programmatically create short links and get world-class usage analytics on those links – all with a few lines of code.
The challenge: Long & ugly sharing URLs with no analytics
As a lightweight code screenshot tool, Ray.so stores the entire application state as a Base64 encoded string in the hashmark of the URL. This allows users to share their code screenshots with others by simply sharing the URL (without needing a database).
However, this resulted in long and ugly URLs, and there was no way to track how many people were clicking on them.
"Instead of sharing long, gibberish URLs, we wanted to let our users share beautiful short links with the ray.so domain."
Pedro Duarte
Hype Lead
The solution: Dub.co's Link Management Infrastructure
To solve this issue, Pedro from Raycast leveraged the Dub.co TypeScript SDK to programmatically create short links every time a user clicks on the Copy URL button on Ray.so.
To do this, Pedro created a Next.js Route Handler that would use the dub SDK to take the long URL and create a short link. Here's how it looked:
// app/api/shorten/route.ts
import Dub from "dub";
import { NextRequest, NextResponse } from "next/server";
export const runtime = "edge";
const dub = new Dub({
workspaceId: "xxx",
});
export async function GET(req: NextRequest) {
const searchParams = req.nextUrl.searchParams;
const url = searchParams.get("url");
const link = await dub.links.create({ url });
return NextResponse.json({ link: `https://ray.so/${link.key}` });
}Best part? By using Dub.co's subpath redirects feature, Pedro was able to set up the short links on the ray.so domain, so the links looked like they were part of their app.
The results: Beautiful short links with world-class analytics
With Dub.co's link infrastructure, Raycast was able to create branded ray.so short links that were easy to share and looked native to their app.
On top of that, they were able to get world-class usage analytics on those links, including:
- Time-series analytics: Track how many people are clicking on their links over time.
- Geolocation data: Country & city breakdown of where people are clicking on their links.
- Device data: See what devices people are using to click on the links.
- Referrer data: See where the links are being shared from.
"Dub.co's link infrastructure & analytics has helped us gain valuable insights into the link-sharing use case of Ray.so. And all of it with just a few lines of code."
Thomas Paul Mann
CEO & Co-Founder
Integrating with other Raycast applications
A few days later, Pedro also added link sharing to a few other Raycast applications:
- Snippet Explorer by Raycast (snippets.ray.so)
- Prompt Explorer by Raycast (prompts.ray.so)
- Theme Explorer by Raycast (themes.ray.so)
Build your own link-sharing features with the Dub.co SDK
Want to build your own link-sharing features with Dub.co's TypeScript SDK? We created a simple template – affectionately dubbed dublet – to help you get started:
Have any questions? Feel free to send us an email or tweet at us – we'd love to help!