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.
📖 This guide explains
Benefits of using popup frames
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.
Setting up a popup frame in your 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:
Extra navigation options
Here are some suggestions if you want to further improve the experience when using popup frames.
Add an external basket URL
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:
Select your Flipbook, the click on the Settings pane.
Select the Modules tab.
Click on Shop configuration from the vertical menu on the left.
You will see the Shop Configuration used for your Flipbook displayed here. To edit it, click on the Shopping cart icon beside your shop configuration.
The shop configuration in use is highlighted in the popup window. Select the pencil icon to edit it.
You'll now want to access the Advanced Shop settings. To do so, click on the cog icon to the right of the Shop settings section.
Under the Checkout behavior section in the Advanced Shop settings, enter the URL of your external basket in the External basket URL field.
Remember to Save your changes!
Implement a close function in the popup frame.
Implement a custom version of your website
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.
You can read more in the technical documentation below.
Things to consider when using popup frames
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:
Tweak the session cookie
Set up a branded domain to avoid cross-domain challenges.
Iframing responsive websites in a popup frame
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.
Using third-party payment gateways in popup frames
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.
Technical documentation for popup frames
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:
Alternatives to popup frames
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:
If you still have any questions about how to implement popup frames, or any other checkout option, reach out to our Customer Care team via the messenger in the corner. ✌️