### Quick Start: Provide Cello Documentation URL to AI

Source: https://docs.cello.so/llm-quickstart

The fastest way to get started is to provide this URL directly to your AI tool. This file contains comprehensive Cello documentation optimized for LLM consumption.

```text
https://docs.cello.so/llms-full.txt
```

--------------------------------

### Example: Recurring Rewards Configuration

Source: https://docs.cello.so/guides/campaigns/setting-up-campaigns

This example illustrates a common referral campaign setup where a referrer receives a percentage of each referral up to a maximum cap, along with a signup bonus. It also details the new user discount and the rationale behind symmetric rewards.

```English
Referrer Reward: Percentage of revenue - Percentage of attributed new revenue that will be paid as a reward
Referrer Reward: Maximum reward (per referrer) - The maximum reward that can be earned per referral
Referrer Reward: Bonus rewards - Additional rewards that can be set for signups or purchases to encourage more sharing. Bonus rewards are also recommended for products with longer free to paid conversion times.
New User Reward: Percent Discount and Months - The new user discount to encourage additional sharing.
```

--------------------------------

### Chargebee Webhook Quickstart

Source: https://docs.cello.so/attribution/introduction

A step-by-step quickstart guide for integrating Cello's referral conversion tracking with Chargebee webhooks.

```text
Chargebee Webhook Quickstart
```

--------------------------------

### Angular Component Setup

Source: https://docs.cello.so/referral-component/quickstart

An example of an Angular root component selector. This snippet is relevant for understanding how Cello might interact with the application's root component, particularly in scenarios involving body tag manipulation.

```typescript
@Component({
  selector: 'app-root',
  ...
})
```

--------------------------------

### Open Referral Component with Link

Source: https://docs.cello.so/referral-component/quickstart

This example shows how to create a link that, when clicked, opens the Cello Referral Component. It uses a specific data attribute to trigger the component's display.

```html
<a href="#" data-cello-open-referral>Open Referral</a>
```

--------------------------------

### Stripe Webhook Quickstart

Source: https://docs.cello.so/attribution/introduction

A step-by-step quickstart guide for integrating Cello's referral conversion tracking with Stripe webhooks.

```text
Stripe Webhook Quickstart
```

--------------------------------

### Quick Start: URL Context for AI

Source: https://docs.cello.so/llms-full

Provides a URL to an AI tool for accessing Cello documentation. This method is the fastest way to get started with AI integration.

```text
https://docs.cello.so/llms-full.txt
```

--------------------------------

### Open Referral Component with Link

Source: https://docs.cello.so/docs/javascript-browser

This example shows how to create a link that, when clicked, opens the Cello Referral Component. It uses a specific data attribute to trigger the component's display.

```html
<a href="#" data-cello-open-referral>Open Referral</a>
```

--------------------------------

### Angular Component Setup

Source: https://docs.cello.so/docs/javascript-browser

An example of an Angular root component selector. This snippet is relevant for understanding how Cello might interact with the application's root component, particularly in scenarios involving body tag manipulation.

```typescript
@Component({
  selector: 'app-root',
  ...
})
```

--------------------------------

### Cello Installation Verification URL (Example)

Source: https://docs.cello.so/sdk/client-side/embedded-script-tag

This is an example URL to test your Cello attribution script installation. Append `?productId=test` and `?ucc=test` to your website URL to check if the values are correctly saved and accessible.

```html
https://yourwebsite.com/?productId=test&ucc=test
```

--------------------------------

### Cello Referral Initialization in Angular

Source: https://docs.cello.so/docs/javascript-browser

Provides a TypeScript example for integrating Cello's referral functionality within an Angular application. It includes an injectable service to handle dynamic script loading and initialization with user payload, addressing potential race conditions with a timeout.

