A popup frame is a smaller window that can be opened on top of your Flipbook. In the world of code, this is known as an iframe.

While iframes can be used to open any kind of web content, the most common way of using it in a Flipbook, is to enable visitors to shop directly in your webshop or open a store locator.

Popup frames can help you retain visitors by allowing them to shop directly in your webshop without leaving the catalog.

Traditional external links, while being easy to implement, move the user into another browser tab. This increases the risk of the visitor not coming back into the catalog after visiting a product page, wasting your effort of retaining the visitor and the resources allocated to creating the Flipbook.

Now that you know what a popup frame is and what the benefits are, let's focus on getting you started. There are a few things to consider, first:

CORS is an HTTP-header. Servers use this to recognize the origin of the domain and allow/deny loading resources.

When you attempt to open a popup which uses a different domain than that of your Flipbook, your website might not allow it. By using a subdomain that is part of your main domain, you'll get around most of these challenges. To achieve this, you'll need to set up and add any branded domains (domains that you own) in iPaper.

However, it is also possible to open different domains. Find more information on our technical documentation below.

If you don’t have a branded domain yet, find how to set it up here:

​

While popup frames can be created within the Enrichment Editor, you can automate the process by using Enrichment Automation. Only available on select plans.

If you’re not using an Enrichment Automation yet, or want to know more, take a look at our guide, below:

Here are some suggestions if you want to further improve the experience when using popup frames.

Consider adding a direct link to your website, so your customers can access the cart easily. You can do this by overriding the default iPaper shop behavior, in your Shop Configuration settings:
​

By implementing a close function on the popup frame, when a user adds a product to your cart, the popup can close by itself. This does require a small piece of JavaScript, which is easy to implement, and can be found in our technical documentation.
​

When a customer opens a popup frame, your website is loaded in a simpler and optimized view for better experience. This can be achieved by using query strings.

For example:
​https://www.mywebsite.com/products/myawesomeproduct?simpleview=1&

viewsource=ipaper
​

You can read more in the technical documentation below.

While the idea of opening your webshop on top of the catalog is great, there are a few things to keep in mind when using popup frames.

Most websites today will block other websites from being iframed to avoid clickjacking. This is a basic security measure to avoid malicious techniques to trick users into revealing confidential information. While a useful security feature, this can prevent popup frames from delivering the result you wish.

The best precautions security-wise is to include both X-Frame Options and Content Security Policy for full browser support. Popup frames require a small but technical change on your websites' server, to allow us to iframe your website.

In some cases, the basket session will get lost when closing and opening the popup.

There are two main solutions for this:

Even though the popup frame supports displaying a custom width and height, it is, ideally, the website being iframed within it, that should handle any resizing.

Doing so means that the iframed website, when viewed on mobile or smaller screens, should resize accordingly to the display. We cannot guarantee optimal results when iframing external websites within a popup frame.

As such, we highly recommend that you check the website you are iframing is responsive, and displays correctly on a variety of screen sizes.

Popup frames support the use of third-party payment gateways that allow your users to pay for your goods and services. However, we cannot guarantee that the payment gateway of your choice allows for it to show in an iframe, namely for the security issues presented above.

We recommend that if you intend to use a third-party payment gateway in your popup frame, that you check that this functionality is supported, prior to implementing it.

Your implementation will highly vary depending on your website's current security measures. We recommend involving your IT department to determine what's the best way of achieving this. For this, you'll want to get acquainted with our technical documentation, which can be found, below:
​

If you're looking for embedding your Flipbook in your website and enable shopping functionality, you might want to take a look at our JavaScript integration:
​

If you want your visitors to shop directly in the catalog with an iPaper basket and then redirect to your webshop, consider our Shop Export option: