Documentation
Integration
Campaign Integration

Integrate a campaign

This guide will walk you through the process of installing and integrating the campaign widget into your application. You can integrate a campaign using two ways, either by using our react SDK or by using our widget CDN script.

Using React SDK

Step 1: Installation

Run the following command in your terminal to install the package:

This will add the @bandit-network/react package to your project dependencies.

Step 2: Integration

After installing the package, you can now import the necessary components from it. Specifically, you will need the BanditContextProvider and Campaign components.

Here's how you can import them:

import { BanditContextProvider, Campaign } from "@bandit-network/react";

Now, you can use these components in your application. The BanditContextProvider component is a context provider that makes the Bandit Network API available to your application. It requires an apiKey and a cluster as props.

The Campaign component is used to display a specific campaign. It requires a campaignId and a displayMode as props.

Here's an example of how you can use these components:

const App = () => {
  return (
    <BanditContextProvider
      apiKey="REPLACE_WITH_API_KEY"
      cluster="mainnet"
    >
      <Campaign campaignId={"REPLACE_WITH_CAMPAIGN_ID"} displayMode="integrated" />
    </BanditContextProvider>
  );
};

In this example, replace REPLACE_WITH_CAMPAIGN_ID with the actual campaign ID you want to display and replace REPLACE_WITH_API_KEY with your actual API key.

That's it! You have now integrated the Bandit Network widget into your application. You can now customize the appearance and behavior of the widget to suit your needs.

Styling the Campaign Widget with Custom CSS

This example app demonstrates how to create a campaign with a custom UI and an EVM wallet. You can use this as a starting point for your own campaign with custom CSS.

To get started, visit the Next.js with Custom UI and EVM Wallet (opens in a new tab) example on GitHub.

Remember, this is just an example. Feel free to modify and expand upon it to suit your specific needs and preferences.

Testing Your Integration

When integrating the Bandit Network campaign widget, it's crucial to test your implementation before deploying to production. We provide two environments for testing and production use.

Environments

  1. Devnet (Test Environment)

    • Cluster: 'devnet'
    • Use this for development and testing purposes.

  2. Mainnet (Production Environment)

    • Cluster: 'mainnet'
    • Use this for your live, production application.

API Reference

The Campaign component and mountCampaign function accept the following props:

campaignId

The ID of the campaign you want to display.

  • Type: number

cluster

The environment cluster you want to connect to.

  • Type: string
  • Options: 'mainnet', 'devnet'

displayMode (optional)

Specifies how the campaign should be presented, either embedded inside the website or in a modal.

  • Type: string
  • Options: 'modal', 'integrated'
  • Default: 'integrated'

isOpen (optional)

If the displayMode is set to 'modal', isOpen controls the visibility of the campaign modal.

  • Type: boolean
  • Default: false

onClose (optional)

If the displayMode is set to 'modal', onClose will be triggered once the modal is closed.

  • Type: function

render (optional)

Allows you to render your own UI. The render function provides the necessary arguments RenderArgsType.

  • Type: function
IntegrationReferral Integration