```typescript
export interface CelloReferralPayload {
  productId: string;
  token: string;
  showOnBoot: boolean;
  productUserId: string;
  language: string;
  iat: string;
}

@Injectable({ providedIn: 'root' })
export class CelloReferralAdapter {
  constructor(@Inject(DOCUMENT) private document: Document, @Inject(WINDOW) private window: Window) {}

  async init(payload: CelloReferralPayload, isProd: boolean){
     await this.loadScript(isProd
      ? 'https://assets.cello.so/app/latest/cello.js'
      : 'https://assets.sandbox.cello.so/app/latest/cello.js');
     await this.wait(1000);
     (this.window as Window & {Cello: any}).Cello('boot', payload);
  }

  async wait(timeout: number) {
    // due to a race condition a timeout is needed after initializing the script.
    return new Promise<void>(resolve => setTimeout(() => resolve(), timeout));
  }

  async loadScript(src: string): Promise<void> {
     return new Promise(resolve => {
       const script = this.document.createElement('script');
       script.onload = () => resolve();
       script.type = 'module';
       script.src = src;
       this.document.head.appendChild(script);
     });
  }

}
```

--------------------------------

### Verify Cello Attribution Script Installation

Source: https://docs.cello.so/attribution/use-cases/chargebee

This snippet demonstrates how to verify the installation of the Cello attribution script by checking for specific cookie values and using a JavaScript function to retrieve the referral code.

```html
https://yourwebsite.com/?productId=test&ucc=test
```

```javascript
window.CelloAttribution('getUcc')
```

```javascript
Promise {<fulfilled>: 'test'}
```

--------------------------------

### Mobile Attribution Setup with Branch.io

Source: https://docs.cello.so/sdk/mobile/introduction

Configure mobile attribution to capture referral codes for app installs using services like Branch.io. This is a crucial step for tracking the source of new users and rewarding referrers.

```N/A
// Guide on setting up mobile attribution with Branch.io or similar services.
// Specific code implementation will depend on the chosen attribution provider.
```

--------------------------------

### Example Prompt: Basic Cello Integration with React

Source: https://docs.cello.so/llm-quickstart

An example prompt to ask an AI for guidance on implementing the referral component with user authentication in a React application, using Cello documentation.

```text
Using the Cello docs, show me how to implement the referral component 
with user authentication in a React app
```

--------------------------------

### Angular AppRoot Element Example

Source: https://docs.cello.so/llms-full

Illustrates a common Angular component setup and the corresponding HTML structure for the `<body>` tag, highlighting potential conflicts with third-party scripts like Cello.

```html
<body>
    <app-root></app-root>
</body>
```

--------------------------------

### Cello Referral Initialization in Angular

Source: https://docs.cello.so/referral-component/quickstart

Provides a TypeScript example for integrating Cello's referral functionality within an Angular application. It includes an injectable service to handle dynamic script loading and initialization with user payload, addressing potential race conditions with a timeout.

```typescript
export interface CelloReferralPayload {
  productId: string;
  token: string;
  showOnBoot: boolean;
  productUserId: string;
  language: string;
  iat: string;
}

@Injectable({ providedIn: 'root' })
export class CelloReferralAdapter {
  constructor(@Inject(DOCUMENT) private document: Document, @Inject(WINDOW) private window: Window) {}

  async init(payload: CelloReferralPayload, isProd: boolean){
     await this.loadScript(isProd
      ? 'https://assets.cello.so/app/latest/cello.js'
      : 'https://assets.sandbox.cello.so/app/latest/cello.js');
     await this.wait(1000);
     (this.window as Window & {Cello: any}).Cello('boot', payload);
  }

  async wait(timeout: number) {
    // due to a race condition a timeout is needed after initializing the script.
    return new Promise<void>(resolve => setTimeout(() => resolve(), timeout));
  }

  async loadScript(src: string): Promise<void> {
     return new Promise(resolve => {
       const script = this.document.createElement('script');
       script.onload = () => resolve();
       script.type = 'module';
       script.src = src;
       this.document.head.appendChild(script);
     });
  }

}
```

--------------------------------

### Capture Referral Codes on Landing Pages

Source: https://docs.cello.so/integration-overview

Set up a Referral Landing Page to capture referral codes (ucc) when users click on referral links. This guide covers the web signup flow and alternative methods for capturing codes.

```JavaScript
// Example for capturing referral codes on a web landing page
// This might involve parsing URL parameters or using Cello's JavaScript SDK.
// Refer to Cello documentation for specific implementation.
```

--------------------------------

### Verify Cello Attribution Script Installation

Source: https://docs.cello.so/attribution/use-cases/stripe

This snippet demonstrates how to verify the correct installation of the Cello attribution script by checking for specific cookie values and using a JavaScript function to retrieve the referral code.

```javascript
https://yourwebsite.com/?productId=test&ucc=test
```

```javascript
window.CelloAttribution('getUcc')
```

```javascript
Promise {<fulfilled>: 'test'}
```

--------------------------------

### Example Prompt: Custom Cello Integration with Paddle

Source: https://docs.cello.so/llm-quickstart

An example prompt to inquire about integrating a payment provider like Paddle with Cello to send purchase events.

```text
How do I integrate our payment provider Paddle with Cello to send purchase events?
```

--------------------------------

### Add New Guide to Partner Resources

Source: https://docs.cello.so/guides/partners/partner-resources

This section details the process of adding a new guide to the Partner Resources dashboard. It involves clicking an 'Add New Guide' button and filling out a form with title, description, cover image, and a link to the resource. The guide becomes instantly visible to partners upon saving.

```text
1. Click the “Add New Guide” Button
   * Located at the top right of the Partner Resources dashboard.
2. Fill Out the Form
   * Title: Enter a clear and concise title for the guide.
   * Description: Provide a brief description of the guide’s purpose.
   * Cover Image: Upload an image to visually represent the guide. Use the “Select files” area to drag and drop or browse files from your machine.
   * Link: Add a URL to direct partners to the guide’s content, such as a video, article, or webpage.
3. Save the Guide
   * Click the Add button to save the guide.
```

--------------------------------

### Example of Short Referral Link

Source: https://docs.cello.so/changelog

An example demonstrating the new short referral link format, showing how a product name and a unique campaign code (UCC) are incorporated.

```URL
https://curlytics.cello.so/SgqXJPU3n0X
```

--------------------------------

### Example Prompt: Advanced Cello Attribution Tracking

Source: https://docs.cello.so/llm-quickstart

An example prompt to generate a complete attribution tracking system using Cello, including capturing referral codes, storing them in cookies, and sending conversion events via the Cello API.

```text
Create a complete attribution tracking system that captures referral codes 
from URLs, stores them in cookies, and sends conversion events to Cello using Cello API
```

--------------------------------

### Create Cello Launcher Element in HTML

Source: https://docs.cello.so/llms-full

Provides HTML examples for creating Cello launcher elements using different selectors: ID, class, and attribute. Each example includes the required `position: relative` styling.

```html
    <!-- Element with ID selector -->
    <button id="cello-launcher" style="position: relative;">
      Invite Friends
    </button>

    <!-- Element with class selector -->
    <button class="cello-custom-launcher" style="position: relative;">
      Share & Earn
    </button>

    <!-- Element with attribute selector -->
    <button data-cello-launcher="true" style="position: relative;">
      Refer Now
    </button>
```

--------------------------------

### Example Referral Code and Link

Source: https://docs.cello.so/llms-full

Illustrates the format of a Unique Campaign Code (UCC) and its corresponding referral link used for tracking user referrals.

```text
ucc: pNRB1aYqArN
referral link: moonly.cello.so/pNRB1aYqArN
```

--------------------------------

### Referral Link Example

Source: https://docs.cello.so/key-concepts

Demonstrates the structure of a referral link, including the unique campaign code (UCC) at the end.

```General
Referral Code (UCC): pNRB1aYqArN
Referral Link: moonly.cello.so/pNRB1aYqArN
```

--------------------------------

### Initialize Cello JS SDK

Source: https://docs.cello.so/docs/javascript-browser

This snippet demonstrates how to initialize the Cello JS SDK with user authentication details, including a JWT token and product credentials. It sets up the SDK for use within the application.

```javascript
cello.init({
  productId: "YOUR_PRODUCT_ID",
  productSecret: "YOUR_PRODUCT_SECRET",
  token: "YOUR_JWT_TOKEN"
});
```

--------------------------------

### Initialize Cello JS SDK

Source: https://docs.cello.so/referral-component/quickstart

This snippet demonstrates how to initialize the Cello JS SDK with user authentication details, including a JWT token and product credentials. It sets up the SDK for use within the application.

```javascript
cello.init({
  productId: "YOUR_PRODUCT_ID",
  productSecret: "YOUR_PRODUCT_SECRET",
  token: "YOUR_JWT_TOKEN"
});
```

