Storefront Frame Use Cases

The following use cases show possible customization in the Cleverbridge embedded and pop-up frame storefront.

Insert dynamic checkout links with late binding

Inject late binding, when your system does not generate static checkout links on page load and instead generates dynamic links after the user has clicked your action button.

📘
This use case is applicable to both embedded and pop-up scenarios of your storefront integration.

<button id="buyNowButton" onclick="buyNowClick(this)" data-provider="cleverbridge" data-productid="1234">Complete your purchase</button>

<script>
  function buyNowClick(button) {
    var provider = button.dataset.provider;
    var product = button.dataset.productid;
    var checkoutUrl = myDynamicLinkGenerator(provider,product); // generate your link here!
    Cleverbridge.handleCTAClick(checkoutUrl);
  }
</script>

Auto-adjust frame height based on frame content

Implement the following snippet to make sure that your Cleverbridge frame is always large enough to show the checkout page without scrollbars.

📘
This use case is applicable only to the embedded scenario of your storefront integration.

Cleverbridge.on("pageload", function() {
  var height = this.getContentHeight();
  Cleverbridge.setHeight(height);
});

A/B test the Cleverbridge embedded frame against the Cleverbridge full-page web experience

Use the following snippet to A/B test the two checkout experiences. Insert both your Cleverbridge frame link (embedded checkout link) and the Cleverbridge full-page link that you want to test it against (web checkout link) into the script.

📘
This use case is applicable only to the embedded scenario of your storefront integration.

<script>
    var split = 0.5;
If(Math.random() >= split) {
        location.href = 'web checkout link';
        //this is your regular shopping link that you use now
    } else {
        Cleverbridge.handleCTAClick('embedded checkout link');
        //this is your new frame link that Cleverbridge will create
        for you
    }
</script>

A/B test the Cleverbridge pop-up frame against the Cleverbridge full-page web experience

Use the following snippet to A/B test the two checkout experiences. Insert both your Cleverbridge frame link (pop-up checkout link) and the Cleverbridge full-page link that you want to test it against (web checkout link) into the script.

📘
This use case is applicable only to the pop-up scenario of your storefront integration.

<script>
    var split = 0.5;
If(Math.random() >= split) {
        location.href = 'web checkout link';  
         //this is your regular shopping link that you use now
    } else {
        Cleverbridge.handleCTAClick('pop-up checkout link');
        //this is your new frame link that Cleverbridge will create
        for you
    }
</script>

Redirect the customer after a successful purchase

Implement the following snippet if you want the customer to instantly be redirected to your next page (my account, activation, thank you page, etc.) after a successful purchase.

📘
This use case is applicable to both embedded and pop-up scenarios of your storefront integration.

Cleverbridge.on("purchasecomplete", function() {
  location.href = 'insert your thank you page link here';
});

Redirect mobile traffic to the regular full-page web experience

Use the following snippet to identify and redirect mobile traffic to a full-page web experience if you want to use a separate design for mobile users.

📘
This use case is applicable to both embedded and pop-up scenarios of your storefront integration.

window.mobilecheck = function() {
  var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip
(hone|od)|iris|kindle|lge|maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker
|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590
|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)
|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-
|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez
([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)
|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq
|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw
|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)
|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran
|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60
|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)
|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)
|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)
|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test
(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

// when the user clicks buy now, route the user to web link if customer is on mobile

if (mobilecheck()) {
  location.href = 'insert mobile friendly link here';
} else { 
  Cleverbridge.handleCTAClick('insert your Cleverbridge frame link here');
}