This guide is for developers applying the integration. You don’t need it to operate the Admin.

Provides a way to build the Shortform playlist yourself.

• Arrange the Shortform list in any order and play it in that order
• You can add items to the playlist even while a Shortform is playing
• A MessageCallback is provided so you can append a new list when the end of the Shortform playlist is reached

Launch a player that plays Shortforms in the order you want

Build a playlist from shortformIds fetched through the Shortform API and play them in order.

Parameters

// Build a playlist from Shortform IDs
var ids = ["ID1", "ID2", "ID3", "ID4", "ID5"];
// Set the startIndex where playback starts
var startIndex = 2;
cloud.shoplive.showShortformPlayerModal( { ids:ids, startIndex:startIndex } );

Add shortforms to play to the feed

Parameters

var ids= ["ID6", "ID7", "ID8"];  
cloud.shoplive.shortformPlayerAppendList( { ids:ids } );

MessageCallback when the end of the playlist is reached

MessageCallback event name: NEEDS_SHORTFORM_LIST_MORE

Payload

var messageCallback = {
  NEEDS_SHORTFORM_LIST_MORE : function(payload) {
    console.log("Reached the last shortform in the player");
    console.log("Full list in the current player feed: ", payload.shortsList)
    console.log("Index of the shortform currently shown: ", payload.index)

    // Append the list to the current feed.
    var ids= ["ID6", "ID7", "ID8"];
    cloud.shoplive.shortformPlayerAppendList( { ids } ); 
  },
}
cloud.shoplive.initShortform( { accessKey: "ACCESS_KEY",  messageCallback: messageCallback } );

Sample code

An example that loads and plays shortformIds using a local service that calls the Shortform API, and appends more shortformIds when the whole list has played

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>

<div id="shoplive-shortform"></div>

<script>
  const ACCESS_KEY = "<YOUR_ACCESS_KEY>";
  let startIndex = 0;

  //Define the callback to run when the last Shortform in the list is reached
  let messageCallback = {
    NEEDS_SHORTFORM_LIST_MORE: async function (payload) {
      console.log("Reached the last shortform in the player");

      //Fetch new shortformIds and append them to the shortform playlist
      const ids = await getShortformId();
      cloud.shoplive.shortformPlayerAppendList({ ids });
    },
  };

  //Shortform init()
  cloud.shoplive.initShortform({
    accessKey: ACCESS_KEY,
    messageCallback: messageCallback,
  });

  //Get ShortformIds through an internal service that uses the Shortform API.
  const getShortformId = (function () {
    let page = 1;
    return function () {
      return fetch(`<API_SERVICE_ADDRESS>?page=${page}`)
        .then((response) => response.json())
        .then((data) => {
          const shortformIds = data.map((e) => String(e.shortformId));
         
        	// Increment page for the next call.
          page++;

          return shortformIds;
        });
    };
  })();

  //After fetching the ids, play from the Shortform at startIndex.
  async function showPlayer() {
    const ids = await getShortformId();
    cloud.shoplive.showShortformPlayerModal({ ids: ids, startIndex: startIndex });
  }

</script>