Installation

Campaign Cart JS SDK can be installed in multiple ways to fit your development workflow. Choose the method that works best for your project.

Quick Installation

The fastest way to get started is with our CDN:

Get Your API Key

Go to Next Commerce Dashboard, open the Campaigns app, select your campaign, click on Integration, and copy your API key.

Add SDK Script

Add these two lines to your HTML <head> section:

<!-- Campaign Cart Configuration -->
<meta name="next-api-key" content="your-api-key-here">

<!-- Campaign Cart SDK -->
<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>

Start Building

You can now use Campaign Cart attributes in your HTML!

Installation Methods

<!-- Campaign Cart SDK -->
<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>

<!-- With integrity check (recommended for production) -->
<script
src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js"
type="module"
integrity="sha384-..."
crossorigin="anonymous">
</script>

# Install via npm
npm install @campaigncart/js-sdk

# Install via yarn
yarn add @campaigncart/js-sdk

# Install via pnpm
pnpm add @campaigncart/js-sdk

Then import in your JavaScript:

// ES6 import
import CampaignCart from '@campaigncart/js-sdk';

// Initialize with your API key
CampaignCart.init({
apiKey: 'your-api-key-here'
});

// CommonJS require
const CampaignCart = require('@campaigncart/js-sdk');

# Download the SDK
curl -o campaign-cart.js https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js

# Host on your server
<script src="/js/campaign-cart.js"></script>

// Install via WordPress admin
1. Go to Plugins > Add New
2. Search for "Campaign Cart"
3. Install and activate

// Or upload manually
1. Download from wordpress.org/plugins/campaign-cart
2. Upload to /wp-content/plugins/
3. Activate in WordPress admin

Configuration Options

Meta Tag Configuration

Configure the SDK using meta tags in your HTML head:

<!-- Required: Your API key -->
<meta name="next-api-key" content="your-api-key">

<!-- Optional: Page type for analytics -->
<meta name="next-page-type" content="product">

<!-- Optional: Enable debug mode -->
<meta name="next-debug" content="true">

<!-- Optional: Custom domain for API calls -->
<meta name="next-api-domain" content="api.yoursite.com">

<!-- Optional: Currency override -->
<meta name="next-currency" content="EUR">

<!-- Optional: Language/locale -->
<meta name="next-locale" content="en-US">

JavaScript Configuration

For more advanced configuration, use JavaScript:

// Configure before SDK loads
window.nextConfig = {
apiKey: 'your-api-key',
debug: true,
currency: 'USD',
locale: 'en-US',
apiDomain: 'api.yoursite.com',
features: {
  analytics: true,
  upsells: true,
  exitIntent: false
}
};

// Or configure after initialization
document.addEventListener('next:initialized', function() {
next.configure({
  debug: false,
  autoTrack: true
});
});

Environment Setup

Development Environment

<!-- Development with debug enabled -->
<meta name="next-api-key" content="dev_your-api-key">
<meta name="next-debug" content="true">
<meta name="next-env" content="development">

<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>

Production Environment

<!-- Production with specific version -->
<meta name="next-api-key" content="live_your-api-key">
<meta name="next-env" content="production">

<script
src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js"
type="module">
</script>

Staging Environment

<!-- Staging environment -->
<meta name="next-api-key" content="staging_your-api-key">
<meta name="next-debug" content="true">
<meta name="next-env" content="staging">

<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>

Verification

Check Installation

Verify the SDK loaded correctly:

// Open browser console and run:
console.log(window.next ? 'SDK Loaded' : 'SDK Not Found');

// Check SDK version
if (window.next) {
console.log('SDK Version:', next.version);
}

// Check configuration
if (window.next) {
console.log('Config:', next.getConfig());
}

Debug Mode

Enable debug mode to see detailed logs:

<!-- Enable via meta tag -->
<meta name="next-debug" content="true">

<!-- Or enable via JavaScript -->
<script>
window.nextConfig = { debug: true };
</script>

<!-- Or enable after load -->
<script>
document.addEventListener('next:initialized', function() {
  next.enableDebug();
});
</script>

Troubleshooting

Common Issues

SDK Not Loading

Check for JavaScript errors in console
Verify API key is correct
Ensure script URL is accessible

Attributes Not Working

Confirm SDK has initialized (next:initialized event)
Check element has correct data-next-* attributes
Verify package IDs exist in your campaign

Performance Issues

Load SDK asynchronously with async attribute
Consider loading SDK after critical page content
Use specific version URLs for better caching

Getting Help

Documentation

Browse our complete guides and API reference. View Docs →

Support

Contact our support team for help. Get Support →

Community

Join our Discord community. Join Discord →

Examples

See working examples and templates. View Examples →

Next: Create your first product page →