ORDER BUMP SCRIPT โ€” CDN READY

More sales at checkout.
One script. Zero friction.

Drop a <script> tag and an HTML block into your checkout. The script injects package cards, images, animations and A/B test automatically.

View Live Demo โ†“How to Install โ†’

Everything included in the file

๐Ÿ“ฆ
Embedded Images
All 3 packages (2, 3 and 6 bottles) in base64 inside the .js. No extra requests.
๐ŸŽจ
Native A/B Test
Automatically randomizes light or dark theme. Persists in sessionStorage. Trackable via vc:rendered event.
โœจ
Animations & Hover
Fade-up on entry, pulse on featured card, lift + golden glow on hover. All pure CSS.
๐Ÿ“ฑ
Mobile-First
Responsive layout: 3 columns on desktop, single column on mobile with best package on top.
๐Ÿ”’
Zero Dependencies
No external libraries. A single ~1.3 MB .js file with everything included.
โšก
Plug & Play
Only swap the href links. Titles, prices and texts configurable via data-* attributes.

Live Demo

Exactly as it appears on the checkout. Switch between A/B test variants.

Install in 2 steps

No npm, no build, no dependencies. Works on any checkout platform.

1
Add the script to <head> or before </body>
<script src="https://d2xsxph8kpxj0f.cloudfront.net/310419663028428251/UBvV5wJZ8ZDuFe37KDNuE3/vitacept-bump_1b806785.js" defer></script>
2
Paste the container where you want the bump โ€” only swap the links
<!-- 1. Load the script (once per page) -->
<script src="https://d2xsxph8kpxj0f.cloudfront.net/310419663028428251/UBvV5wJZ8ZDuFe37KDNuE3/vitacept-bump_1b806785.js" defer></script>

<!-- 2. Paste where you want the order bump -->
<section class="vc-bump"
  data-title="Choose Your Vitacept Package"
  data-subtitle="Select the best value and save more">

  <!-- 2 Bottles โ€“ Try Two (left) -->
  <a class="vc-offer"
    href="YOUR_CHECKOUT_LINK_2"
    data-offer="basic"
    data-headline="Try Two"
    data-description="60 Days, 2 Bottles"
    data-bottles="2" data-guarantee="60"
    data-total="158" data-full="358"
    data-shipping="9.99" data-value-round="yes"
    data-button-text="BUY NOW"
    data-aux="Basic Offer">
  </a>

  <!-- 6 Bottles โ€“ Best Value (center) -->
  <a class="vc-offer"
    href="YOUR_CHECKOUT_LINK_6"
    data-offer="promo"
    data-headline="Best Value!"
    data-description="180 Days, 6 Bottles"
    data-bottles="6" data-guarantee="60"
    data-total="294" data-full="1074"
    data-shipping="Free" data-value-round="yes"
    data-button-text="BUY NOW"
    data-aux="Best Offer!">
  </a>

  <!-- 3 Bottles โ€“ Good Value (right) -->
  <a class="vc-offer"
    href="YOUR_CHECKOUT_LINK_3"
    data-offer="mid"
    data-headline="Good Value"
    data-description="90 Days, 3 Bottles"
    data-bottles="3" data-guarantee="60"
    data-total="207" data-full="537"
    data-shipping="Free" data-value-round="yes"
    data-button-text="BUY NOW"
    data-aux="Good Offer!">
  </a>

</section>
๐Ÿงช Track A/B variant (optional)
<script>
  document.addEventListener('vc:rendered', function(e) {
    // e.detail.variant === 'A' or 'B'
    console.log('Variant displayed:', e.detail.variant);
    // gtag('event', 'order_bump_variant', { variant: e.detail.variant });
  });
</script>

Available attributes

AttributeDescriptionExample
hrefCheckout link for the packagehttps://...
data-offerType: promo (featured), mid, basicpromo
data-headlineCard titleBest Value!
data-descriptionCard subtitle180 Days, 6 Bottles
data-bottlesNumber of bottles (2, 3 or 6)6
data-guaranteeGuarantee days60
data-totalTotal package price294
data-fullOriginal price (strikethrough)1074
data-shippingShipping: Free or numeric valueFree
data-value-roundRound price per bottle (yes/no)yes
data-button-textButton textBUY NOW
data-auxAuxiliary text below buttonBest Offer!
data-ab-variantForce variant A or B (on container)A