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.

Overview

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.

Fullscreen Events

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

The Four Events

Will Show Fullscreen

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.


The Klarna component will, after this event, show a loader while it’s loading content to present in fullscreen.

Did Show Fullscreen

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.

Will Hide Fullscreen

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

Did Hide Fullscreen

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

Completion Callback

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.

Even in you don’t perform any transitions or animations during some events, you should always call these completion callbacks. Otherwise the Klarna component will wait indefinitely.

Recommended Flows

We outline two possible approches to handling fullscreen events below.

The Easier Approach

1. On Will Show Fullscreen

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

2. On Will Hide Fullscreen

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



A More Complete Approach

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.

1. On Will Show Fullscreen

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.

2. On Did Show Fullscreen

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.

3. On Will Hide Fullscreen

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.

4. On Did Hide Fullscreen

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