Pop-Up Integration

Pop-up storefronts contain checkout processes, order processes, or other customer self-service features that "pop up" when a customer clicks an action button. They allow you to host your own, integrated cart on your web page, while still utilizing our platform to collect customer payment information and process transactions. They also enable you to present a smooth, minimalistic cleverbridge checkout experience on your website.

How to Integrate

To do so, insert the following snippet into your page header between <head> ... </head>.

<script src="https://static-cf.cleverbridge.com/mycontent/1/cbFrameCheckout-client-v1.05.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // initialize the cleverbridge library with your preferred options
    Cleverbridge.init('body', {
      "debug": true,
      "storeDomain": 'cleverbridge.com',
      "showLoadAnimation": "true",
      "iframe": {
        "mode": "popup",
        "width": "100%",
        "height": "100%"
      }
    });
  });
</script>

You must define values for the following elements in the init function:

Element Description
debug

Set to true to see extra information printed out in the browser developer console. This is useful for troubleshooting issues.
storeDomain hostname.yourdomain.com (This is your cleverbridge shop host.)
showLoadAnimation Set to true to use the cleverbridge loading animation when the iframe loads.
iframe.width

Width of your pop-up. For a perfect fit, leave this at 100%.

iframe.height

Height of your pop-up. For a perfect fit, leave this at 100%.

To do so, complete the following:

  1. Add the following "click event" to your page. This tells the cleverbridge JavaScript library to start loading the checkout form once a customer clicks your action button.

    <button onclick="Cleverbridge.handleCTAClick('https://www.cleverbridge.com/1290/?scope=checkout&cart=220246&cfg=popup_checkout2&x-review=showreview&x-cart=showcart&recommendation=freesupport,addproduct')">Buy Now</button>

  2. Replace the checkout link with your cleverbridge buy links for the products in the cart. If you are interested in trying out the pop-up checkout process with your own checkout link and products, we will first need to create an appropriate design for your shop. For more information, contact Client Experience.

Example

The following is an example of an action button. The text will vary depending on your use case (Buy Now, Proceed to Checkout, Complete Your Purchase, etc.).

Build Your Own Logic

To build your own logic on top of the pop-up solution, take a look at the following:

The cleverbridge pop-up checkout processes and our JavaScript library generate events at certain key moments. The following are the event types that are currently available:

Event Name Description
frameloading The cleverbridge frame element is appended to the wrapper element on your web page, and the content of the frame has started loading.
frameloaded The cleverbridge frame content has finished loading and is ready to be displayed to the customer.
showframe The cleverbridge frame is being shown to the customer.
closeframe The cleverbridge frame is hidden from the customer.
frameunload The cleverbridge frame is starting to load a new page by unloading the correct page. This is where cleverbridge starts showing a loading animation, if you've enabled it.
updatecomplete The cleverbridge frame has updated the current session. This is where cleverbridge removes the loading animation if you've enabled it.
showloadinganimation The loading animation started and is being displayed to the customer.
removeloadinganimation The loading animation is hidden from the customer again.
pageload The cleverbridge frame loaded a new page.
init The cleverbridge frame init function has been completed.
prevsessionfound While loading your web page, our library found some session data in the browser of the customer. This could be because the customer refreshed your web page after the frame was already displayed. You can use this event to automatically load the frame again, or wait until the customer clicks the action button again.
purchasecomplete The customer completed the purchase and sees the confirmation pageClosedThe confirmation page is displayed after a customer makes a purchase. The confirmation page contains the order confirmation and delivery information..
updateReady The current session is updated with new information.
error There was an error. You can print eventData to record the error message on the developer console.

You can overwrite these functions and define what needs to happen when these events occur. To do so, see the following JavaScript syntax:

Cleverbridge.on("eventName", function() {
	// your code here
});

Example

The following is an example overwrite of an event:

Cleverbridge.on("purchasecomplete", function() {
  alert('thanks for your purchase! We are redirecting you to your MyAccount area in 5 seconds ...');
});

Developer Use Cases

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

<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>

Use the following snippet to A/B test the two checkout experiences. You should 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.

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

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

Cleverbridge.on("purchasecomplete", function() {
  location.href('insert the next page url here');
});

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

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');
}

Example

For a working example of a pop-up checkout process, see the Pop-Up Demo Page.

Additional Information

The following is some additional information that you should consider when you decide to use the pop-up integration method:

Best Practices

The following are some best practices when integrating the frame checkout process:

  • Build the frame only after the user has clicked an action button. If you want to build the frame as soon as the visitor lands on your page, for example to improve loading times, contact Client Experience to discuss this.

  • Don't try to include cross-sell/up-sell/promotional banners or/and "Don’t Leave Layers" in the frame. The frame was designed for a quick and simple checkout experience once the customer commits to a purchase. If you want to include these marketing tools on your web page, do so before the frame is loaded.
  • To avoid distracting the customer during the checkout process, we suggest applying discounts before the frame is opened. You can apply a coupon code when opening the checkout by adding &coupon=code to the checkout link.

Note

You should consider the following points before integrating the frame checkout process into your website:

  • cleverbridge always shows the final purchase price inside the frame. This will either occur on the review pageClosedThe review page contains summary information about the purchase a customer is about to make. (in 3-4 step checkouts) or on the checkout page (in configurations without a review page). As a result, you should ensure that the price you display on your web page matches the cleverbridge cart price. You can use our Pricing API to sync the price in your system with the price cleverbridge displays in the checkout process.
  • cleverbridge always confirms the final product selection inside the frame, either on the review page (in 3-4 step checkouts) or on the checkout page itself (in configurations without a review page). As a result, you should make sure that the product(s) in the cleverbridge Buy Now link match the product(s) that you displayed to the customer on your website prior to loading the checkout frame.
  • cleverbridge always displays our terms & conditions and privacy policy in the footer of the frame. To avoid confusing the customer, please avoid showing your own legal terms close to the frame. For example, you could put them in the footer of your website, but you should not display them directly below the frame.
  • You should avoid placing any of your elements on top of the frame (including banners, windows, pop-ups, etc.) while the frame is visible to the customer. Otherwise, you may hide important elements.

Note

Do not trigger the cleverbridge frame for customers using Internet Explorer 8, 9, or 10. These browsers are not supported by cleverbridge due to security concerns.