BookFunnel Sell with BookFunnel

Widget on Your Own Website

One <script> tag on a page you control. No build step, no framework, no npm.

A book page on an author's own website, in the site's serif type and purple accent: the cover of Cog in the Machine, the title and description, three formats (Ebook $3.95, chosen, Audiobook $12.95 and Bundle $14.95), a purple Buy the Ebook button, an Add Ebook to Cart button and the Delivered by BookFunnel mark.
The widget on the demo site. The formats, buttons and cover carousel are drawn by the widget; the page around them, and the colour of the buttons, are the author's.

The Widget Builder

The easiest way to get the tag is to let BookFunnel write it. In your dashboard, open Sell with BookFunnel, then Widget Builder in the Action menu. Choose the product and how the buttons should look, and copy the tag it writes. Paste it into your page where the buttons should go.

Give the widget a name and Save it to keep it. Saved widgets appear on the Sales Channels tab in BookFunnel, where you can copy, view, edit or archive them.

The Widget Builder in the BookFunnel dashboard: the product and the button options on one side, and the script tag it writes, with a Copy button, on the other.
The Widget Builder writes the exact tag for your product.

The rest of this page is for anyone who would rather write the tag by hand, or wants to know what each part does.

Quick start

Put an empty element where the buttons should go, and the script tag anywhere after it.

<div id="buy"></div>

<script src="https://staswbf.bookfunnel.com/js/bfsales.js"
        data-product-id="YOUR-PRODUCT-ID"
        data-buttons-target="#buy"></script>

That renders a "Buy now" and an "Add to Cart" button into #buy, along with the delivered-by-BookFunnel mark. Drop the cart with data-cart="off" if you sell one book at a time.

Leave out data-buttons-target and the buttons appear wherever the script tag itself sits — then the tag really is the only thing you add.

Using your own button

Name it with data-checkout-trigger and the widget renders none of its own — it binds to yours.

<button id="buy">Buy the book</button>

<script src="https://staswbf.bookfunnel.com/js/bfsales.js"
        data-product-id="YOUR-PRODUCT-ID"
        data-checkout-trigger="#buy"></script>

Add data-cart-trigger for your own Add-to-Cart button.

Configuration

All of it is data-* attributes on the script tag.

AttributeWhat it does
data-product-id requiredThe product to sell.
data-buttons-targetWhere the buttons render. Omit and they appear beside the script tag.
data-buttonsnone renders no buttons at all; nothing opens until your code calls window.bfsales.open().
data-cartoff drops Add to Cart, leaving one buy button.
data-checkout-triggerSelector for your own button. Suppresses ours.
data-cart-triggerSelector for your own Add to Cart button.
data-modal-styleHow the cart panel appears. Default appear-center — see below.
data-accent-colorYour brand colour, for focus rings and links. Default #f4663f.
data-couponA coupon code to prefill.
data-show-couponRender the coupon field even when empty.
data-api-baseWhere the checkout is: https://staswbf.bookfunnel.com. Needed only when the script is loaded from another address; the tags on this page include it when it is.
data-badgeoff hides the "Delivered by BookFunnel" mark under this tag's buttons. The mark is drawn once per page whatever you set: with several widgets it sits under the first that BookFunnel delivers, and if you have placed the mark yourself no widget draws it.

How the checkout appears

The buttons and the cart stay on your page. When a reader presses Buy or Checkout, they go to BookFunnel's secure checkout page to pay, the way Shop Pay and Link work. Paying on BookFunnel's own page is what lets a browser remember a reader who saved their details, from one author's site to the next. Your page never sees the address or the card.

The cart panel opens over your page. data-modal-style takes one of:

See them all on the examples page, which runs the real widget rather than showing pictures of it.

After the purchase

Once paid, the reader comes back to your site: to the page they pressed Buy on, or to the return page you set in Settings, under After Checkout. Your page shows the thank-you and the link to the book, as long as it carries this script tag. Without the tag the reader sees your page as it is. The receipt e-mail goes out either way, and the reader can see their orders at https://staswbf.bookfunnel.com/myorders.

The widget also raises a bfsales:purchase event, once per order, with the order number, the amount and the currency. Your ad pixel can report it as a sale. For a Meta Pixel already on the page:

<script>
  window.addEventListener('bfsales:purchase', function (e) {
    fbq('track', 'Purchase', { value: e.detail.value, currency: e.detail.currency });
  });
</script>

Campaign tags on the page the reader first landed on (utm_source, utm_medium, utm_campaign, utm_content, utm_term, and Meta's, Google's, TikTok's and Microsoft's click ids) are remembered for seven days. They travel with the order and show in your Orders tab and its export. Your own scripts never run on the checkout page.

Where the card details go

Straight from the reader's browser to the payment processor, on BookFunnel's checkout page. The card fields are hosted by the processor, not by us and not by you — which is why adding this to your site does not put you inside the scope of card-data handling.

Two things that catch people out