import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/docs/ui/accordion"


export const exampleFile = 'javascript-guide-examples'
# Bento JavaScript SDK Guide

This guide covers integrating Bento's JavaScript SDK for client-side analytics, user tracking, and engagement features.


> **Client-Side Only**: This SDK is designed for browser environments. For server-side tracking, use our [Node.js SDK](/docs/examples/nodejs).


<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
  <GuideLinkCards
    icon={UpBubbleIcon}
    title="Getting Started"
    links={[
      { label: 'Installation', href: '#installation' },
      { label: 'Basic Setup', href: '#basic-setup' }
    ]}
  />

  <GuideLinkCards
    icon={ThumbUpIcon}
    title="Core Features"
    links={[
      { label: 'Page View Tracking', href: '#page-view-tracking' },
      { label: 'User Identification', href: '#user-identification' },
      { label: 'Event Tracking', href: '#event-tracking' }
    ]}
  />

  <GuideLinkCards
    icon={EmailBubbleIcon}
    title="Advanced Features"
    links={[
      { label: 'User Tagging', href: '#user-tagging' },
      { label: 'Custom Fields', href: '#custom-fields' },
      { label: 'Survey Integration', href: '#survey-integration' }
    ]}
  />

  <GuideLinkCards
    icon={BentoCoinIcon}
    title="Reference"
    links={[
      { label: 'API Reference', href: '#api-reference' },
      { label: 'Best Practices', href: '#best-practices' }
    ]}
  />
</div>

### Additional Resources
<div className={'flex flex-col gap-y-1 mb-8'}>
  <div><span className={'text-xl text-violet-500'}>#</span> [Troubleshooting](#troubleshooting)</div>
  <div><span className={'text-xl text-violet-500'}>#</span> [FAQ](#faq)</div>
</div>


## Getting Started


<div className={'ml-4'}>
  
    
**1. Installation**

    
      ## Installation

      Add the Bento tracking script to your website:

      

      You can find your Site UUID in your [Bento Account Settings](https://app.bentonow.com/account).

      
> Replace `YOUR_SITE_UUID` with your actual Site UUID from Bento.

    

    
**2. Basic Setup**

    
      ## Basic Setup

      Once the script loads, Bento is automatically available via the global `window.bento` object:

      

      The SDK automatically:
      - Generates unique visitor and visit IDs
      - Tracks the initial page view
      - Handles visitor session management
    

    
**3. Verification**

    
      Verify the integration is working:

      

      Check your browser's developer console for Bento confirmation messages.
    
  
</div>


## Core Features


## Page View Tracking

Page views are automatically tracked when the script loads. For single-page applications, track navigation manually:

### Manual Page View Tracking


### SPA Navigation Tracking


## User Identification

Connect user actions across sessions by identifying users with their email:

### Basic Identification


### Dynamic Identification


## Event Tracking

Track custom events to understand user behavior and trigger workflows:

### Basic Event Tracking


### Events with Data


### Common Event Examples


## Advanced Features


## User Tagging

Add tags to segment users and trigger targeted campaigns:

### Single Tag


### Multiple Tags


## Custom Fields

Store additional user data for personalization and segmentation:

### Basic Fields


### Progressive Profiling


## Survey Integration

Bento includes built-in survey functionality for collecting user feedback:

### Survey Forms

Add survey forms to your HTML:


### Available Survey Types

| Type       | Description                    | Use Case                |
|------------|--------------------------------|-------------------------|
| `popup`    | Modal overlay survey           | Exit intent, feedback   |
| `toaster`  | Small notification survey      | Quick polls, ratings    |
| `takeover` | Full-screen survey             | Detailed questionnaires |
| `inline`   | Embedded in page content       | Content-specific forms  |


## API Reference


### Core Methods

| Method                                | Description                      | Example                                    |
|---------------------------------------|----------------------------------|--------------------------------------------|
| `bento.view()`                        | Track page view                  | `bento.view()`                             |
| `bento.identify(email)`               | Identify user by email           | `bento.identify('user@example.com')`       |
| `bento.track(event, data)`            | Track custom event               | `bento.track('signup', { plan: 'pro' })`   |
| `bento.tag(tag)`                      | Add tag to user                  | `bento.tag('premium_user')`                |
| `bento.updateFields(fields)`          | Update user fields               | `bento.updateFields({ name: 'John' })`     |

### Utility Methods

| Method             | Description            | Example                          |
|--------------------|------------------------|----------------------------------|
| `bento.getEmail()` | Get current user email | `const email = bento.getEmail()` |
| `bento.getName()`  | Get current user name  | `const name = bento.getName()`   |

### Survey Methods

| Method                                    | Description      | Example                                         |
|-------------------------------------------|------------------|-------------------------------------------------|
| `bento.showSurveyForm(element, id, type)` | Show survey form | `bento.showSurveyForm(el, 'survey-1', 'popup')` |
| `bento.spamCheck(email)`                  | Validate email   | `bento.spamCheck('test@example.com')`           |

### Chat Methods (if enabled)

| Method             | Description    | Example             |
|--------------------|----------------|---------------------|
| `bento.showChat()` | Enable chat    | `bento.showChat()`  |
| `bento.hideChat()` | Hide chat      | `bento.hideChat()`  |
| `bento.openChat()` | Open chat      | `bento.openChat()`  |


## Best Practices


## Performance

### Load Optimization


### Event Debouncing

Prevent excessive event tracking:


## Data Quality

### Email Validation


### Error Handling


## Privacy

### Conditional Tracking


## Troubleshooting


### Common Issues

| Issue                     | Solution                                                        |
|---------------------------|-----------------------------------------------------------------|
| **Script not loading**    | Verify Site UUID is correct and script URL is accessible       |
| **Events not tracking**   | Check browser console for errors, ensure `window.bento` exists |
| **Double tracking**       | Remove duplicate script tags, check for multiple installations |
| **CORS errors**           | Ensure your domain is whitelisted in Bento settings           |

### Debug Mode

Enable debug logging:


### Network Issues


## FAQ


  
    
### Can I use this SDK with any JavaScript framework?

    
      Yes, the JavaScript SDK works with any framework (React, Vue, Angular, etc.) or vanilla JavaScript. For framework-specific optimizations, check our dedicated SDK guides.
    
  

  
    
### How does visitor tracking work across sessions?

    
      Bento generates a unique visitor ID stored in localStorage that persists across browser sessions. This allows tracking the same user across multiple visits until they clear their browser data.
    
  

  
    
### What happens if the user blocks tracking scripts?

    
      If Bento's script is blocked, all method calls will fail silently. The SDK includes fallback mechanisms to prevent JavaScript errors on your site.
    
  

  
    
### Can I track events before the user is identified?

    
      Yes, events are tracked with an anonymous visitor ID before identification. When you later identify the user, all previous anonymous events are associated with their profile.
    
  

  
    
### How do I handle user logout?

    
      Call `bento.identify('')` with an empty string to clear the user identification. This starts a new anonymous session while preserving the visitor ID.

      
    
  

  
    
### Is there a size limit for event data?

    
      Event data should be kept under 64KB per event. Large data objects may be truncated or cause tracking to fail. Consider storing large data server-side and sending only references.