Embed and transcribe a Daily WebRTC video call in any Notion page

[14/01/22] This demo app uses manifest v2. Manifest v2 is being deprecated by Chrome in 2022 and will no longer be accepted into the Chrome store.

At Daily, we’re constantly trying to push the boundaries of what we can do with our video and audio APIs. We often build new demo projects whenever someone at Daily has an idea on how to show just how flexible and reliable the Daily APIs are across different use cases.

Recently, when Notion announced their public API was in beta, we immediately started brainstorming how we could combine the Daily and Notion APIs in a way that helped customers get the most out of both.

All that brainstorming led us to an idea: what if you could have a video or audio-only call right in the Notion doc you’re viewing? Beyond just a call, what if you could transcribe the audio to the Notion doc directly?

We love a good challenge so, once we ironed out the details, we thought, “Let’s do it!”
High five

Introducing Daily Collab: A Chrome extension to embed and transcribe calls in your Notion workspace

Joining a Daily video call with the Daily Collab Chrome extension

Daily Collab is a Chrome extension demo that helps your Notion workspace members collaborate in real-time directly in Notion. From any Notion page, with Daily Collab you can now start a video or audio-only call that workspace members can join.

Calls can be transcribed with just a click of a button using Daily’s upcoming transcription feature. (This is a teaser of the transcription feature! It's currently being added to daily-js. Contact us if you need early access.)

We’ve published the Daily Collab demo app in the Chrome store so you can try it out right away. Once you’ve given the published version a test drive, you can clone the demo code and see how we put it all together.

To better understand what Daily Collab is, let’s take a look at what’s going on under the hood.

Daily calls, Notion docs, Deepgram transcription—oh my!

Daily Collab utilizes a combination of the Daily APIs, the Notion API, Deepgram transcription, and a custom Chrome extension. Over the next few weeks, we’ll be publishing a series of in-depth posts to do a deeper dive into each of these pieces. For now, let’s see how we landed on using each of these tools.

Chrome extensions FTW

It’s no secret that we love Chrome extensions at Daily. They can be so helpful for improving productivity or solving small problems quickly without having to build anything too invasive in your web app’s code.

It also happens to not be our first rodeo with building Chrome extensions. Previously, we built a Chrome extension for Daily Prebuilt calls to keep track of who has spoken in a meeting to make our company-wide stand-ups a little easier to follow.

We also built a Chrome extension that launches a screen share of your current webpage in just a couple clicks.

Minor inconveniences can be solved so quickly with Chrome extensions like these, and we love that!

Notion, meet Daily. Daily, meet Notion 🤝

We’re pretty confident when it comes to saying that Daily can be embedded in any web page, so it won’t surprise you that we knew we could add an embedded Daily call to Notion to help you and your team connect faster.

If you’re wondering when it might be helpful to jump into a call from any Notion page, some examples include when you need to:

  • Quickly clarify the details of a project while you and your colleague(s) are looking at the same Notion document.
  • Collaborate faster: Talk through your brainstorming sessions while you write out your ideas in Notion
  • Leave a call open so colleagues can jump in whenever they need help

Beyond that, the possibilities are up to you!

Using the Notion API in Daily Collab

With this project, we knew we wanted to specifically show off the Notion API too, so deciding on our features would mean emphasizing Notion specifically.

To do this, we wanted the embedded Daily call to be easy to access— a one-click experience— and only applicable to Notion docs (for now, at least). We also decided transcription would be a fun feature to include in calls since it uses Notion’s append block children endpoint and showcases Daily’s video and audio APIs, as well.

Deepgram has entered the chat

To handle the transcription aspect of the Chrome extension, we built an internal transcription feature in daily-js that enables transcription for your current Daily call. It’s not ready to be used in any of your production apps, but we’d love any feedback you have on how well it works in Daily Collab and what you’d like to see in the upcoming Daily transcription feature.

Transcription example using Daily Collab

There are several tools for real-time transcription but we went with one of our favourites, Deepgram. All of the interactions with Deepgram are handled internally by daily-js so, from a developer perspective, once you enable transcription for a call you’ll start receiving transcription text for it. We wanted this feature to be as simple to use as possible for developers: toggle transcription on and off as needed and don’t worry about the details.

If you’re curious when to use the transcription feature in Notion, here are a few examples:

  • Forget about getting distracted while taking notes at every meeting; instead, focus on your real-time collaboration while notes are taken for you
  • For those who prefer to dictate notes, start a call where you’re the only participant and let the ideas flow.
  • Get the written version of recorded calls without having to go back later and transcribe it yourself. (We’re looking at you, podcasters.)

Build your own Chrome extension with Daily and Notion: A new Daily blog series

To help our customers build on Daily Collab or even build their own Chrome extensions, we’re launching a new blog series on how we built Daily Collab.

This tutorial series will cover an overview of how Chrome extensions work, as well as how to:

  • Embed a Daily call into any webpage using a Chrome extension
  • Authorize the Notion API through the Chrome extension
  • Edit Notion pages through the Chrome extension and Notion API
  • And more 😁

We’ll be releasing these tutorials over the next couple weeks. To get a head start, check out the Daily Collab repo. In the meantime, let us know if there are any other topics you’d like us to cover.

Happy coding! 💫

Never miss a story

Get the latest direct to your inbox.