The current version of the Promoboxx Javascript API is:

0.6.5

Please use the latest API version on new projects to ensure all known bugs are fixed and all documented features are available. See the Initialization chapter for API link code syntax.

(Note: Live projects should be thoroughly tested when upgrading.)

State and Context

As data loads and the current mode of the campaign is identified, state-specific classes will be applied to certain page elements. This allows page content to be designed in a way that is responsive to changes in loading state or mode. For example, the <body> element receives the pbxx-loading class as soon as the Promoboxx script begins processing. Once campaign content has been loaded, this class will be replaced with the pbxx-loaded class and the appropriate pbxx-mode-[...] class.

Tip: The CSS styles that control the display of state-specific elements will not load until the Promoboxx JSAPI script has finished loading. This can cause out-of-context elements to display momentarily at page load. To avoid this issue, place the Promoboxx initializing script in the <head> of your document. Otherwise, you may preload the state styles by including a direct link to the state styles in the <head> of the document:

<link href="http://engine.promoboxx.com/jsapi/[jsapi_version_number]/pbxxstyle-preload.css" rel="stylesheet" />

Be sure to replace the [jsapi_version_number] placeholder above with the number of the Promoboxx jsapi version you are using.

The full set of state and context classes are described below.

State tags (applied automatically)

Token Description
pbxx-loading

Applied to <body> tag while the JSAPI is retrieving and processing data.

pbxx-loaded

Added dynamically to an element after the API has finished loading and processing campaign data It is always added to the body after the API is done initializing, but will also be added to the following elements when they have been rendered, if present:

pbxx-mode-brand

Applied to <body> tag. The the page is loaded and in "Brand" mode, meaning no retailer or location were specified.

pbxx-mode-retailer

Applied to <body> tag. The the page is loaded and in "Retailer" mode, meaning a retailer — but no location — were specified.

pbxx-mode-location

Applied to <body> tag. The the page is loaded and in "Location" mode, meaning both retailer and location were specified.

Selective Content Tags

Apply the following classes to any elements that should only render in select load modes.

Token Description
pbxx-mode-brand-hide

If the page is in Brand Mode, the content will be hidden.

pbxx-mode-retailer-hide

If the page is in Retailer Mode, the content will be hidden.

pbxx-mode-location-hide

If the page is in Location Mode, the content will be hidden.

pbxx-mode-brand-only

The content will be shown only if the page is in Brand Mode.

pbxx-mode-retailer-only

The content will be shown only if the page is in Retailer Mode.

pbxx-mode-location-only

The content will be shown only if the page is in Location Mode.