Aploze-js NPM | npm.io

Aploze.js

(https://aploze.github.io/aploze-js/)

Introduction

This document describes how to install and use Aploze’s browser-side JavaScript library, Aploze.js.

Including Aploze.js

Include the Aploze.js script between <head> tag in each page of your site. It should always be loaded directly from https://js.aploze.com/, rather than included in a bundle or hosted yourself.

<head>
  <script type="text/javascript" src="https://js.aploze.com/v1.js"></script>
</head>
<body>
  ...
</body>

Using Aploze.js as a module

We also provide an npm package that makes it easier to load and use Aploze.js as a module :

npm install aploze-js

Usage

Aploze init

// Init
Aploze.init({
  key: "your-key",
});

// Listen
Aploze.on("ready", (datas) => {
  // Aploze Library is ready !! 🎉
  // log account relative datas (domain, events etc...)
  console.log(datas);
});

Aploze will automatically create a <div id="aploze-player"></div> and fill it with the player overlay. The player overlay is where all your Aploze events are shown.

(See all Initialization Options.)

(See all Listenable JS events.)

Open the player overlay

To see your Aploze events UI in prelive, live or replay status, you need to open the player overlay with an Aploze event ID.

Aploze.player.open("your-event-id");

(See all Available JS methods.)

You can access to your Aploze events IDs in the "ready" JS event handler.

Aploze.on("ready", (datas) => {
  // Aploze Library is ready !! 🎉

  // Log all my Aploze events
  console.log(datas.events);

  // Loop all my Aploze events, and create a button for each one,
  // to open them in the player overlay

  for (var event of datas.events) {
    var $event = document.createElement("button");

    // Set the event title as button label
    $event.textContent = event.title;

    // Attach click listener to open the player with the right event ID
    $event.addEventListener("click", function () {
      Aploze.player.open(event.id);
    });

    // Append my button to body
    document.body.appendChild($event);
  }
});

Cart Integration (Optional)

For a better user experience, users can access to the shopping cart and add products directly from the Aploze player interface. To do this, you need to :

Redirect the user to your cart page when the cart button is clicked, for this, pass the url on init :

// Init
Aploze.init({
  key: "your-key",
  cart_url: "https://yourshop.com/cart...",
});

(See all Initialization Options.)

Listen 'player.add_to_cart' JS Event to be notified when a product is added to the cart by user and return the callback function to notify the user on the player interface.

(See all Listenable JS events.)

Aploze.on("player.add_to_cart", function (product, callback) {
  yourAddToCartMethod(product.id)
    .then(() => {
      callback(true); // item successfully added to your cart
    })
    .catch((error) => {
      if (error.type === "out-of-stock") {
        // Unsuccessful due to 'out of stock'
        callback({
          success: false,
          error: "out-of-stock",
        });
      } else {
        // Unsuccessful due to other issues
        callback(false);
      }
    });
});

Reference

Available JS methods

Here all methods you can use :

Method	Params	Description
`Aploze.init(options)`	`options`: Object	Initialize Aploze.js (See all initialization options)
`Aploze.player.open(event_id?, options?)`	`event_id`: String	Open the player with current Aploze Event or new one if event_id is set. options = {status: 'live'} to simulate the Live Status
	`options`: Object	In options, you can simulate the Aploze Event Live Status: {status: 'live'}
`Aploze.player.close()`		Close the player
`Aploze.player.reduce()`		Reduce the player

Initialization Options

Here are some of the most commonly used options:

Key	Valid types	Default Value	Available values	Description
`key`	String			Required. The Aploze access key as a string
`debug`	Boolean	`false`		Set to `true` to display debugging information
`links_target`	String	`_blank`	`_blank`, `_self`	How Aploze player links are opened. `_self` create an iframe on the current page for internal links. (⚠️ for security errors, see Troubleshooting)
`cart_url`	String			Your Cart page url

Listenable JS Events

Here are all listenable JS events:

Event Name	Handler params	Description
`ready`	`(datas)`	Aploze.js is ready to be used
`error`	`(error)`	Aploze.js has an error
`player.event_start`		Player is instancied with an Aploze Event ID
`player.event_status`	`(status)`	The current Aploze Event in the player has changed (prelive, live, replay)
`player.add_to_cart`	`(product, callback)`	User click on the "Add to cart" button. Don't forget to return the callback
`player.go_to_cart`		User click on the "Go to Cart" button
`player.open`		Player is opened
`player.close`		Player is closed
`player.reduce`		Player is reduced
`player.expand`		Player is expanded
`player.drag`		Reduced Player is dragged
`player.dragstart`		Reduced Player has started to by dragged
`player.dragend`		Reduced Player has finished to by dragged

Troubleshooting

Security Issues with iFrame :

X-Frame-Options = DENY (RFC7034)
Possible solution: Set X-Frame-Options = SAMEORIGIN
Content-Security-Policy: frame-ancestors 'none'; (CSP level 2)
Possible solution: Content-Security-Policy: frame-ancestors 'self';