--------------------------------

### Initialize Cello JS SDK with boot()

Source: https://docs.cello.so/sdk/client-side/cello-js-usage

Initializes the Cello Referral Component using the `boot` command. It handles potential race conditions by pushing commands to a `window.cello.cmd` array. The function accepts an options object with `productId`, `token`, and `productUserDetails`.

```javascript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async (cello) => {
  try {
    await cello.boot(options);
  } catch (error) {
    // Handle the error appropriately
  }
});
```

```javascript
await window.Cello("boot", options);
```

```javascript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async (cello) => {
  try {
    const options = {
      productId: "REPLACE_WITH_PRODUCT_ID",
      token: "REPLACE_WITH_TOKEN",
      language: "en",
      productUserDetails: {
        firstName: "Bob",
        lastName: "Bobsky",
        fullName: "Bob B Bobsky",
        email: "bob@gmail.com",
      },
    };

    await cello.boot(options);
    // Call other Cello commands, if necessary
  } catch (error) {
    console.error("Failed to boot cello:", error);
  }
});
```

--------------------------------

### Verify Cello Installation (JS)

Source: https://docs.cello.so/sdk/client-side/embedded-script-tag

This example demonstrates how to verify the Cello attribution script installation. It involves accessing the `ucc` value using the `getUcc()` method from the browser console.

```javascript
window.CelloAttribution('getUcc')
```

--------------------------------

### Initialize Cello Referral Component (JavaScript)

Source: https://docs.cello.so/docs/javascript-browser

Initializes the Cello library with product ID, JWT token, and user details for fraud detection and personalized messaging. This implementation supports asynchronous script loading.

```JavaScript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async function (cello) {
  try {
    await cello.boot({
      productId: "CELLO_PRODUCT_ID",
      token: "REPLACE_ME",
      language: "en",
      productUserDetails: {
        firstName: "Bob",
        lastName: "Bobsky",
        fullName: "Bob B Bobsky",
        email: "bob@gmail.com",
      },
    });
  } catch (error) {
    console.error("Failed to boot cello:", error);
    // Handle the error appropriately
  }
});

```

--------------------------------

### Initialize Cello Referral Component (JavaScript)

Source: https://docs.cello.so/referral-component/quickstart

Initializes the Cello library with product ID, JWT token, and user details for fraud detection and personalized messaging. This implementation supports asynchronous script loading.

```JavaScript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async function (cello) {
  try {
    await cello.boot({
      productId: "CELLO_PRODUCT_ID",
      token: "REPLACE_ME",
      language: "en",
      productUserDetails: {
        firstName: "Bob",
        lastName: "Bobsky",
        fullName: "Bob B Bobsky",
        email: "bob@gmail.com",
      },
    });
  } catch (error) {
    console.error("Failed to boot cello:", error);
    // Handle the error appropriately
  }
});

```

--------------------------------

### Cello Installation Verification Response (Example)

Source: https://docs.cello.so/sdk/client-side/embedded-script-tag

This shows the expected output when verifying the Cello attribution script installation using the `getUcc()` method. It should return a fulfilled promise with the value 'test'.

```javascript
Promise {<fulfilled>: 'test'}
```

--------------------------------

### Initialize Cello JS SDK with Options

Source: https://docs.cello.so/llms-full

Initializes the Cello Referral Component using the `boot` method with provided options. This method returns a promise that resolves upon successful initialization or rejects if an error occurs. It demonstrates a safe way to push commands to the `window.cello` object to avoid race conditions.

```javascript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async (cello) => {
  try {
    await cello.boot(options);
  } catch (error) {
    // Handle the error appropriately
  }
});
```

--------------------------------

### Initialize Cello JS Component

Source: https://docs.cello.so/sdk/client-side/cello-js-introduction

Boot the Cello JS component with user authentication and configuration. This is a core function for integrating the referral system.

```JavaScript
/**
 * Initializes the Cello Referral Component.
 * Requires user authentication and configuration details.
 */
function initializeCelloComponent(userId, authToken, config) {
  // Implementation to initialize the component
  console.log('Initializing Cello component for user:', userId);
  // ... Cello SDK initialization logic ...
}
```

--------------------------------

### Integrate Referral Component

Source: https://docs.cello.so/llms-full

