iFrame Integration

iFrame Integration is a useful and easy to set up feature allowing access to online store directly from your web site.

The main advantage of using iFrame is that your customers would not have to navigate away from your web site to use your store on Potify as it will be embedded directly into one of your website pages. 

iFrame is designed in a lightweight logo-less style scheme, allowing seamless visual integration with no distraction to third-party logos or mentioning. On top of that, iFrame works as Promo Page, restricting Users from browsing any locations aside from your online store.

As your iFrame integrates your store directly into your website, efficiency of innerlinking and advancing SEO for your website increases likewise.

And the integration process is very easy — just insert a small script into desired .html page document.

In this article, you will see the general requirements and description of the iFrame-integrated Potify page, and a short instruction on how to perform the integration.

Description and requirements

The screenshot below is an example that demonstrates how your page can look with an iFrame integration of Potify.

The area highlighted in red is the header of your page. It can contain whatever logo and menu buttons you desire. And when the user clicks the menu button that opens your shop (i.e. Menu, or Shop Now), your Potify shop opens right on your website, and users would not have to leave your website.

Here is a short description of the page layout (from top to bottom), with a few requirements:

1. Header (highlighted in red in the screenshot above) — your own website's header that is not affected by iFrame integration. We strongly recommend making it compact to leave more space for your menu (especially for mobile devices).
2. The rest of the page — iFrame, integrated by the embedded script. iFrame uses all available space from the header to the bottom of the page and automatically scales and resizes if the user resizes the page.
3. We strongly recommend not to add the footer to this page.

How to add the script

Integrating the iFrame into your website is very easy.
Just add the following fragment of the code to your .html file of the desired page:

<script
    src="https://potify.net/embed/your-office-slug"
    type="text/javascript"
    defer
></script>

Where your-office-slug is the part of the URL of your Potify store page.
https://potify.net/promo/your-office-slug.

Please keep in mind that you should insert the above mentioned fragment after the block containing the header in the common body. Make sure not to add anything (i.e. the footer) after the script, the common body should have the following styles:

"width: 100%;
 min-height: 100%;
 margin: 0;
 padding: 0;"

We are open to your suggestions and feedback. Thank you for using Potify.
If you have more questions regarding this article, you can submit your request to tech support.