How to add a Picture in Picture Walkthrough to your iOS App

Picture in Picture first launched on iPhone with iOS 14 in late 2020. It was used for traditional use cases like video viewing and applications like FaceTime. But since then, developers have discovered a new practical application of PiP capabilities on iPhone: hand-holding their users through complicated flows outside of their app.

Want your users to add your app's widget to their Lock Screen? A Picture in Picture video can guide them through the process.

Want your users to add your app's widget to their Home Screen? A Picture in Picture video will do the trick.

Want your users to enable your app in iMessage? PiP it.

The first step is to create the video that is going to be guiding your user through their journey. There are a million options for video editing software -- we used Final Cut Pro, but iMovie, After Effects, Canva, and others will also suffice. Audio is not necessary for the experience.

Here's a video that we did for our app POV that explains how to add the POV widget to their Lock Screen.

Once you've created the video, upload the video to a hosting site so that you can pull the URL.

Now, to the iOS implementation...

Create a holding View Controller that shows the user what you'd like them to do. Below is how we did it:

Not only does this screen allow you to set up the Picture in Picture controller, the Open Button allows you to open the Settings app and simultaneously launch your Picture in Picture video.

Declare player, playerLayer, pipController variables at the top of the class and in the viewDidLoad, call setUpPictureInPicture:

setUpPictureInPicture readies your video behind the scenes so that it's loaded by the time the user presses the button:

When the button is pressed, restart the PiP video and attempt to open the Settings app (or other location) that you're guiding the user to:

And that's all there is to it – you now have a functioning Picture in Picture walkthrough for steps outside of your app!