Skip to main content

Methods

Caast Library expose some methods to allow you to perform operations on your site. Those methods are described here. We assume that you are implementing those methods after Caast Library emitted the caast.onLoaded event on the DOM.

document.addEventListener('caast.onLoaded', function (e) {
  // Start adding methods here, calling the caast instance
});

Note that this event can be emitted twice, Caast library will previously check if something has to be displayed on a page. If nothing is configurated to be displayed, you wont receive ddata from Caast and Caast will not trigger this event two times. On the other hand, if Caast is configurated to send data to a specific page, Caast library will load the main library in order to display lives. Once this is done you will receive this event a second time. To be sure to distinguish thoses events, you can check if the response contain preload: true, an example is shown below.

document.addEventListener('caast.onLoaded', function (e) {
  // Start adding methods here, calling the caast instance
  if (e.detail.preload) {
    // You cannot call methods labeled with [main library only]
    console.log('Caast preload script');
  } else {
    // You can call any method
    console.log('Caast main script');
  }
});
info

In order to be as light as possible, the preload script does not contain some functions, those functions are labeled with the [main library only] attribute.

infos​

Caast expose a rather useful method in order to easily check, wich version of Caast Library you are running on. Run it and you will receive an object indicating the version you are running but also the actual environnement.

caast.infos();

isInIframe​

When using the Picture In Picture (PiP) Caast will build and iframe of your current page, over your content. It can be quite usefull to check the current context in order to apply some custom logic on your side.

The caast.isInIframe method return a boolean.

caast.isInIframe();

canLoad​

Caast expose a canLoad method in order easily check if caast is supposed to display something on the current page. This function can be usefull if you decide to manually trigger Caast, by default this function is the first call in Caast instanciation flow, if this function return true, then you can load your contents manually. Note that this function can return false if Caast already displayed something on the page.

caast.canLoad();

kill​

Caast expose a kill method in order easily kill Caast if you need it. Note that this method will totally remove Caast from the DOM and the window object, so you will need to load the library again if this function is executed.

caast.kill();

cookiesAccepted​

In order to be compliant with GDPR restrictions, you may want to ask consent from your user before Caast place a cookie on your website. Once a user has accepted your Cookies policies, you just have to call caast.cookiesAccepted in order to allow Caast to place a cookie, you can find more details about it here.

The caast.cookiesAccepted method return a promise.

caast.cookiesAccepted().then(function () {
  console.log('Caast just place a cookie on your website !');
});

cookiesRejected​

In order to be compliant with GDPR restrictions, you may want to be able to update Caast behaviour if cookie deposit is now revoked. Once a user has updated your Cookies policies, you just have to call caast.cookiesRejected in order to tell Caast to remove the inplace cookie and prevent further cookie deposit until user preference has changed. You can find more details about it here.

The caast.cookiesRejected method return a promise.

caast.cookiesRejected().then(function () {
  console.log('Caast has deleted its cookie on your website !');
});

player​

If you have custom interactions on your website, you may want to be able to control the current instance of the Caast player

The caast.player method return a promise.

caast.player().then(function (instance) {
  const player = instance();

  /**
   * Pause player
   **/
  player.pause();

  /**
   * Play player
   **/
  player.play();

  /**
   * Return total duration of current player
   * This methods will return Infinite during a live
   **/
  player.getDuration();

  /**
   * Return current time of the player
   * This methods will return Infinite during a live
   **/
  player.getCurrentTime().then((time) => {
    console.log('currentTime', time);
  });

  /**
   * Set current time of the player
   * time params expect a number
   **/
  player.setCurrentTime(time).then((success) => {});

  /**
   *  Set current volume of the player
   * volume params can be => 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1
   **/
  player.setVolume(volume).then(() => {});

  /**
   *  Return current muted state of the player as a boolean
   **/
  player.muted();

  /**
   * Return current paused state of the player as a boolean
   **/
  player.paused();

  /**
   * Return current state of the player as a promise
   **/
  player.isPaused().then((paused) => {
    if (paused) {
      // do something if paused
    }
  });
});

on​

Caast Library will emit events accross different lifecycle of the application. Those events will allow you to retrieve lots of usefull informations in order to push events into your analytics, CRM, custom tracking events or eventually build your own logic.

The Caast on method receive two parameters, the first one is a string refering to an available event, and the second parameter is a function receiving data as a parameter. The on method will then return a promise.

info

Note that the returned data will merge global Caast configuration and specific data regarding the called event. More informations on the events section.

// Basic - Listen to events when a user submit a message in chat
caast.on('onMessageSubmit', function (response) {
  console.log('your custom function receiving response', response);
});

// Advanced - Listen to events when a user submit a message in chat but check if promise is resolved or rejected.
caast
  .on('onMessageSubmit', function (response) {
    console.log('your custom function receiving response', response);
  })
  .then(function (status) {
    console.log('onMessageSubmit::subscribed', status);
  })
  .catch(function (error) {
    console.log('onMessageSubmit::error', error);
  });

