# Installation

Learn how to integrate Croct into your JavaScript project.

The following guide gives you a step-by-step overview of how to install and initialize the SDK in your project.

> **Speed up your integration!**
>
> The CLI can fully automate the integration process for you. Check out the [integration guide](/reference/sdk/javascript/integration) to get started faster.

## Install the SDK \[#install]

You can install the SDK manually using one of the following methods.

### Package manager

Run the following command to install the SDK:

**Command to install the SDK**

**npm**

```sh
npm install @croct/plug
```

**pnpm**

```sh
pnpm add @croct/plug
```

**Yarn**

```sh
yarn add @croct/plug
```

**Bun**

```sh
bun add @croct/plug
```

### Script tag

Add the following script to the `<head>` section of your page:

**Snippet to add to your page**

```html
<script src="https://cdn.croct.io/js/v1/lib/plug.js"></script>
```

## Initialize the provider \[#initialize]

To initialize the SDK, use the following code snippet:

**JavaScript**

```ts
import croct from '@croct/plug';

croct.plug({
  appId: 'APPLICATION_ID'
});
```

**TypeScript**

```ts
import croct from '@croct/plug';

croct.plug({
  appId: 'APPLICATION_ID'
});
```

**HTML**

```html
<!DOCTYPE html>
<html>
<head>
    <title>My awesome application</title>
    <script src="https://cdn.croct.io/js/v1/lib/plug.js"></script>
    <script>
      croct.plug({appId: 'APPLICATION_ID'});
    </script>
</head>
<body>
<!-- ... -->
</body>
</html>
```

You can find the Application ID on the [Integration page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/applications/-application-/integration) of your application. For a list of all available options, refer to the [`plug`](api/plug/plug) documentation.

## Check your integration \[#check]

If you open your application now, it should start sending events.

To check if your integration is working, go to the [Integration page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/applications/-application-/integration) of your application.

![Integration status](/assets/reference/sdk/integration-status.png)

When working correctly, you should see a green bullet next to the **Status** label saying **"Received traffic in the past 24 hours"**. If you still do not see this message after a few minutes, see the [Troubleshooting](troubleshooting) reference.

## Explore

- [JavaScript SDK](https://github.com/croct-tech/plug-js): Explore and contribute to the SDK development on GitHub.
- [Troubleshooting](troubleshooting): Identify and resolve issues with your integration.
