Widget Examples
Each example is a real, working page. The markup is here; the link opens the page so you can press the button and see the actual checkout.
Each example is its own page, because that is how a real
book page looks. If you do want two books on one page — a series page, a
bundle beside its parts — put one script tag per book, each with its own
data-product-id and its own data-buttons-target.
Every tag draws, labels and opens only its own buttons; the second tag's
elements carry a -2 suffix on their ids (#bfs-buy-2)
so nothing collides with the first.
1. The default
Buttons where you put the element, and a modal that fades in at the centre.
<div id="buy"></div>
<script src="https://staswbf.bookfunnel.com/js/bfsales.js"
data-product-id="YOUR-PRODUCT-ID"
data-buttons-target="#buy"></script>2. One book, no cart
data-cart="off" leaves a single buy button, for a page that
sells one title.
<script … data-cart="off"></script>3. Your own button
Ours disappears entirely and the widget binds to yours, so the button is styled by your stylesheet and nothing of ours leaks in.
<button id="buy" class="your-own-class">Buy this book</button>
<script … data-checkout-trigger="#buy"></script>4. The checkout arrives from a direction
data-modal-style changes how the checkout enters. Nine values;
the full list is on Widget on Your Own Website.
<script … data-modal-style="slide-from-right"></script>Slides in from the right Edge-docked drawer
5. Your colour
data-accent-color sets focus rings and links inside the
checkout. It does not restyle the whole thing — the checkout stays legible
whatever you pass.
<script … data-accent-color="#2c6e49"></script>6. With a coupon
A prefilled code with the discount beside it. Use
data-show-coupon for an empty field the reader types into.
<script … data-coupon="LAUNCH20"></script>More
The mock pages exercise one widget behaviour each, unstyled, and the demo site is a whole author website with it fitted.