PNR Commerce Video Carousel Demo

How to program a commerce video carousel using PNR video annotations.

Video Transcript

- All right, this is a quick look at adding annotations to videos and Pick-N-Roll in order to create a commerce video carousel. And what you can see here is a video that I've uploaded. It's got some products in it. And I filled out the normal metadata for the video.

And it's just title, description, provider. You can fill out whatever other things you need to have in here. But we're going to pay attention particularly to the Annotations tab. Here, you can see the two annotations I've already set up.

And if I play the video from the beginning, you will see they do highlight during the time period that they're set for. So for the six seconds at the beginning, you're going to highlight the can opener, and then you're going to highlight the mixer, and we'll go through adding a third one here. But this is the annotations interface. You can edit them with that hover menu here.

There's a Edit and Delete. And inside, you'll find pretty basic stuff, Start Time, End Time, Product Name, Description, Price, Discounted Price, and product info and a thumbnail. So we're going to go ahead and add a third one.

We've got this scrubber here. It's a vegetable scrubber. And looks like that's going to start at 15 seconds and go until the end of the video. So this picker here only has commerce. Eventually, there will be other kinds of annotations.

I'm going to click Add annotation and maybe set 15 seconds, right? Yeah. And then it goes to 21. And I'm just going to sneak peek. This was called the vegetable brush.

And we grab some copy. And they have this at 6.99. Remember to use the actual monetary symbol that you need. Put that in there. Well, all right. This is from Amazon. I don't have a affiliate link on there, but let's pretend that I did.

All right. So now, the thumbnails, there are two types of thumbnail now. There's the vertical for use on the web, and then the square ones for the updated version of this widget that is being used in mobile apps. Right now, it's just in Yahoo Mail Six. So if you know for sure that you're not making this content and that it won't appear in Yahoo Mail Six, you don't have to worry about that.

We will auto crop your image though, to fit that just in case. So I just grab the image that I uploaded earlier and crop it. And then if I switch over to the square one, it would just get this outcrop. But you can also independently program a separate one if you want to.

So I'm going to use this square scrubber and ensure that it's cropped a little tighter. And that's that. I'm going to hit Save. And these are going to show in the order of how they appear. Looks like I was going with good grips on those others. So I'm just going to go ahead and add that here for consistency.

All right, and then I can play it, and watch, and make sure the highlighting is correct. Go back to the beginning. And then from here, you're basically just going to embed this video into your story. You're going to use the Add video workflow. Don't use the embed code.

Use add video workflow. And you'll get the carousel underneath it. So I'm not going to make you wait while I hit Publish and all of that. But I will just-- I will hit Publish. I'll edit this video. And then like magic, we'll be ready to put it in a story.

And we're back. OK. And when your video is done, you're just going to grab the UUID. Go into your story. Click on Add video. That's your video. And add it. And there it is.

Our goal is to create a safe and engaging place for users to connect over interests and passions. In order to improve our community experience, we are temporarily suspending article commenting