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 Cleverbridgeloading 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 JavaScriptlibrary 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 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 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 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 customer's browser. This can happen if the customer refreshed your web page after the frame was already displayed. You can use this event to automatically load the frame again, or you can wait until the customer clicks the action button again.
purchasecomplete The customer completed the purchase and now sees the confirmation pageClosed The 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 An error occurred. You can print eventData to save 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 ...');
});

Your JavaScript library contains the following functions that you can call directly from JavaScript code. These functions allow you to build custom integrations with our checkout:

Event Name Parameters Description
Cleverbridge.init myDivId, options Define the designated area where your iframe will be located and initialize the library with your options.
Cleverbridge.buildIframe Checkout link Builds an iframe and appends it to the Div tag you specifies in the init function.
Cleverbridge.updateSession Checkout link Updates the session with the data from the checkout link that you pass to the new product ID in the link, quantity change, or another relevant aspect.
Cleverbridge.handleCTAClick Checkout link Allows you to specify whether to build a new iframe or update the current session. This is the recommended function to use if the user clicks a Buy Now button.
Cleverbridge.refreshIframe None Reloads the current page in the iframe.
Cleverbridge.getPurchaseId None Gets the purchase ID of the current session in the iframe.
Cleverbridge.getSessionId None Gets the ID of the current session in the iframe.
Cleverbridge.getFrameSrc None Gets the frame source of the current session in the iframe.
Cleverbridge.getCurrentScope None Gets the scope of the current session in the iframe.
Cleverbridge.getCurrentPage   Get the page of the current session in the iframe, or null if there is no frame generated yet.
Cleverbridge.getIframeElement None Gets a reference to the iframe element, or null if there is no iframe generated yet.
Cleverbridge.isIframeLoaded None Returns true if the iframe element is appended to your page, false if not.

Developer Use Cases

Inject late binding, like the following example, 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.

<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-upcheckout 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 your thank you page link 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 to consider in case 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 pageClosed The 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 make sure 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, avoid showing your own legal terms close to the frame. For example, you could place 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.