Call To Action (CTA)

A call to action can be triggered directly from the Smartzer player using a "cta inline" button. This allows the player to then send an "action" to your page for you to handle however you would like. A good example of this is doing an "add to cart" action.

Simple Code (no feedback)

The simplest way to handle a call to action directly from Smartzer's player is as follows:

<script>
  document.addEventListener('smrtzr:broadcast:callToAction', (event) => {
    const cta = event.detail.cta;

    addToCart(cta); // this add to cart function is implemented by you
  });
</script>

Advanced Code (with feedback)

Sometimes a call to action may require some feedback, or might take time to complete. In this instance, you must make sure the inlineAwaitConfirmation parameter is sent on the player url / sdk configuration. Please see here for more information on how to set this up.

  <script>
    document.addEventListener('smrtzr:broadcast:callToAction', (event) => {
      const cta = event.detail.cta;

      const success = addToCart(cta); // this add to cart function is implemented by you

      if (success) {
        document.dispatchEvent(
          new CustomEvent('smrtzr:trigger:callToActionSuccess', {
            detail: event.detail,
          })
        );
      } else {
        document.dispatchEvent(
          new CustomEvent('smrtzr:trigger:callToActionFail', {
            detail: event.detail,
          })
        );
      }
    });
  </script>