Fullscreen in Hybrid

Our goal with the hybrid integration is to allow you to use your own web views to render any content you want, but also to:

• Enhance the user’s experience as far as is possible within a web view.
• Not touch your web view’s presentation or location in the view hierarchy.
• Not mess with your web view’s delegates, clients, or any other property.

To do this, we require a small amount of integration work from your part. This insures that when the user interacts with your web views, they’ll have the best possible user experience.

As on desktop, Klarna’s components may sometimes display dialogs and other fullscreen content. On mobile, this translates to covering the entire web view. Klarna sometimes presents content that requires the users full attention, which the user must either explicitly interact with (or dismiss) to continue.

However, in many applications that embed web views, these web views are not in a fullscreen presentation. The web view may only take up part of the screen, or there may be a tab or navigation bars above and below. This could allow a user to navigate away or preform conflicting actions.

To address this, we expose four events that allow you to move your web view to a fullscreen presentation in the way that is most suitable for your app.

We expose four events that you will be notified of. These events load web content so we don’t offer durations between each event.

This means that a Klarna component in your web view will show content that needs a full-screen presentation. This will overlay the entire web view.

This means that a Klarna component in your web view has dismissed the loader and is now displaying content in fullscreen over your entire web view.

This means that a Klarna component in your web view will dismiss the fullscreen content its presenting.

This means that a Klarna component is now in its original presentation state. Only taking up its initial space in the web view.

When you’re done performing any transitions or animations, you’ll need to call a completion callback that is provided to you in your listener. This lets the transitioning Klarna component know that your app is ready to continue.

We outline two possible approches to handling fullscreen events below.

You can put your web view in a view controller (or dialog) that you present modally on the will show fullscreen event.

You can then restore the web view to its original location on the will hide fullscreen event and dismiss the full-screen.

The above integration might risk showing a brief flash as the web view is removed from its place and added to its new location.

Similarly: if you restore the web view to its place before the full-screen view animates out, it will go blank until it animates out; if you restore the web view after it animates out, the web view’s original location will display the brief flash instead.

Replace the web view with a screenshot of it on will show fullscreen. This way, when the web view is moved, there wont be a blank space where it stood before.

You can put the web view in a fullscreen view controller (or dialog) and animate it in on did show fullscreen. This way, the content in the web view is already the fullscreen content when it animates in.

As with will show, you can replace the content in the fullscreen view controller with a screenshot on will hide fullscreen. You can restore the web view to its original place and remove the the first web view screen shot at this point.

Finally, you can dismiss the fullscreen view controller/dialog on did hide fullscreen.