Web Integration

Want to embed Pop-up Store in your web application? This is the place to find out how.

Video

Overview

To make the implementation of a framed Pop-up Store as simple as possible, we've wrapped it in a simple JavaScript library. Just follow these simple steps:

Include the JavaScript SDK on your page, ideally right after the opening body tag.
Include a button or link with the data-cp-url attribute.

Parameters

You can specify configuration parameters to the Pop-up Store via the following data attributes on the containing elements.

Access Key

You are required to include your access key when using the Pop-up Store widget to identify your request. You can add your access_key to either the container element (below), or specify it within script with cPopStore.setAccessKey('YOUR_ACCESS_KEY');

Modal

We currently support a modal setting which will, in addition to the regular iframe, inject basic modal CSS and overlay elements. You can override these styles if you wish in your own css. Or leave the modal out altogether and style the injected iframe on your own.

Events

Your Pop-up Store emits events via HTML5 pushMessage() calls so that you can listen for events inside the store and handle them within your containing application or site. For further documentation on the events see our events documentation page.