grid.js: offer selection in an iframe

This script provides a drop-in bPerx offer selection grid. While reviewing their cart, or as part of an interstitial, this script gives users a selection of magazines and digital bPerx offers.

step one: pick a spot

We use document.querySelector to append the iframe, so find a good HTMLElement, and specify it in the bperxConfig object.

<div id="insert-here" class="nothing fancy" />

step two: config

Use the bperxConfig object to specify your campaign, style, and location within the page.

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

step three: javascript magic

Load the grid.js script after configuration. This will add the bPerx iframe to your webpage.

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

step four: complete order with silent.js

grid.js handles the presentation of the offer, and also stores the user's selection in session.

To complete the order, you'll need to use the silent.js script.

Read more about silent.js here

grid.js in action

See below for a live example of grid.js.

---