Instructions on how to add the Referral Component to your application. This typically involves following a quickstart guide provided by the developer.

```Markdown
Simply follow the instructions on the [Referral Component integration guide](/referral-component/quickstart).
```

--------------------------------

### Boot Cello Referral Component

Source: https://docs.cello.so/llms-full

Initializes the Cello Referral Component with specified product and user details. It requires a product ID and an authentication token, and can be configured with user information and language settings. Error handling is included for the boot process.

```javascript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async (cello) => {
  try {
    const options = {
      productId: "REPLACE_WITH_PRODUCT_ID",
      token: "REPLACE_WITH_TOKEN",
      language: "en",
      productUserDetails: {
        firstName: "Bob",
        lastName: "Bobsky",
        fullName: "Bob B Bobsky",
        email: "bob@gmail.com",
      },
    };

    await cello.boot(options);
    // Call other Cello commands, if necessary
  } catch (error) {
    console.error("Failed to boot cello:", error);
  }
});
```

--------------------------------

### Initialize Cello Referral Component (Web)

Source: https://docs.cello.so/referral-component/introduction

This JavaScript snippet demonstrates how to load and initialize the Cello SDK in a web application. It requires a product ID, a JWT token for authentication, and user details like email and first name to boot the component.

```JavaScript
// Load and initialize Cello
window.cello.cmd.push(async function (cello) {
  await cello.boot({
    productId: "YOUR_PRODUCT_ID",
    token: "JWT_TOKEN",
    productUserDetails: {
      email: "user@example.com",
      firstName: "John"
    }
  });
});

```

--------------------------------

### Integrate Cello Referral Component

Source: https://docs.cello.so/guides/user-experience/configuring-referral-component

Instructions on adding the Referral Component to your web application. This involves following developer integration guides to ensure proper setup.

```General
Follow the instructions on the Referral Component integration guide.
```

--------------------------------

### Get Custom Launcher Labels (JavaScript)

Source: https://docs.cello.so/referral-component/custom-launcher

Retrieves custom launcher labels using the Cello JavaScript API. This is useful for displaying localized text for your custom launcher.

```javascript
const labels = await window.Cello("getLabels")
const myCustomLauncherLabel = labels.customLauncher
```

--------------------------------

### Open Referral Component with URL Parameter (HTML)

Source: https://docs.cello.so/docs/javascript-browser

Automatically opens the Cello Referral Component by adding a 'cello-open=true' parameter to your product URL. This allows users to access sharing options directly from links, such as in emails.

```HTML
https://your-product.com?cello-open=edit-payments

```

--------------------------------

### Open Referral Component with URL Parameter (HTML)

Source: https://docs.cello.so/referral-component/quickstart

Automatically opens the Cello Referral Component by adding a 'cello-open=true' parameter to your product URL. This allows users to access sharing options directly from links, such as in emails.

```HTML
https://your-product.com?cello-open=edit-payments

```

--------------------------------

### Load Cello JS SDK

Source: https://docs.cello.so/referral-component/quickstart

This snippet shows how to load the Cello JavaScript SDK from a CDN into the head tag of an HTML document. The script is loaded asynchronously to prevent blocking page rendering and improve SEO. It also registers the `window.Cello` object for communication and processes queued commands.

```html
<script
  type="module"
  src="https://assets.sandbox.cello.so/app/latest/cello.js"
  async>
</script>
```

--------------------------------

### Default Launcher Behavior (HTML)

Source: https://docs.cello.so/referral-component/custom-launcher

Examples of HTML elements configured for the default Cello launcher behavior, which is clickable and displays notification badges. Ensures the element has `position: relative` styling.

```html
<button id="cello-launcher" style="position: relative;">
  Invite
</button>

<button class="my-launcher" style="position: relative;">
  Share & Earn
</button>
```

--------------------------------

### Load Cello JS SDK

Source: https://docs.cello.so/referral-component/quickstart

This snippet shows how to load the Cello Javascript SDK script into an HTML page. It includes the necessary script tag with the source URL.

```html
<script src="https://cdn.jsdelivr.net/npm/@cellosocial/cello-js@latest/dist/cello.umd.js"></script>
```

--------------------------------

### Append Referral Data to App Install Link

