What Does This Guide Accomplish?

Your users will see a selection of magazines and digital offers in either their cart, or as part of an interstitial.

Integrating bPerx into Your Website via an iFrame

This guide walks you through every step necessary to integrate bPerx into your website!
If you get stuck or have questions, bPerx is always here to help!

Finding an HTML Element for the iFrame

On your cart page, create or find an HTML element to hold the iFrame.
Give this HTML a unique ID - this is how we (bPerx) will find that element.
Here's an example of a div element with a unique ID.

<div id="insertHere" class="nothingFancy" />

Setting Up the bPerx Config Object

The bPerx Config allows you to specify where the iFrame goes, how it looks, and details about your campaign.
Include this <script>var bperxConfig<script /> script on your page.

• Enter your unique key in the "key" property
• Enter the unique ID of the element from step 1 into the "querySelector"
• Documentation is coming soon for custom styling and campaign details!

Here is an example - remember to include the # before the ID name!

            
                <script>
                    var bperxConfig = {
                        key: 'test-key',
                        querySelector: '#insertHere',
                    }
                </script>
            
        

Loading the grid.js Script File

File grid.js actually creates an iFrame, keeps user data in a session, and displays the selection of offers.
AFTER the bPerx configuration script, include a script element for the grid.js file.

<script src="https://iframe.bperx.com/js/grid.js"></script>

What Does it Look Like?

Your cart/checkout page should look like this:

            
            <div id="insert-here" />
                <script>
                    let bperxConfig = {
                        key; 'test-key',
                        querySelector; '#insert-here'
                    }
            </script>

            <script src='https;//iframe.bperx.com/js/grid.js'></script>
            
            

If everything was done right, you should see this:

Configuring User Data

After checkout is complete, the user data needs to be loaded into a new bPerx config object.
This script goes AFTER the checkout page, onto the confirmation page.
Note that the "state" property prefers two-letter abbrevations.
The silent.js will try to match full state names to an abbreviation, but there are no guarantees.

            
                <script type="application/javascript">
                    var bperxConfig = {
                        email: 'tester@test.com',
                        name: 'Saul Goodman',
                        addr1: '123 Street Name',
                        addr2: '', //optional
                        city: 'Albuquerque',
                        state: 'NM',
                        zip: '12345',

                        // If true, this flag will automatically load read.js
                        read: true
                    }
                </script>
            
        

Loading the silent.js Script

After checkout is complete, and user data is loaded, silent.js can get the user data and complete the offer.
Place this script on the confirmation page, below the new bPerx config script above.

<script src="https://iframe.bperx.com/js/silent.js"></script>

In order for the offer to go through,

• The user must be opted-in
• All required data must be present

Any missing data, or a user opting out, means the offer will NOT go through.

Understanding the silent.js Script

The "silent" comes from the appearance - this is a hidden iFrame that has NO affect on your webpage at all!
You will not see silent.js, but you will know if it works because users will receive a receipt from bPerx.

Understanding read.js Script

If a user redeems a digital magazine, read.js can provide a link to read it instantly.
read.js will look for a digital magazine link in the current active session. If no link exists, then the script will gracefully exit the scene.
On the same confirmation page, place the read.js script after the silent.js script.

<script src="https://iframe.bperx.com/js/read.js"></script>

Loading the read.js Script as Soon as Possible

You can load the read.js script ASAP for better performance.
In your bPerx script on the confirmation page, with the user data, add this "read: true" flag.

            
                <script type="application/javascript">
                    var bperxConfig = {
                        email: 'tester@test.com',
                        name: 'Saul Goodman',
                        addr1: '123 Street Name',
                        addr2: '', //optional
                        city: 'Albuquerque',
                        state: 'NM',
                        zip: '12345',

                        // If true, this flag will automatically load read.js
                        read: true
                    }
                </script>
            
        

Viewing the read.js Script

The read.js script loads inside of a small div, anchored to the corner of the web page. You can see an example below!

It Works! Hooray!

That is it! Your customers can now choose from a wide selection of magazines and digital offers.
Remember - bPerx is here to help, so reach out anytime.