Smart card - Embed card

Overview

Examples

Reference

Smart Links embed enables users to seamlessly integrate and engage with content from different sources directly within Atlassian products. This functionality boosts productivity by minimising the necessity to switch between tools, offering a smooth pathway to access and engage with linked content.

https://www.youtube.com/watch?v=9tpySewzRG0

Link response

Not every link has an embed content. To surface the embed content, the resolved link response must contain data.preview. The frontend implementation must specify support platform that matches with data.preview["atlassian:supportedPlatforms"] from the link response.

{
  "meta": { ... },
  "data": {
    "preview": {
      "@type": "Link",
      "href": "https://embed-url",
      "atlassian:supportedPlatforms": ["web"],
      "atlassian:aspectRatio": 1.7778
    },
    ...
  }
}

Breakdown

preview is object containing embed content information.
@type is the type of the data. For embed url, the type is Link.
herf is the URL of the embed content that will be set on the iframe.
atlassian:supportedPlatforms refers to supported platforms, web and/or mobile. This is used in conjunction with Card component's platform prop.
atlassian:aspectRatio is the preferred aspect ration of the embed content. This only applies to embed card and has no impact on preview action.

States

Our components are categorized into different states that dictate their appearance and functionality.

Resolving: This state is temporary, indicating that the link is currently being processed and has not yet been fully resolved. It typically displays as a placeholder or skeleton view until the content is completely loaded.
Resolved: This state signifies that the link has been successfully transformed into a Smart Link, displaying the content as originally intended.
Forbidden (403): This status denotes that the user is authenticated but lacks the necessary permissions to access the content.
Not Found: This status indicates that the linked content is unavailable, possibly due to privacy settings or deletion.
Unauthorized (401): This status indicates that the user lacks proper authentication.
Error: This status is displayed when the resolver encounters an error or when the URL is not supported.