Source: https://docs.cello.so/llms-full

Append referral data to existing app install links to track referrals through the mobile app installation process.

```html
Original: https://yourbrand.app.link/abc123
With Referral: https://yourbrand.app.link/abc123?referral_ucc=A1B2C
```

--------------------------------

### Initialize Cello SDK with Promise Support (JavaScript)

Source: https://docs.cello.so/changelog

Demonstrates how to initialize the Cello SDK using the `boot()` command, which now returns a promise. This allows developers to asynchronously wait for the initialization process to complete or handle potential errors.

```JavaScript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async function (cello) {
  try {
    await cello.boot({
      productId: 'CELLO_PRODUCT_ID',
      token: 'REPLACE_ME',
      language: "en"
    });
    // call other Cello commands, if necessary
  } catch (error) {
    console.error("Failed to boot cello:", error);
    // Handle the error appropriately
  }
});
```

--------------------------------

### Initialize Cello SDK

Source: https://docs.cello.so/llms-full

Initializes the Cello SDK by booting with a product ID and user JWT token. It includes error handling for the initialization process and logs success or failure messages.

```javascript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async (cello) => {
  try {
    await cello.boot({
      productId: "YOUR_PRODUCT_ID",
      token: "USER_JWT_TOKEN",
      // ... other configuration
    });
    
    console.log("Cello initialized successfully");
    // Custom launcher is now active
  } catch (error) {
    console.error("Failed to initialize Cello:", error);
  }
});
```

--------------------------------

### Manage Existing Guides in Partner Resources

Source: https://docs.cello.so/guides/partners/partner-resources

This describes how to manage guides once they are added to the Partner Resources dashboard. Guides appear as cards with their title, description, and action buttons for editing or deleting. Call-to-action buttons direct partners to the linked resources.

```text
Guides appear as individual cards in the Partner Resources dashboard. Each card includes:
1. Title and Description: A quick summary of the guide.
2. Actions:
   * Edit: Use the pencil icon to update the guide’s details.
   * Delete: Use the trash icon to remove the guide.
3. Call-to-Action Buttons:
   * Depending on the link type, buttons like “Watch Video,” “Read Article,” or “Go to Page” will appear, directing users to the linked resource.
```

--------------------------------

### Initialize Cello with Product ID and JWT

Source: https://docs.cello.so/llms-full

Initializes the Cello library by booting with your product ID, JWT token, language preference, and optional user details for enhanced features like fraud detection and personalized messaging. This implementation supports asynchronous script loading.

```JavaScript
window.cello = window.cello || { cmd: [] };

window.cello.cmd.push(async function (cello) {
  try {
    await cello.boot({
      productId: "CELLO_PRODUCT_ID",
      token: "REPLACE_ME",
      language: "en",
      productUserDetails: {
        firstName: "Bob",
        lastName: "Bobsky",
        fullName: "Bob B Bobsky",
        email: "bob@gmail.com",
      },
    });
  } catch (error) {
    console.error("Failed to boot cello:", error);
    // Handle the error appropriately
  }
});
```

--------------------------------

### JWT Token Payload Example

Source: https://docs.cello.so/llms-full

An example of the content of a generated JWT token, including productId, productUserId, and iat (issued at time).

```json
{
  "productId": "acme.com",
  "productUserId": "123456",
  "iat": 1662712365
}
```

--------------------------------

### Install Cello React Native Package

Source: https://docs.cello.so/llms-full

Installs the Cello SDK for React Native using either Yarn or npm package managers.

```bash
yarn add @getcello/cello-react-native
# or
npm install @getcello/cello-react-native
```

--------------------------------

### JWT Token Header Example

Source: https://docs.cello.so/sdk/client-side/user-authentication

An example of the header section of a JWT token, specifying the algorithm (HS512) and token type (JWT).

```json
{
  "alg": "HS512",
  "typ": "JWT"
}

```

--------------------------------

### JWT Token Header Example

Source: https://docs.cello.so/docs/user-authentication

An example of the header section of a JWT token, specifying the algorithm (HS512) and token type (JWT).

```json
{
  "alg": "HS512",
  "typ": "JWT"
}

```

--------------------------------

### Load Cello JS SDK

Source: https://docs.cello.so/docs/javascript-browser

