Coupon Click Event

This guide provides instructions on how to integrate the coupon popup provided by Shoplive with your coupon system.

LINK / LINK (New window)

How to integrate a coupon when the coupon click event is set to Link or Link (New window).

messageCallback

The messageCallback is called when a coupon is clicked. This allows you to define custom actions for each event.

Payload object

Sample code

If you want to navigate to a page after adding parameters to the link URL when you click a coupon in the player, you can define LINK or LINK_NEW_WINDOW as shown below.

To open a page in the current window, use location.href.

LINK: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
	location.href = url;
  const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //Removing coupon
}

To open a page in a new window, use window.open.

LINK_NEW_WINDOW: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
	window.open(url);
	const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //Removing coupon
}

Download coupon

How to integrate a coupon when the coupon click event is set to Download coupon.

messageCallback

The messageCallback is called when a coupon is clicked. This allows you to define custom actions for each event.

Payload object

Sample code

To process coupon download by calling the customer server API when a coupon is clicked in the player, you can define DOWNLOAD_COUPON as follows.

You can process coupon download by calling the customer server API with fetch, and manipulate the coupon UI (hide/show/blur) depending on the processing result.

DOWNLOAD_COUPON: function(payload) {
  console.log('User clicks coupon. coupon code : ' + payload.coupon);

  // API server for issuing coupons is directly operated 
  if('YOUR_COUPON_API') {    
     fetch('YOUR_COUPON_API')
    .then(res => res.json())
    .then(res => {
      // The coupon download processing result is returned in success.
      if (res.success) {
        alert("Coupon download completed");
      } else {
        alert("Coupons are no longer available more");
      }
    });
  }
  // If there is no API server, move to the coupon issuance page.
  else {
    location.href = 'https://YOUR_COUPON_DOWNLOAD_PAGE/' + payload.coupon
  }
}

User define

How to integrate a coupon when the coupon click event is set to User define.

You can define the information in JSON format and add it to the payload object.

messageCallback

The messageCallback is called when a coupon is clicked. This allows you to define custom actions for each event.

Payload Object

The payload object of the CUSTOM_ACTION event includes the payload object that the user defines in the coupon edit window.

Sample code

Upon clicking a coupon in the player, a CUSTOM_ACTION can be defined using a custom payload object as follows.

This is an example of how to manually handle the event using the custom payload object when the CUSTOM_ACTION event occurs. The custom payload object is defined in the pop-up edit window as {"coupon": "12341234", "url": "https://shoplive.cloud/sample_coupon"}.

Basic

CUSTOM_ACTION: function (payload) {
	// customPayload is object of customized payload
  var customPayload = payload.payload;

  window.open(customPayload.url);  // Open link with new window
  alert(customPayload.coupon + " coupon!");  // Coupon code alert
  const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //Dismiss coupon
}

If you need a coupon copy function to the clipboard, you can define DOWNLOAD_COUPON as shown in the sample below.

Copy coupon code to clipboard

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  // GLOBAL MessageCallback FUNCTION
  var messageCallback = { 
    DOWNLOAD_COUPON: function(payload) {
      // get Current Player
      var player = cloud.shoplive.getPlayer();
      // if, ONAIR player
      if(player.campaignStatus === 'ONAIR' && player.campaignKey === payload.campaignKey) { 
         // copy to clipboard
         var textarea = document.createElement("textarea");
         document.body.appendChild(textarea);
         textarea.value = payload.coupon;
         textarea.select();
         document.execCommand("copy");
         document.body.removeChild(textarea);
         // Show Dialog
         player.sendMessage('showDialog', {title: 'Copy to clipboard completed.', message: payload.coupon });
      }
    }
  }
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });
</script>