React Integration

This guide will walk you through the process of integrating Bonboarding with your React application. Bonboarding is a powerful tool designed to help you create stunning onboarding experiences and interactive walkthroughs for your web app, ensuring no user is lost to confusion.

Are you looking for a real-life example?

We've created a demo React project to showcase the integration.

You can find the repository here: React Integration Demo for Bonboarding

Integration Steps

1. Install the Bonboarding package

   First, install the Bonboarding package using npm:

npm install bonboarding

2. Import and Initialize Bonboarding

   In your React component where you want to initialize Bonboarding (typically in a component that wraps all logged-in pages), import and initialize the Bonboarding package:

import { useEffect } from 'react';
import Bonboarding from 'bonboarding';

function App() {
  useEffect(() => {
    Bonboarding.init('YOUR_API_KEY');
  }, []);

  return (
    <div>
      {/* Your app content */}
    </div>
  );
}

export default App;

Replace 'YOUR_API_KEY' with your actual API key from the Bonboarding dashboard.

3. Identify Users

   After initializing, identify your users to personalize their onboarding experience:

useEffect(() => {
  Bonboarding.identify({
    firstName: user.firstName,
    lastName: user.lastName,
    email: user.email,
    uniqueID: user.id,
    signUpDate: user.signUpDate
  });
}, [user]);

Make sure to replace the properties with actual user data from your application.

4. Integrate with Authentication

   Ensure that Bonboarding is only initialized for logged-in users. You can do this in your authentication logic or in a component that's only rendered for authenticated users.

Example Integration

Here's an example of how the integration might look in a React component:

import React, { useEffect } from 'react';
import Bonboarding from 'bonboarding';
import { useAuth } from './auth';

function App() {
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      // Initialize Bonboarding
      Bonboarding.init('YOUR_API_KEY');

      // Identify the user
      Bonboarding.identify({
        firstName: user.firstName,
        lastName: user.lastName,
        email: user.email,
        uniqueID: user.id,
        signUpDate: user.signUpDate
      });
    }
  }, [user]);

  return (
    <div>
      {/* Your app content */}
    </div>
  );
}

export default App;

Testing the Integration

We've created a demo React project to showcase the integration.
You can find the repository here: React Integration Demo for Bonboarding

To test your integration:

1. Clone the demo repository
2. Run npm install to install dependencies
3. Run npm start to start the development server
4. Navigate to http://localhost:3000/
5. Log in with any username and password
6. You should see a quick tour of the app, created with Bonboarding

Note: The demo product tour will only play on your development server. For production, please use your own API key.

Further Help

If you need any assistance with the integration or have any questions, please don't hesitate to reach out to us at [email protected] or visit our website at bonboarding.com.

Remember to replace 'YOUR_API_KEY' with your actual Bonboarding API key in your production code, and ensure you're passing real user data to the identify method.

Happy onboarding!