Installation

Installing and adding the Ninetailed Provider to serve Experience information.

Dependency Installation

npm install @ninetailed/experience.js-react
# OR
yarn add @ninetailed/experience.js-react

Creating a Ninetailed Instance

The core responsibility of the Experience SDKs is to define a Ninetailed class instance based on your input configuration. The created instance is then responsible for:

  • keeping track of the current profile and providing a hook into when the profile changes

  • exposing declarative methods to interact with the Experience API

  • providing extensibility to the instance through plugins

When working with the React, Next.js or Gatsby SDK, a Ninetailed instance will be created and made available to your application globally using a React context provider.

Your API Key can be found in the Ninetailed Dashboard.

Add the <NinetailedProvider> component to the top level of the application, so that the Ninetailed profile can be consumed from any child component.

import React from 'react';
import MyAppCode from '../myAppCode.jsx';
import { NinetailedProvider } from '@ninetailed/experience.js-react';

export const App = () => {
  return (
    <div id="my-app">
      <NinetailedProvider 
        // REQUIRED. An API key uniquely identifying your Ninetailed account.
        clientId="NINETAILED_API_KEY"
        
        // === ALL OF THE FOLLOWING PROPS ARE OPTIONAL ===
        // === DEFAULT VALUES ARE SHOWN ===
        
        // Your Ninetailed environment, typically either "main" or "development"
        environment="main"
        
        // Add any plugin instances
        plugins=[]
        
        // Specify an amount of time (ms) that an <Experience /> component must be present in the viewport to register a component view
        componentViewTrackingThreshold={2000}
        
        // Specify a maximum amount of time (ms) to wait for an Experience API response before falling back to baseline content
        requestTimeout={5000}
        
        // Specify a locale to localize profile location information
        locale="en-US"
        
        // Specify an alternative Experience API base URL
        url="https://experience.ninetailed.co"
        
        // Set to to true ONLY if using an unindexed CMS
        useSDKEvaluation=true
      >
        <MyAppCode />
      </NinetailedProvider>
    </div>
  );   
}

Browser Instance Access

Installing the Experience SDK exposes several Ninetailed properties and methods on a window.ninetailed object to facilitate testing and debugging.

For a full description of instance properties and methods available to your application, consult the Ninetailed Instance documentation.

Last updated