One of the best growth hacks in recent times was the invention of embeddable widgets. We rely on these embeddable widgets at Dashcam all the time, in fact we gave them a name – an embedded dash!
The most famous embeddable content type is probably video. In fact, YouTube was one of the pioneers of the embedding technology.
When YouTube launched in 2005, it made video embeds easy to use with code snippets. Their embeddable player was a critical innovation that fueled the growth of the online video sharing platform.
How YouTube embeds work
- YouTube provides a way to embed videos on other websites by generating a snippet of code called an embed code.
- This code can be copied and pasted into the HTML of any web page.
- The embed code is an iframe HTML element and contains the video ID of the specific YouTube video, along with some parameters like width and height.
- When a user visits a page with this embed code, the YouTube video will be pulled in and played inline within that page.
- The video plays within the page but YouTube still hosts it on their servers. The embed code just provides a “window” into YouTube.
- The owner of the website does not need to download or host the video file themselves. This makes embedding easy and efficient.
- YouTube handles all the complex stuff like streaming the video and analytics.
- There are options to customize aspects like autoplay, loop, controls, start time and more. But the basic process is copy and paste the embed code.
This simple mechanism helped YouTube grow virally for many years because watching a YouTube video was so simple.
But embedding content has helped fuel viral growth for many companies beyond just YouTube:
Twitter: Twitter’s embedded tweets allow people to share tweets on other sites, spreading Twitter content.
Facebook: The Facebook embed plugin makes it easy to integrate Facebook content like posts, videos and maps. This helps drive engagement.
Spotify: Embeddable Spotify playlists let people share music on blogs, articles or social media.
Pinterest: The Pinterest embed pin feature allows people to share pins off Pinterest, increasing reach.
Github: Github’s embed feature lets developers embed code snippets, Gists and files, making content reusable.
Discord: Embeddable Discord chats can be placed on external sites, helping servers gain visibility.
Typeform: Typeform lets you embed interactive forms, surveys and quizzes to collect data on any website.
Figma: Figma embeds allow designers to share prototypes and designs publicly.
Google Docs: All Google Docs types of documents can be embedded into other websites to quickly share slides, spreadsheets and content, even forms!
The importance of embedding in modern applications
Embedding allows content to be easily integrated into any website without having to download, host or reformat files. This makes it very convenient for users to share and to consume information. It’s so convenient, it helps distribution of content. Embeddable content can spread rapidly across the web by making it easy to share on any site. This greatly amplifies the distribution and reach.
When embeddable content is shared across the web, it enables audiences to engage with it: if users find the embedded helpful content and they experience a well-designed embed, users are enabled and incited to engage.
Depending on the complexity of the embed, you can retain some functionality: sites hosting the content can ensure it maintains all the features and functionality like video players, comments, etc. however sometimes for more advanced interaction, even embedded content will trigger redirecting to the full view.
How Dashcam uses embeds
We use embeds to enable users to see a Dash on a page like on this page, a Github issue, a Notion page, a Wiki page etc.
By retaining the control of the interface – we can easily show rich information to the user through our view.
Meanwhile the author of the page (in this case it’s me, but it could be you) can decide how and where to embed the content: for example here I am embedding a Dash
As time progresses the embed technology gets better. There are new embedding mechanisms like oEmbed which enable the integration of services into websites. Fun fact, Leah Culver who used to run engineering and hackathons at Dropbox is a co-author of the oEmbed spec!
So, in summary, embeds provide a powerful way for content and functionality to be easily reused across the web. This brings convenience for users, strategic value for companies, and catalyzes innovation across the internet.
