import { Callout, Card, Cards } from 'nextra/components';
import { BrandLogo } from 'src/components/brand-logo';

# Documentation

The OpenPanel SDKs provide a set of core methods that allow you to track events, identify users, and more. Here's an overview of the key methods available in the SDKs.

<Callout>
  While all OpenPanel SDKs share a common set of core methods, some may have
  syntax variations or additional methods specific to their environment. This
  documentation provides an overview of the base methods and available SDKs.
</Callout>

## Core Methods

### setGlobalProperties

Sets global properties that will be included with every subsequent event.

### track

Tracks a custom event with the given name and optional properties. 

**Tips**

You can identify the user directly with this method.

```js filename="Example shown in JavaScript"
track('your_event_name', {
  foo: 'bar',
  baz: 'qux',
  // reserved property name
  __identify: {
    profileId: 'your_user_id', // required
    email: 'your_user_email',
    firstName: 'your_user_name',
    lastName: 'your_user_name',
    avatar: 'your_user_avatar',
  }
});
```

### identify

Associates the current user with a unique identifier and optional traits.

### alias

Creates an alias for a user identifier.

### increment

Increments a numeric property for a user.

### decrement

Decrements a numeric property for a user.

### clear

Clears the current user identifier and ends the session.

## Official SDKs

<Cards>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" />
    }
    title="HTML / Script"
    href="/docs/sdks/script"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
    }
    title="React"
    href="/docs/sdks/react"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
    }
    title="React-Native"
    href="/docs/sdks/react-native"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://pbs.twimg.com/profile_images/1565710214019444737/if82cpbS_400x400.jpg"
      />
    }
    title="Next.js"
    href="/docs/sdks/nextjs"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://www.datocms-assets.com/205/1642515307-square-logo.svg"
      />
    }
    title="Remix"
    href="/docs/sdks/remix"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png" />
    }
    title="Vue"
    href="/docs/sdks/vue"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://astro.build/assets/press/astro-icon-dark.png"
      />
    }
    title="Astro"
    href="/docs/sdks/astro"
  >
    {' '}
  </Card>
</Cards>

## Unofficial SDKs

While not officially supported, the following community-contributed SDKs are available.

<Cards>
  <Card
    icon={
      <BrandLogo
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/1200px-Laravel.svg.png"
      />
    }
    title="Laravel"
    href="https://github.com/tbleckert/openpanel-laravel"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        src="https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png"
      />
    }
    title="Flutter"
    href="https://github.com/stevenosse/openpanel_flutter"
  >
    {' '}
  </Card>
</Cards>