Cart widget
It is likely your website will include a cart page where the user can navigate to in order to view the cart contents, check the total amount and proceed to checkout. Our Cart widget does exactly that, and its "Proceed to checkout" button will take the user to our hosted WebLink portal to gather user details and complete payment. This is our recommended integration option (see our Checkout section for more information).
Generate widget code
- Follow the same steps for the Catalog example, but select the "Cart" widget in the dropdown
- Click Build and copy the generated snippets
Embed
Following from the previous example, the page with the embedded widget might look like the following:
<html>
<head>
<title>Cart</title>
</head>
<body>
<!-- right-hand side snippet copied from WebLink Builder -->
<div id="weblink-Cart"></div>
</body>
<!-- left-hand side snippet copied from WebLink Builder -->
<link
rel="stylesheet"
href="https://myinstance-portal.administrateweblink.com/static/css/main.css"
/>
<!-- JQuery - you can skip this line if you already have JQuery in your app -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Weblink-->
<script src="https://myinstance-portal.administrateweblink.com/static/js/weblink.bundle.min.js" defer ></script>
<!-- Create Weblink instance and mount widgets-->
<script>
$(function () {
var webLinkConfig = {
portalAddress: 'myinstance-portal.administrateweblink.com',
hashRouting: false,
timezone: 'Europe/London',
};
var webLink = new window.WebLink(webLinkConfig);
webLink.mount(
document.getElementById('weblink-Cart'),
'Cart',
{"showPlacesRemaining": true}
);
})
</script>
</html>