off​

To stop listening to an event, simply call the caast.off method on one of the available events. To implement it simply call the method when Caast is ready. It is best to assume you've start listening to an event before shutting it, but Caast Library will raise no error if you call caast.off on a non-listened event.

// Stop listening to events when a user submit a message in chat
caast.off('onMessageSubmit');

open​

You may want to manually trigger the modal for a live which may not be loaded on the current page. This function allow you to pass a live uid as a parameter and will then open the Caast modal (how to get my live UID).

caast.open('f20aa128931a449b9478f5fb69e07c3b');

This method also gives you the possibility to trigger the Caast Modal by passing a product reference instead of a live UID.

caast.open({ type: 'product', id: 'PID_3U975987' });
info

When opening Caast via a product ID, we will automatically jump to the proper timestamp when the product is displayed. Note that this product must have a matching presentation time defined in our administration interface.

parse​

This method is part of the initial loading of Caast

Caast has what we call a preload function, which will seek in our database if a content must be displayed on a page, if not, Caast main library is not loaded. You may encounter a perticular case where you want to render on your side the display of a bunch of lives but also want to trigger the Caast modal on click. Rather than adding caast.open on each of your element, you can call the parse function which will toggle Caast on specifics elements.

This function will seek elements containing the [data-caast-open] attribute, you must also add the [data-caast-id] attribute which will contain the live uid you want to trigger (how to get my live UID).

This method also work if you want to trigger a content based on a product ref/sku, you must add the [data-caast-pid] attribute which will contain the product ref/sku.

If your element is clicked Caast will add the [data-caast-loading]=true attribute while the modal content is loading, it can allow you to display a visual feedback while the content is being fetched.

Note that the Caast boot method will try to automaticaly execute this function.

<!-- We assume that you have already included Caast -->

<div class="my-product">
  <strong>Product 1</strong>
  <button data-caast-open data-caast-id="f20aa128931a449b9478f5fb69e07c3b">View the live !</button>
</div>

<div class="my-product">
  <strong>Product 2</strong>
</div>

<div class="my-product">
  <strong>Product 3</strong>
  <button data-caast-open data-caast-pid="SKU_893794">View the live !</button>
</div>

render​

You may want to manually render the Caast DOM. Our common way to display Caast, is to parse the current url and check on our APIs if something need to be displayed on this particular page. Nevertheless you may want to have a full control of this aspect. The caast.render method is there for you.

Please refer to this documentation because this method need previous configuration.

The render method accepts different parameters, details are presented here:

PropertyTypeDescription
targetstring | objectThe target where the Caast DOM will be injected. you can provide a string that will be used as a querySelector value or an advanced object described below. If nothing is provided Caast will render the DOM in the target defined in configuration
queryobjectAn object of values described below, that can be used to perform the Caast query instead of the current url value. If empty, Caast will be based upon current URL

target​

The target property can either be a string representing a querySelector value, or an advanced object described below

PropertyTypeDescription
desktopstring| objectThe target where the Caast DOM for desktop experience will be injected. You can provide a string that will be used as a querySelector value or an advanced target object, please refer to this documentation
mobilestring| objectThe target where the Caast DOM for mobile experience will be injected. You can provide a string that will be used as a querySelector value or an advanced target object, please refer to this documentation
caast.render({ target: '#my-target' });
caast.render({
  target: {
    desktop: {
      element: '#my-target-desktop',
      position: 'afterbegin',
    },
    mobile: {
      element: '#my-target-mobile',
      position: 'afterbegin',
    },
  },
});
caast.render({
  target: { desktop: '#my-target-desktop', mobile: '#my-target-mobile' },
});

query​

PropertyTypeDescription
product_idstringThe product SKU that is matching the ref field in our database
seller_idstringThe seller UID that is matching the external id in our database
caast.render({ query: { product_id: 'SKU_765KJHKJ' } });
caast.render({ query: { seller_id: '98279574' } });
caast.render({ query: { product_id: 'SKU_765KJHKJ', seller_id: '98279574' } });
info

You can also totally omit the query options, and rely on the settings you've defined previously via the advanced setup. If nothing is provided, the render method will seek for contents matching the current url.

setUser​

You may want to add additionnal informations to your Caast Library user object, it can be useful when interacting with Caast statistics to identify your own user database. To implement custom data the caast.setUser method is available on the Caast instance. Adding informations will alter the user data on returned informations. To see what data looks like, please refer to user data informations.

caast.setUser({
  email: 'd.copperfield@abracadabra.io',
  first_name: 'David',
  last_name: 'Copperfield',
});

reboot [main library only]​

Caast expose a reboot method in order easily rebuild Caast if you need it. This method can only be call if Caast has displayed content on first boot

caast.reboot();