Install Swishjam

npm install @swishjam/react

Provider Setup

in your _app.js or top level layout import and setup Swishjam with your API key

_app.js
import { SwishjamProvider } from '@swishjam/react';

export default function App({ Component, pageProps }) {

    return (
        <SwishjamProvider apiKey='swishjam-XXXXX'>
            <Component {...pageProps} />
        </SwishjamProvider>
    )
} 

Update API key

Replace swishjam-XXXXXXXX with your API Key located in your Swishjam settings.

Swishjam supports multiple API keys:

  • Segment & combine data easier
  • Pre-built dashboards

Full Provider Options

<SwishjamProvider
  apiKey='swishjam-xxxxx'
  apiEndpoint={defaults to 'https://api2.swishjam.com/api/v1/capture'}
  maxEventsInMemory={defaults to 20}
  reportingHeartbeatMs={defaults to 10_000}
  disabled={true or false, defaults to false}
  disabledUrls={defaults to ['http://localhost']}    
>
  <YourAppComponent />
</SwishjamProvider>

Component Props

apiKey
string
required

API Key from your Swishjam settings

apiEndpoint
string
default: "https://api2.swishjam.com/api/v1/capture"

URL for the data capture endpoint. Defaults to Swishjam’s cloud solution

maxEventsInMemory
number
default: 20

Determines how many user events we hold in memory before sending them to the data capture endpoint. We also try to dump the data on page leave

reportingHeartbeatMs
number
default: 10000

Frequency we attempt to report data to the capture endpoint

disabled
boolean
default: false

Disabled sending of events to the capture endpoint for testing and various non-production environments

disabledUrls
array
default: "['http://localhost']"

You can specify a list of URLs that we will ignore data from. Defaults to localhost