Skip to main content
The Boxpressd Sites SDK allows developers to build custom websites for cigar lounges, brands, and other businesses using real-time data from the Boxpressd platform. Whether you’re a Boxpressd partner agency, an in-house developer, or a third-party contractor, this guide will walk you through installing the SDK, connecting it to a business account, and displaying your first Boxpressd data.

​
Prerequisites

Before you begin, you’ll need:
  • Node.js 18+ (recommended)
  • React 18+ or Next.js 14+
  • Access to a Boxpressd business account
  • A Boxpressd Sites SDK API Key

​
Obtaining an API Key

API keys are issued through the Boxpressd platform:
  • Boxpressd staff can generate API keys through the Boxpressd administration panel.
  • Business owners and managers can generate API keys through the Business Manager portal and provide them to their development team.
  • Agencies and third-party developers should request an API key from the business they are building for.
Your API key determines which business data the SDK can access and automatically resolves the associated venue or brand context.

​
Install the SDK

The Boxpressd Sites SDK is currently distributed through GitHub Packages. Configure GitHub Packages access using your GitHub Personal Access Token and install the SDK: 
npm install @boxpressd/sites-sdk
If you have not previously configured GitHub Packages, see the installation guide for setting up authentication in your project’s .npmrc.

​
Configure the Provider

Wrap your application with the BoxpressdProvider and provide your API key. 
import { BoxpressdProvider } from "@boxpressd/sites-sdk"

export default function App() {
  return (
    <BoxpressdProvider apiKey={process.env.NEXT_PUBLIC_BOXPRESSD_API_KEY!}>
      {/* Your application */}
    </BoxpressdProvider>
  )
}
Store your API key in an environment variable: 
NEXT_PUBLIC_BOXPRESSD_API_KEY=your_api_key

​
Display Your First Data

The SDK includes prebuilt components for events, reviews, maps, ratings, check-ins, and more. Here’s a simple example that displays upcoming events: 
import { BoxpressdEventList } from "@boxpressd/sites-sdk/events"

export default function EventsPage() {
  return (
    <BoxpressdEventList
      status="upcoming"
      limit={5}
    />
  )
}
The SDK will automatically determine which business to load based on the API key provided to the provider.

​
Customize the Theme

The provider supports theme overrides using Boxpressd CSS variables. 
<BoxpressdProvider
  apiKey={process.env.NEXT_PUBLIC_BOXPRESSD_API_KEY!}
  theme={{
    primaryColor: "#8B5E3C",
    borderRadius: "12px",
  }}
>
  {children}
</BoxpressdProvider>
You can also override any --bxp-* CSS variables directly within your application stylesheets.

​
Available Components

The SDK currently includes:
  • Event calendars and event listings
  • Event detail cards
  • Reviews and rating summaries
  • Check-in activity feeds
  • Session activity widgets
  • Interactive maps
  • Strength indicators
  • Badges and UI components
  • Age verification components
Additional business-specific components are continually being added.

​
Next Steps

Now that you’ve connected the SDK:
  1. Configure your site’s theme and branding.
  2. Add event, review, and activity components.
  3. Connect contact forms and marketing tools.
  4. Deploy your website.
Continue with the guides below to learn about business context, theming, available components, and data APIs.
Need help getting an API key or setting up a project?Contact your Boxpressd representative or visit the Boxpressd Help Center for support and implementation guidance.