BookGrail-powered E-commerce
With BookGrail everyone can recommend books via email, Twitter and Facebook, but did you know that you can also embed a BookGrail-powered shopping cart and checkout process on your website… in just three simple steps?

Include the following reference in your webpage header:-
<script type="text/javascript" src=""></script>
Your ‘Add to Basket’ button will need to include a few BookGrail specific data attributes.
Firstly, there are two attributes that must be included on your button:
  • data-cart – add with the ISBN of the book as its value
  • data-cart – open with the name of your container for your shopping cart as its value
Heres a complete list of parameters you can use to further customise your BookGrail shopping cart:
  • data-price – takes an ISBN as its value and makes a call to BookGrail to populate the price
  • data-cart-add – takes an ISBN as its value, adds the book to the user’s shopping basket and displays an appropriate alert message
  • data-cart-open – inserts an iframe containing the BookGrail cart into the container denoted by the attribute’s value
  • data-cart-close – removes the iframe from the container denoted by the attribute’s value
  • data-theme-color – used along with the data-cart-open attribute to set the cart button background colours using this attribute value
  • data-book-message – used along with the data-cart-open attribute to display a html entry under each book title

Add a call to initialise the BookGrail connection in your webpage footer.
<script type="text/javascript">
BG.init('<Enter your BookGrail referrer key here>');
You can find your BookGrail referrer key by clicking on a book in Bookgrail, selecting Recommend and navigating to the Html tab.
You’ll see a URL:
Your referrer key is the string in bold.

Putting it all together, here’s a bare-bones demo that links to London publisher Head of Zeus’s BookGrail Account. Publishers are also able to set discount coupons, as Head of Zeus have done here:
<!doctype html>

		<meta charset="UTF-8">
		<title>BookGrail Shopping Cart Demo</title>
		<script src=""></script>
		<script type="text/javascript" src=""></script>

		<p>Price for The Thorn Birds: <strong data-price="9781781852514"></strong> <button data-cart-add="9781781852514" data-cart-open="#mycart" data-theme-color="#f26788" data-book-message="<small><i>Enter code OWL33 at checkout and save 33%</i></small>">Add to basket</button></p>
		<button data-cart-close="#mycart">Close Cart</button>
		<div id="mycart"></div>
	<script type="text/javascript">
Coming soon: a WordPress plugin to do the same.

2 thoughts on “BookGrail-powered E-commerce”

    Profile Photo

    bookgrail 2 years, 6 months ago / •

    Hi Julie, We're pleased to announce that our Wordpress plugin is now available:

    Profile Photo

    Julie Willis 3 years ago / •

    Is the Wordpress plug in available yet please?

    Leave a Reply