> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cello.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> JavaScript SDK for embedding the Cello Referral Component in web applications

<img src="https://mintcdn.com/cello/6Zr08teY9AER0ncF/referral-component/referral-component-introduction.png?fit=max&auto=format&n=6Zr08teY9AER0ncF&q=85&s=9c03d3d1a094bede1cdb9db53d2ed967" alt="Referral Component Pn" className="mx-auto" style={{ width:"77%" }} width="1686" height="1178" data-path="referral-component/referral-component-introduction.png" />

## What is Cello JS?

Cello JS is a browser-based JavaScript SDK that enables you to embed a fully-featured referral component directly into your web application. It provides a seamless way for your users to share referral links, track their performance, and receive rewards - all without leaving your product.

The SDK works with any web framework that outputs HTML/JavaScript, including:

* React, Next.js, and Gatsby
* Vue and Nuxt
* Angular
* Vanilla JavaScript applications
* Server-rendered applications (with client-side initialization)

## Getting Started

Follow our quickstart guide to integrate Cello JS in under 15 minutes:

<CardGroup cols={2}>
  <Card title="Quickstart Guide" icon="rocket" href="/referral-component/quickstart">
    Step-by-step instructions to add the Referral Component to your web app
  </Card>
</CardGroup>

## Key Capabilities

With Cello JS, you can:

### Core Functionality

* **Initialize the component** - Boot with user authentication and configuration
* **Manage visibility** - Show, hide, or programmatically open the component
* **Handle user sessions** - Update user details and manage authentication tokens

### Customization & Control

* **Change language** - Switch languages dynamically without re-initialization
* **Custom launchers** - Replace the default button with your own UI elements
* **Event callbacks** - React to component events like open, close, and token expiration

### Data & Communication

* **Retrieve referral links** - Get active referral codes and URLs programmatically
* **Access campaign config** - Fetch reward amounts and program details
* **Display announcements** - Show targeted messages and updates to users

### Advanced Features

* **Localization** - Access and customize all UI text labels
* **Country restrictions** - Automatically handle unsupported regions
* **Graceful shutdown** - Clean component removal when needed

## Mobile Applications

Looking to add referral functionality to your mobile app? Check out our native mobile SDKs:

<CardGroup cols={3}>
  <Card title="iOS SDK" icon="apple" href="/sdk/mobile/ios">
    Swift/Objective-C SDK for iOS apps
  </Card>

  <Card title="Android SDK" icon="android" href="/sdk/mobile/android">
    Kotlin/Java SDK for Android apps
  </Card>

  <Card title="React Native" icon="react" href="/sdk/mobile/react-native">
    Cross-platform mobile SDK
  </Card>
</CardGroup>

## Next Steps

<Steps>
  <Step title="Install the SDK">
    [Follow the quickstart](/referral-component/quickstart) to add Cello JS to your application
  </Step>

  <Step title="Authenticate Users">
    [Set up JWT authentication](/sdk/client-side/user-authentication) for secure user sessions
  </Step>

  <Step title="Explore the API">
    [View all available methods](/sdk/client-side/cello-js-usage) in the usage documentation
  </Step>
</Steps>