Skip to main content

​
BilyProvider Setup

The BilyProvider component initializes Bily tracking in your React application and makes the tracking client available to all child components.

​
Installation

npm install @bilyai/react

​
Basic Setup

Wrap your application with the BilyProvider: 
import { BilyProvider } from '@bilyai/react';

function App() {
  return (
    <BilyProvider 
      domainTracking="your-domain-tracking-id"
      options={{ verbose: true }}
    >
      <YourApp />
    </BilyProvider>
  );
}

​
Configuration Options

The BilyProvider accepts the following props: 
type BilyProviderProps = {
  domainTracking: string;  // Your domain tracking ID
  options?: {
    verbose?: boolean;     // Enable detailed logging
    // ... other options
  };
  children: React.ReactNode;
};

​
Usage with Next.js

For Next.js applications, wrap your _app.js or _app.tsx: 
import { BilyProvider } from '@bilyai/react';

function MyApp({ Component, pageProps }) {
  return (
    <BilyProvider domainTracking="your-domain-tracking-id">
      <Component {...pageProps} />
    </BilyProvider>
  );
}

export default MyApp;

​
Multiple Providers

You can nest providers for different configurations: 
function App() {
  return (
    <BilyProvider domainTracking="main-tracking-id">
      <MainApp />
      <BilyProvider domainTracking="secondary-tracking-id">
        <SecondaryApp />
      </BilyProvider>
    </BilyProvider>
  );
}

​
Best Practices

  1. Place the provider at the highest level possible
  2. Use environment variables for tracking IDs
  3. Enable verbose mode during development
  4. Ensure all tracked components are within the provider

​
Next Steps