Embeds & links

At Chronicle, we're building a modern, collaborative format for presentations. Traditional presentation tools often create jarring context switches when incorporating external content - presenters frequently toggle between tabs, breaking the flow of their narrative. Moreover, embedded content typically appears visually disconnected from the presentation's design language, disrupting the cohesive experience we aim to create.

The Challenge

We identified two key problems to solve:

  • Enable users to seamlessly integrate external web content without disrupting their presentation flow
  • Maintain visual consistency while supporting diverse content types, from social media posts to data visualizations

Ideation and experiments

Our solution - Links and Embeds - allows users to bring any part of the web into Chronicle as interactive cards. Working closely with @Pradeep, we explored multiple approaches through rapid prototyping. We experimented with:

  • Brand-Specific Previews: We experimented with specialized embeds that pulled in not just content, but brand elements from the source - logos, color schemes, and typography.
  • Dynamic Backgrounds: We built prototypes that automatically extracted dominant colors from websites' metadata to create harmonious backgrounds for embeds. Here's a look at the color extraction process: Sandbox
  • Customization Controls: We tested various levels of user control over embed appearance - from fully automated to highly customizable. This helped us find the sweet spot between simplicity and flexibility that our users needed.
exploration
exploration
exploration
exploration

The Solution

After our experiments, we developed a three-tiered approach to content embedding that balances automation with user control:

  1. Bookmarks: These clean, simple cards work beautifully when metadata is limited or when users want to maintain a sleek presentation style. They're perfect for quick references without visual distraction.
  2. Generic Embeds: These standardized cards automatically extract and display metadata from any URL, creating consistent, visually appealing previews. They maintain Chronicle's design language while preserving the essence of the source content.
  3. Specialized Embeds: For content that deserves special treatment - like tweets, GitHub repositories, or design files - we built custom widgets that showcase the unique aspects of each platform. These embeds integrate seamlessly with Chronicle while preserving the familiar interfaces users expect from these platforms.
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration
exploration

Maintaining Flow

A key feature in our implementation is the "Peek" mode. Instead of forcing users to leave Chronicle to view linked content, Peek lets them explore embedded content right within their presentation. This maintains presentation flow and keeps the audience engaged with your narrative.

Technical Implementation

Under the hood, we built a robust system to ensure reliability and flexibility:

  • For metadata extraction, we leverage the Microlink SDK, with a work-in-progress microservice called metatron that will power our specialized embed integrations.
  • The embedding flow is orchestrated by XState, handling the complex state management when users paste links. As metadata is fetched and normalized, we automatically copy images to our S3 bucket as a fallback, ensuring embeds remain functional even if the source becomes unavailable.
  • Users have full control over their embeds through our override system. They can replace images through direct paste actions, and edit content using our ProseMirror-based editor when the default metadata needs adjustment.