BigCommerce

Add elNudge to your BigCommerce store via Script Manager — covers all pages, cart events, and the order confirmation template.

elNudge integrates with BigCommerce through the built-in Script Manager — no theme file editing required for the base install. Cart and purchase events are wired into your Stencil theme's JavaScript.

1. Add the script via Script Manager

Script Manager lets you inject code snippets onto storefront pages without modifying theme files directly.

1. In your BigCommerce control panel, go to Storefront → Script Manager.
2. Click Create a Script.
3. Fill in the fields:

   Field	Value
   Name	elNudge SDK
   Description	AI sales nudge tracking
   Location on page	Head
   Select pages where script will be added	All Pages
   Script type	Script

4. Paste the following into the Script contents box:

   <script>
     (function(w,d,s,k){
       w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
       var t=d.createElement(s);t.async=1;
       t.src='https://cdn.elnudge.com/v1/sdk.js';
       t.setAttribute('data-site-key',k);
       d.head.appendChild(t);
     })(window,document,'script','sk_live_YOUR_SITE_KEY');
   </script>

5. Click Save.

Replace sk_live_YOUR_SITE_KEY with your key from app.elnudge.com → your site → Install.

The script will appear on all storefront pages immediately after saving. No theme republish is required.

2. Fire CART_ADD events (Stencil themes)

BigCommerce Stencil themes handle cart additions through an AJAX request to the Cart API. You can hook into this in your theme's JavaScript to fire the elNudge event.

Using the Stencil add-to-cart callback

In most Stencil themes, the add-to-cart action is handled in assets/js/theme/product.js (or a page-specific file). After the cart request resolves, add:

// Inside your theme's add-to-cart handler, after the cart API call succeeds
$.ajax({
  url: '/api/storefront/cart',
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  success: function (cart) {
    var lastItem = cart[0].lineItems.physicalItems.slice(-1)[0];
    if (window.__eln && lastItem) {
      window.__eln('track', 'CART_ADD', {
        product_id:   String(lastItem.productId),
        product_name: lastItem.name,
        variant:      lastItem.variantId ? String(lastItem.variantId) : '',
        price:        lastItem.salePrice.toFixed(2),
        currency:     cart[0].currency.code,
        quantity:     lastItem.quantity,
      });
    }
  },
});

Using the Storefront Cart API directly

If your theme uses the Storefront REST API, you can fire the event as part of the POST to /api/storefront/carts/{cartId}/items:

fetch('/api/storefront/carts/' + cartId + '/items', {
  method: 'POST',
  credentials: 'same-origin',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ lineItems: [{ productId, variantId, quantity }] }),
})
  .then((res) => res.json())
  .then((data) => {
    var added = data.lineItems.physicalItems.slice(-1)[0];
    if (window.__eln && added) {
      window.__eln('track', 'CART_ADD', {
        product_id:   String(productId),
        product_name: added.name,
        variant:      String(variantId),
        price:        added.salePrice.toFixed(2),
        currency:     data.currency.code,
        quantity:     quantity,
      });
    }
  });

3. Fire the PURCHASE event on the order confirmation page

BigCommerce has a dedicated order confirmation (thank-you) page. In Stencil, this is controlled by the order-confirmation.html template.

Via Script Manager (recommended)

1. Go back to Storefront → Script Manager → Create a Script.
2. Set Select pages where script will be added to Order Confirmation.
3. Set Location on page to Footer.
4. Paste:

   <script>
     if (window.__eln) {
       window.__eln('track', 'PURCHASE', {
         order_value: '{{checkout.order.grandTotal.value}}',
         currency:    '{{checkout.order.currency.code}}',
         item_count:  {{checkout.order.lineItems.physicalItems.length}},
       });
     }
   </script>

   BigCommerce injects the checkout object on the order confirmation page, so the Handlebars expressions above resolve to the correct values at render time.

Via Stencil template (alternative)

If you manage your theme locally with the Stencil CLI, open templates/pages/order-confirmation.html and add the following above {{/partial}}:

<script>
  {{#if checkout.order}}
  if (window.__eln) {
    window.__eln('track', 'PURCHASE', {
      order_value: '{{checkout.order.grandTotal.value}}',
      currency:    '{{checkout.order.currency.code}}',
      item_count:  {{checkout.order.lineItems.physicalItems.length}},
    });
  }
  {{/if}}
</script>

Quiet zones

Suppress nudges on pages where they are not appropriate (account pages, legal pages, etc.):

In your Script Manager snippet, add the data-quiet-zones attribute:

<script>
  (function(w,d,s,k,q){
    w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
    var t=d.createElement(s);t.async=1;
    t.src='https://cdn.elnudge.com/v1/sdk.js';
    t.setAttribute('data-site-key',k);
    t.setAttribute('data-quiet-zones',q);
    d.head.appendChild(t);
  })(window,document,'script','sk_live_YOUR_SITE_KEY','/account,/account/*,/login,/create-account');
</script>

You can also manage quiet zones from app.elnudge.com → your site → Engagement Rules → Quiet Zones.

Verify the install

1. Open your storefront in a browser with the console visible.
2. Run in the console:

   typeof window.__eln === 'function' // should return true

3. Add a product to your cart and check for a CART_ADD log (temporarily add data-debug="true" to the script tag to enable verbose logging).
4. Complete a test order using BigCommerce's test payment gateway and confirm the PURCHASE event fires on the order confirmation page.
5. In app.elnudge.com → your site → Live, your session should appear within seconds of loading the storefront.