This snippet shows how to load the Cello Javascript SDK script into an HTML page. It includes the necessary script tag with the source URL.

```html
<script src="https://cdn.jsdelivr.net/npm/@cellosocial/cello-js@latest/dist/cello.umd.js"></script>
```

--------------------------------

### JWT Token Payload Example

Source: https://docs.cello.so/sdk/client-side/user-authentication

An example of the payload section of a JWT token, including product ID, user ID, and issue time.

```json
{
  "productId": "acme.com",
  "productUserId": "123456",
  "iat": 1662712365
}

```

--------------------------------

### Initialize Cello SDK with Product ID and Token

Source: https://docs.cello.so/llms-full

This Swift code demonstrates how to initialize the Cello SDK using a product ID and a user token. It includes handling for both successful initialization and potential errors.

```swift
import CelloSDK

Cello.initialize(for: "YOUR_PRODUCT_ID", with: token) { result in
   switch result {
   case .success(let configuration):
      print("Initialization successful with config:", configuration)
   case .failure(let error):
      print("Initialization failed with error:", error)
   }
}
```

--------------------------------

### JWT Token Payload Example

Source: https://docs.cello.so/docs/user-authentication

An example of the payload section of a JWT token, including product ID, user ID, and issue time.

```json
{
  "productId": "acme.com",
  "productUserId": "123456",
  "iat": 1662712365
}

```

--------------------------------

### Track Signups via POST /events Endpoint

Source: https://docs.cello.so/integration-overview

Send signup events to Cello using the POST /events endpoint to attribute user signups to their referrers. This is crucial for potential future rewards and tracking referral success.

```HTTP
POST /events
Host: api.cello.so
Content-Type: application/json

{
  "event_type": "signup",
  "user_id": "user_123",
  "referrer_id": "referrer_abc",
  "timestamp": "2023-10-27T10:00:00Z"
}
```

--------------------------------

### Verify Attribution Script Installation

Source: https://docs.cello.so/llms-full

This snippet demonstrates how to verify the correct installation of the Cello attribution script by checking cookies and using the `getUcc()` method in the browser console.

```html
https://yourwebsite.com/?productId=test&ucc=test
```

```javascript
window.CelloAttribution('getUcc')
```

```javascript
Promise {<fulfilled>: 'test'}
```

--------------------------------

### Load Cello JS SDK

Source: https://docs.cello.so/docs/javascript-browser

This snippet shows how to load the Cello JavaScript SDK from a CDN into the head tag of an HTML document. The script is loaded asynchronously to prevent blocking page rendering and improve SEO. It also registers the `window.Cello` object for communication and processes queued commands.

```html
<script
  type="module"
  src="https://assets.sandbox.cello.so/app/latest/cello.js"
  async>
</script>
```

--------------------------------

### Install Cello React Native SDK

Source: https://docs.cello.so/sdk/mobile/react-native

Installs the Cello React Native SDK using either Yarn or npm package managers.

```bash
yarn add @getcello/cello-react-native
# or
npm install @getcello/cello-react-native
```

--------------------------------

### Install Cello React Native SDK

Source: https://docs.cello.so/docs/cello-for-react-native

Installs the Cello React Native SDK using either Yarn or npm package managers.

```bash
yarn add @getcello/cello-react-native
# or
npm install @getcello/cello-react-native
```

--------------------------------

### Example: Attach Hidden Input to a Form

Source: https://docs.cello.so/llms-full

This example demonstrates how to use the `attachTo` function to attach a hidden input field to the first form element found on the page.

```javascript
window.CelloAttribution("attachTo", document.querySelector("form"));
```

--------------------------------

### Install Cello SDK using CocoaPods

Source: https://docs.cello.so/sdk/mobile/ios

This snippet shows how to add the CelloSDK to your iOS project's Podfile using CocoaPods and then run 'pod install' to integrate the SDK.

```ruby
target :YourTargetName do
  pod 'CelloSDK'
end

```

--------------------------------

### Test Cello Attribution Installation (Console)

Source: https://docs.cello.so/sdk/client-side/google-tag-manager

This JavaScript command is used to test if the Cello attribution script is correctly installed and accessible in the browser's developer console.

```javascript
window.CelloAttribution('getUcc')
```