How to Add an Embeddable Player and Interactive Transcript from Descript in WordPress

In this video, I’ll show you how to add an embeddable player and interactive transcript from Descript in WordPress, or basically, any website.

Try Descript Now ? Get Descript

Video Transcript

In this video, I’ll show you how to add an embeddable player and interactive transcript from Descript in WordPress, or basically, any website.

Welcome to this video.

My name is David. And I hope you’re well wherever you are around the world.

The reason I am doing this tutorial is because there are times when you may want to include an interactive transcript for your podcast, or even a video, or even maybe you’re running and hosting a course on your website.

But you want your students or your viewers to follow along with whatever is being said as a transcript.

Now, Descript made this available in the recent update, which is version 24.

And I’ll show you from start to the end, how you can generate or publish a page inside Descript.

Secondly, I’ll show you how to create a post inside WordPress and then we’re going to embed our code.

So basically, what you see in front of you is my backend, that is my WordPress backend.

And next up, we have two projects here.

We have a video, which is a screen recording that I did using Descript.

And then we have our (audio)transcript.

So if you have a podcast, if you have an audio or maybe a video that you wanted to host on your website with an interactive transcript, then Descript makes this easy with a recent update.

So let’s begin.

So process number one, which is pretty simple.

And I’ll do for both files, the audio and the video file, and then embed both.

So let’s begin with our project inside Descript.

Now, we are going to hit Publish.

Alternatively, you can click on share, export – page, and this is going to come to the Publish page.

So let’s assume we want to publish this particular transcript.

And then we want to get the embed code.

So you will hit Publish fast. And once we hit publish, always ensure that you want to show the transcript, you can always change the name if you want to.

And we’ll do that for the screen recording.

Now, your page is published.

So if I click on Open browser, then our project is actually going to be opened up onto the web browser.

And you’ll see there’s an option to search for the transcript.

And then you’ll see some few things– the date when this was done, Show transcript, allow comments.

And then your transcript is going to be available here.

At the bottom, you’ll see the controls where you can actually play, seek…that is– all these things, change the volume jump to.

And my assumption is if you have markers inside Descript, if you created markers, then this is going to actually help you navigate faster. And then we have auto scroll.

Now, always ensure that you set auto scroll on when you’re actually watching the content.

So what I mean is that if I play this, let’s play.

“In this video, we’re going to look at how to use Descript for audio audio transcription. Hi, my name is David for… you audio recordings by editing the text you…”

What happens with auto scroll, it scrolls everything down.

Now, that is if you want to just share these and somebody opens in a web browser. That’s the one that he opened in the web browser.

If you want to actually add these to your website– WordPress website for the purposes of this video, you’ll need to click on copy embed code.

Next up, we’ll go to our backend, and then click on new– post and this is how to add a new post in WordPress.

You can also do it from the sidebars here, but let’s use this particular option to add a new post.

So so let’s just call it that.

And then we’ll come inside here.

And then we’ll choose a code, choose HTML and then Ctrl V.

And once we do that, if you click on preview, you’re going to see your particular interactive transcript available here. And there it is.

So if we actually decide that this is what we wanted, then this is what we’re going to work with.

Please note that you cannot change the interactive transcript inside here, you can only change it inside Descript.

So if you want it to have a different title, always ensure that the title is ready before you publish.

If you actually decide that later on, you’ll need to change the title then you can change the title and publish the project–publish it again, and then add it to your website.

So we have it right here we can actually preview how it looks like.

Let’s say preview in new tab– how it’s going to look like on a desktop computer. So it’s generating the preview.

There we go. So here we go.

Now, how to embed an interactive transcript, how to use descript and you can see when you have over this, you’ll see some changes if you click on play.

“In this video, we’re going to look at how to use Descript for audio transcription.”

So when you look at that it looks good, basically scrolls well, I wish that this particular frame or this iframe would fit well inside any page that it’s actually given to it.

So as I’ve, as we’ve seen in the previous option, how to show it in the browser, you can always jump through the markers. And this is when the markers come in handy.

Now, if you want to have people stay longer on your website, then this is a good thing.

What we’re going to do next is we’re going to add a video and embed a particular video transcript here.

So we can just click on browse, let’s say paragraph, “how to screen record in Descript,” we can make this actually a title, just convert this paragraph to heading. That’s okay.

We can center it, align center, enter, and then we can just come here add a custom HTML and then we go inside Descript to the project with the screen recording.

Now, we’ll now use this particular option to publish, click on Publish.

And then we can just change it, “how to screen record in Descript.”

And then Always remember to show the transcript is important.

And then click on Publish.

And once we click on publish, it’s basically going to take the different or the time that it wants, depending on your project.

Now, we’ll only need to copy the embed code, and then go back to our website here.

And then Ctrl V to paste in the embed code.

And you can actually preview this to see how it looks like. And it looks really good.

You have your video to your left, and your transcript or interactive transcript to your right.

Now that we have embedded a video inside our WordPress website, let’s just preview what we did in the previous one.

Let’s click on Preview.

And we want to preview in New Tab.

So it’s generating the preview.

And both the audio version with an interactive transcript. And the video version with an interactive transcript will be available.

So this is the audio version.

And you can always search the transcript.

But let’s scroll down a little bit. And here we have the video version.

And with this, we can just click on play now.

“And you’ll see that it started recording here”

Now, with a video, you’ll have the option to turn on the closed caption file stream for this.

And this will come in handy, especially when you’re hosting courses on your website.

So if we click on Play again, –“you’ll see an orange like box rectangle that surrounds the whole area, the kind of the recording area, you can move your particular webcam.”

So when you enable auto scroll, it scrolls the transcript automatically.

And it follows the words in real time.

So something else with a video, you can always maximize the video, and you have your video to your left.

And if we continue playing this particular clip, –“in real real time depending on what you’re doing, it’s”– a pause again.

You’ll have your interactive transcript on the site.

So you can always search, let’s say screen, how many times the word screen appears and you’ll see bout four times.

And this really makes it easy to put out your content out there.

Now, that is basically the recent to changes on Descript.

And this is one of the best options out there.

I wish and this is my final take I wish that this particular transcript was adaptable to this particular– depending on the page that you’ve hosted it on, so that it actually looks good or it will offer some slight customization options.

It would be really awesome.

Now, that is what I wanted to share today.

And that is how you can add an embeddable player and interactive transcript from Descript to your website or blog easily.

Thanks for watching.

I hope this video has been of value to you.