Configuration for custom playlist

We provide a feature that allows you to create and customize your own Shortform playlist.

• You can arrange the order of items in your Shortform list as desired and play them in that sequence.

• You can also add items to the playlist while Shortform content is playing.

• When the Shortform playlist reaches its end, a MessageCallback is provided to append a new list.

Make a shortform playlist in the custom order

Construct a playlist using the shortformId received through the Shortform API and play them in order. Refer to the following guides for more information.

• Shortform Collection Integration

• Shortform Preview Integration

• Standalone Modal Player

Sample code

// Construct the playlist using the Shortform ID
var ids = ["ID1", "ID2", "ID3", "ID4", "ID5"];
// Set the startIndex where playback begins
var startIndex = 2;
cloud.shoplive.showShortformPlayerModal( { ids:ids, startIndex:startIndex } );

Add the shortform playlist to the feed

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

MessageCallback when the playlist reaches the end

The name of the messageCallback is NEEDS_SHORTFORM_LIST_MORE. Refer to the following guides for more information.

• Shortform - MessageCallback

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

    // Add items to the current feed
    var ids = ["ID6", "ID7", "ID8"];
    cloud.shoplive.shortformPlayerAppendList({ ids }); 
  },
}

cloud.shoplive.initShortform({ accessKey: "ACCESS_KEY", messageCallback: messageCallback });

messageCallback payload

Sample code

An example of using a local service with the Shortform API to load and play  shortformIds , and append additional  shortformIds  once the list is fully 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 be executed when reaching the last shortform in the list
  let messageCallback = {
    NEEDS_SHORTFORM_LIST_MORE: async function (payload) {
      console.log("Reached the last shortform in the shortform player");

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

  // Initialize shortform
  cloud.shoplive.initShortform({
    accessKey: ACCESS_KEY,
    messageCallback: messageCallback,
  });

  // Fetch shortform IDs using an internal service with 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 the page number for subsequent calls
          page++;

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

  // Fetch the list of IDs and play from the startIndex shortform
  async function showPlayer() {
    const ids = await getShortformId();
    cloud.shoplive.showShortformPlayerModal({ ids: ids, startIndex: startIndex });
  }

</script>