# Javascript

### Installation

To install the `ConnectFramework` JavaScript SDK:

If using in a browser, you can include it via a script tag:

```html
<script src="https://cdn.connect.ai/sdk/v1.0.js"></script>
<script>
    const ConnectFramework = window.ConnectFramework;
</script>
```

***

### Usage

#### Initializing the SDK

Before making any API calls, initialize the SDK with your API key.

```javascript
// Initialize the SDK with an API key
ConnectFramework.initialize("your_api_key_here");
```

***

### User Authentication

#### Logging in with a Unique ID

Logs the user in with a unique ID. If `uniqueId` is `null`, a unique ID will be created automatically. The callback is executed upon completion.

```javascript
ConnectFramework.login(null, function(success) {
    if (success) {
        console.log("User logged in successfully.");
    } else {
        console.log("Login failed or was cancelled.");
    }
});
```

#### Logging Out

Logs the user out entirely.

```javascript
ConnectFramework.logout();
```

#### Checking if User is Connected

Returns `true` if the user is logged in and running the Connect.ai desktop client.

```javascript
const isConnected = ConnectFramework.isConnected();
console.log("User is connected:", isConnected);
```

***

### Paywall Management

#### Creating a Paywall

Creates and presents a new paywall. The callback receives two parameters:

* `success` (`boolean`): `true` if the user completed a purchase, `false` otherwise.
* `productId` (`string | null`): The product ID if a purchase occurred, otherwise `null`.

```javascript
ConnectFramework.createPaywall(function(success, productId) {
    if (success) {
        console.log("User purchased product:", productId || "Unknown");
    } else {
        console.log("User did not complete the purchase.");
    }
});
```

#### Setting Extra JSON Data

(Optional) Configures the user JSON settings used by the paywall.

```javascript
const extraSettings = JSON.stringify({ custom_key: "custom_value" });
ConnectFramework.setExtraJson(extraSettings);
```

#### Checking if User has Purchased

Returns `true` if the user has already made a purchase. Avoid presenting a paywall if this returns `true`.

```javascript
const hasPurchased = ConnectFramework.hasPurchased();
console.log("User has purchased:", hasPurchased);
```

***

### Analytics Tracking

#### Logging an Event

Logs an analytics event with a category and action.

```javascript
ConnectFramework.logEvent("user_action", "button_click");
```

#### Logging an Event with Additional Data

Logs an analytics event with a category, action, label, and numerical value.

```javascript
ConnectFramework.logEventWithDetails("user_action", "purchase", "premium_upgrade", 29.99);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.connect.ai/sdk-integration-guides/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.