Deepdive into Link Unfurling

How to transform URLs into rich content previews for seamless integration and collaboration across platforms like Jira, Slack, and Miro

In the digital age, where information overload is a common challenge, finding ways to streamline collaboration and enhance user engagement is crucial. At NEXT, we’ve embraced the power of link unfurling to transform how users interact with our platform and beyond. This deep dive into the intricacies of link unfurling aims to shed light on its importance, detail our implementation journey, and highlight the benefits it brings to our users.

Why Link Unfurling Matters

Link unfurling is not just a feature; it’s a pivotal part of enhancing user experience in digital platforms. By converting a simple URL into a rich content preview, it allows users to seamlessly integrate NEXT into their daily routines. Whether it’s collecting insights in Jira Discovery, discussing findings in Slack, or conducting workshops with Miro boards, link unfurling makes these interactions more intuitive and meaningful. The ability to see a visual and contextual preview of the content before clicking the link not only saves time but also fosters a more engaging and collaborative digital environment.

At its core, link unfurling transforms a link into a rich content preview, providing a glimpse into the link’s destination. This process enhances user engagement by making the content more attractive and informative, offering a snapshot of the destination without requiring a direct visit to the page.

How We Implement oEmbed

We started by implementing oEmbed, an industry-standard protocol for embedding URL representations on third-party sites. The oEmbed protocol allows web publishers to automatically obtain rich previews of shared links, returning metadata like titles, descriptions, and thumbnails.

For example, when a user wants to share content from NEXT, the HTML header of the page includes a link to our oEmbed endpoint, like so:

<link
  rel="alternate"
  type="application/json+oEmbed"
  title="Find and share key trends"
  href="https://integrations.eu-west-1.nextapp.co/oembed/ai/xxx"
>

This endpoint then provides the necessary embed code to render a rich preview:

{
  "height": 337.5,
  "html": "<iframe src=\"https://app.nextapp.co/share/ai/xxx?embed=true\" height=\"337.5\" width=\"600\" allow=\"fullscreen\" allowfullscreen=\"true\" frameborder=\"0\"></iframe>",
  "provider_name": "NEXT",
  "provider_url": "https://www.nextapp.com",
  "thumbnail_height": 337.5,
  "thumbnail_url": "thumbnail.jpg",
  "thumbnail_width": 600,
  "title": "Find and share key trends",
  "type": "video",
  "version": "1.0",
  "width": 600
}

This process ensures a one-time implementation effort on our part while offering wide compatibility with platforms such as Miro, Jira, WordPress, Twitter, and Instagram.

We employ the following steps to provide data through oEmbed:

1. Detecting the Shared Entity: The first step in our process involves identifying the specific content being shared via its URL. This is crucial for determining the type of content and the corresponding action needed. Our system is designed to recognize various content types, such as highlights, stories, or AI chats, by parsing the URL structure (e.g., /highlight/ID, /story/ID, /ai/ID). This allows us to handle each content type with the specificity it deserves, ensuring that the right data is fetched and prepared for sharing.
2. Extracting Data with Type-specific Providers: Once the content type is identified, our type-specific providers come into play. These specialized modules are designed to extract data from the identified content in a standardized format. By tailoring the extraction process to the content type, we ensure that the most relevant and valuable information is retrieved. For instance, a highlight might require a different set of data compared to a story or an AI chat. This step guarantees that the richness and diversity of our platform’s content are accurately represented in the shared previews.
3. Outputting Data in oEmbed Format: The final step in our process is to format the extracted data according to the oEmbed specification. This involves converting the data into a structured format that includes essential elements like the title, description, thumbnail URL, and embed code. The result is a rich, engaging preview that can be seamlessly embedded on third-party sites, enhancing the visibility and accessibility of the shared content.

Beyond oEmbed: Unfurling via Bots

While oEmbed is widely supported, some applications like Slack and Microsoft Teams require a different approach. For these platforms, we’ve developed bots to create custom unfurling experiences. These bots allow for more detailed and interactive previews, utilizing features like Slack’s Block Kit to enrich the content presentation.

For instance, when a user shares a NEXT URL in Slack, our Slack app, equipped with a URL listener, triggers a call to our unfurl endpoint. We then fetch the data and send it back to Slack, formatted with Slack’s Block Kit for an enhanced viewing experience.

const linkSharedEvent: Middleware<
  SlackEventMiddlewareArgs<'link_shared'>,
  StringIndexed
 > = async ({ event, context, client }) => {
  try {
    const { channel, links } = event;
    const unfurableLinks = links.filter(({ url }) => canUnfurlUrl(url));
    const linksData = await loadData(unfurableLinks);
    
    const slackBlocks = linksData.map(linkData => {
      if (linkData.status === 'success') {
        return createUnfurlBlock({ linkData });
      }
      return create404LinkUnfurl({ linkData });
    });
    const unfurls = joinLinkUnfurls(slackBlocks);
    
    await client.chat.unfurl({
      token: context.botToken,
      channel,
      ts: event.event_ts,
      source: event.source,
      unfurl_id: event.unfurl_id,
      unfurls,
    });
  } catch (error) {
    console.error('Error handling link_shared event', error);
  }
};

Security and Data Privacy

In all our implementations, security and data privacy are paramount. We ensure that link unfurling only shares public data, with each access request checked against the project’s visibility settings. For sharing private data, our native “Share to Slack” feature allows secure data transfer, circumventing the need for public link unfurling.

Happy coding!

PS: You can try out our app — for free: www.nextapp.co