The TackQuote Embed Widget

The widget is a self-contained script (no dependencies, under 8 KB minified). Once loaded on a product page, it:

• Injects an "Add to Quote" button next to your existing add-to-cart button.
• Auto-detects product name, SKU, price, and quantity from the page.
• Shows a floating action button with a live item-count badge.
• Opens a slide-out quote cart where shoppers can adjust quantities and remove items (persisted in localStorage).
• Collects Name, Company, and Email, then submits the cart as a draft quote request.

On submit, the widget POSTs the cart and buyer details to POST /v1/widget/quotes. TackQuote creates a draft quote (tagged as a storefront widget request), upserts the buyer, and notifies your sales rep. The shopper sees a confirmation with the new quote number.

1. 1

   Find your tenant ID

   In the seller portal, open Integrations → Embed Widget and copy your Tenant ID — a UUID. The widget will not initialize without it.

2. 2

   Add the script tag before </body>

   Paste this just before the closing </body> tag, replacing the tenant ID and API URL with your own:

   storefront — before </body>

   <script
     src="https://api.yourdomain.com/v1/widget/tack-widget.js"
     data-tenant-id="YOUR_TENANT_ID"
     data-api-url="https://api.yourdomain.com/v1"
     data-primary-color="#0f172a"
     data-button-text="Add to Quote"
   ></script>

3. 3

   Publish & test

   Reload a product page. You should see an Add to Quote button and a floating cart bubble. Add an item, submit the form, and confirm a new draft quote appears in your dashboard.

1. 1

   Open Script Manager

   In your BigCommerce control panel, go to Storefront → Script Manager → Create a Script.

2. 2

   Configure the script

   • Name: TackQuote Quote Widget
   • Location: Footer
   • Select pages: All pages (or Product pages only)
   • Script type: Script
3. 3

   Paste the script tag

   Paste the same <script>tag from the install step and save. The widget auto-detects BigCommerce's add-to-cart button (button.productView-cart-addToCart).

1. 1

   Edit your theme code

   In Shopify admin, go to Online Store → Themes → ⋯ → Edit code and open theme.liquid.

2. 2

   Add the script before </body>

   Paste the <script> tag immediately before the closing </body> tag and save. The widget auto-detects Shopify's add-to-cart button (button[name="add"]).

On a hand-built or headless storefront, add the script tag anywhere before </body>. If the widget can't auto-detect your markup, override the selectors it uses when it initializes:

window.TackWidget.init({
  tenantId: 'YOUR_TENANT_ID',
  apiUrl: 'https://api.yourdomain.com/v1',
  addToCartSelector: '.my-add-to-cart',
  productNameSelector: '.product-title',
  skuSelector: '[data-sku]',
  priceSelector: '.price',
  qtySelector: 'input[name="quantity"]',
})

The widget exposes window.TackWidget for programmatic control: