@chainvine/widget

@chainvine/widget

Table of Contents

• About

• Getting Started

• Usage

• Support

🔍 About

Chainvine Widget is an embeddable widget UI that allows you to display referral and reward data to your users on your website. Its built against ChainVine's all-in-one solution for Referral & Affiliate marketing.

The widget allows you to get started quickly. Avoids having to invest the front-end work required to do so.

Simply add widget to your website and if needed customize the experience by interacting with our SDK to capture referral links, retrieve rewards, fetch completed objectives, etc.

🚀 Getting Started

Features

• Supports CommonJS AND ESM, therefore browsers and node environments with modern bundlers
• Depends on React but excludes react and read-dom dependencies
• Supports client-side and server-side rendering (like NextJS)
• Includes Typescript definition files

Requirements

• Node: v18.17.1
• React: v18+

Installation

npm  install  @chainvine/widget

Documentation

For more details, refer to our documentation amongst:

• Details about the Product and Features
• Embedding the widget
• Interacting with the SDK
• Receiving Webhook events
• Advanced guidelines / Use cases

Usage

We support different use cases: client-side, server-side and through our SDK. Using either API key or allow-listed domain.

• Example 1) Embedded in React with API key (client-side)

• Example 2) Embedded in NextJS/React (server-side)

• Example 3) Interacting with SDK

• Example 4) Embedded in React with Allow-listed domain (client-side)

import React, { useState } from "react";
import { ChainvineWidget } from "@chainvine/widget";

// 📌 Adapt the following accordingly...
//
// 1️⃣ A unique identifier for the user, generally a wallet address is preferred, but we accept any string
const userIdentifier = '0x1234567890';
//
// 2️⃣ The type of identifier you're setting - we support 'wallet', 'email', and 'externalId'
const identifierType = 'wallet';
//
// 3️⃣ The campaign id you created in your community at https://chainvine.xyz
const campaignId = 'ABC123';
//
// 4️⃣ Add your domain to white-list (https://docs.chainvine.xyz/developers/sdk/classes-and-functions/authentication/allow-listing-a-domain)

export const ChainvineWidgetAndButton = () => {
  const [isOpen, setIsOpen] = useState<boolean>(true);

  return (
    <ChainvineWidget
      isOpen={isOpen}
      userIdentifier={userIdentifier}
      identifierType={identifierType}
      campaignId={campaignId}
      clientConfig={{
        testMode: true,
        logToConsole: true,
      }}
      onClose={() => setIsOpen(false)}
    >
      <button
        type={"submit"}
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open Widget
      </button>
    </ChainvineWidget>
  );
};

Authorization

We proposed two methods of interacting with the ChainVine Widget: API Key or by omitting the API key and ensuring all requests are sent from a previously allow-listed domains.

It is advised to use the API key method as it is more secure and allows you to use Widget from any domain, but only if you are operating from a server context (i.e. from an API, or SSR framework such as NextJS) as you do not want to expose your API key in a browser.

Support

If you have any questions or need support, feel free to reach out to us at