Quick Start Guide
Get up and running with Whistler Digital in just a few minutes. This guide will walk you through the basic integration steps.
Prerequisites
Before you begin, make sure you have:
- A Whistler Digital account (sign up if you don't have one)
- Your API key from the dashboard
- Access to your website's code
Step 1: Install the JavaScript SDK
Add the Whistler Digital script to your website's head section:
<script src="https://cdn.whistlerdigital.com/sdk/v1/whistler.js"></script>
Step 2: Initialize the SDK
Initialize the SDK with your API key and configuration:
Whistler.init({
apiKey: 'your-api-key-here',
theme: 'light', // or 'dark'
language: 'en',
autoLoad: true
});
Note: Replace your-api-key-here with your actual API key from the dashboard.
Step 3: Display the Consent Widget
The consent widget will automatically appear based on user location and your configuration. You can also trigger it manually:
// Show consent widget
Whistler.showConsentWidget();
// Or show preference center
Whistler.showPreferenceCenter();
Step 4: Handle Consent Events
Listen for consent changes to adjust your application behavior:
Whistler.onConsentChange(function(consent) {
if (consent.marketing) {
// Initialize marketing tools
initMarketingTools();
}
if (consent.analytics) {
// Initialize analytics
initAnalytics();
}
});
Next Steps
Once you've completed these steps, your basic integration is ready. Explore our documentation for advanced features:
Installation Methods
Whistler Digital offers multiple installation options to fit your development workflow.
CDN (Recommended)
The easiest way to get started is using our CDN:
<script src="https://cdn.whistlerdigital.com/sdk/v1/whistler.js"></script>
NPM Package
For projects using a build system, install via npm:
npm install @whistlerdigital/consent-sdk
Then import and initialize in your application:
import Whistler from '@whistlerdigital/consent-sdk';
Whistler.init({
apiKey: 'your-api-key-here'
});
React Component
For React applications, use our dedicated React component:
npm install @whistlerdigital/react-consent
import { ConsentProvider, ConsentWidget } from '@whistlerdigital/react-consent';
function App() {
return (
<ConsentProvider apiKey="your-api-key-here">
<YourApp />
<ConsentWidget />
</ConsentProvider>
);
}