# Quick-start

## Installation

Refer to the [installation page](https://docs.abtasty.com/server-side/sdks/js-sdk/javascript-installation) for installation steps.

## Flagship Usage

### Start SDK

**Step 1:** Start the SDK by importing the [Flagship class](https://docs.abtasty.com/server-side/sdks/js-reference#flagship-class) from `@flagship.io/js-sdk package` for NodeJs or `https://deno.land/x/flagship_io_js_sdk/mod.ts` for Deno. Then, call the static function [**start**](https://docs.abtasty.com/server-side/sdks/js-reference#start-method).

This function should be called once at an appropriate location in your application.

```javascript
import { Flagship } from "@flagship.io/js-sdk";

Flagship.start("<ENV_ID>", "<API_KEY>");
```

```typescript
import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

Flagship.start("<ENV_ID>", "<API_KEY>");

```

This starts the SDK in [DECISION-API](https://docs.abtasty.com/server-side/sdks/js-reference#decision-mode). More options are available in the [SDK configuration](https://docs.abtasty.com/server-side/sdks/js-reference#sdk-configuration).

{% hint style="info" %}
👍 Good to know

Your **apiKey** and **environmentId** can be found in your Flagship account under Parameters > Environment & Security.
{% endhint %}

### Create a visitor

**Step 2:** Create a [visitor](https://docs.abtasty.com/server-side/sdks/js-reference#visitor-class) using the [newVisitor](https://docs.abtasty.com/server-side/sdks/js-reference#newvisitor-method) method from the [Flagship](https://docs.abtasty.com/server-side/sdks/js-reference#flagship-class) instance. The visitor instance allows you to set relevant data for Flagship to make a decision, including: [Visitor ID](https://docs.abtasty.com/server-side/glossary#visitor-id), [Visitor Context](https://docs.abtasty.com/server-side/glossary#user-context), [GDPR Consent](https://docs.abtasty.com/server-side/sdks/js-reference#newvisitor-method), and [Authentication status](https://docs.abtasty.com/server-side/sdks/js-reference#authenticate-method).

For example, if you want to enable a specific feature for all your `VIP` visitors, you'll need to add this data as an attribute into the visitor context (key-value pair): `isVIP: true`. Based on your targeting criteria defined in your use-case (`isVIP === true`), Flagship will make the decision and show your feature to visitors that have `isVIP` in their context and for which `isVIP` is equal to `true`.

```typescript
// ...import code 

await Flagship.start("<ENV_ID>", "<API_KEY>");

const fsVisitor = Flagship.newVisitor({
  visitorId: "<VISITOR_ID>",
  hasConsented: true, // this is required
  context: {
    isVIP: true,
    country: "NL",
    loginProvider: "Google"
  }
});
```

### Getting Flags

**Steps 3, 4, and 5** involve **fetching flags from Flagship**, **retrieving your flag**, **and reading your flag's value.**

First, fetch flags from the [Flagship platform](https://app.flagship.io/login) using the [fetchFlags](https://docs.abtasty.com/server-side/sdks/js-reference#fetchflags-method) method. You can ensure that your flags are fetched and ready to be used by using an `await` statement, a `then` function, or an `event listener`.

Then, use the [getFlag](https://docs.abtasty.com/server-side/sdks/js-reference#getflag-method) method of the [**visitor instance**](https://docs.abtasty.com/server-side/sdks/js-reference#visitor-class) to retrieve a specific [flag](https://docs.abtasty.com/server-side/sdks/js-reference#getflag-method) object based on the key provided. This object includes methods to retrieve the flag value, access flag metadata, expose the flag, verify the flag's existence, and get the flag status.

{% tabs %}
{% tab title="Retrieving flags with an " %}

```javascript
// Retrieving flags with an 'await' statement
//...import code

// Step 1: start the SDK
await Flagship.start("your_env_id", "your_api_key");

//Step 2: Create a visitor
const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

//Step 3: Fetch flag from the Flagship platform 
await visitor.fetchFlags();

// Step 4: Retrieves a flag named "displayVipFeature"
const flag = visitor.getFlag("displayVipFeature");

//Step 5: Returns the flag value ,or if the flag does not exist, it returns the default value "false"
console.log("flag value", flag.getValue(false))
```

{% endtab %}

{% tab title="Retrieving flags with a " %}

```javascript
// Retrieving flags with a 'then' function
//...import code

// Step 1: start the SDK
await Flagship.start("your_env_id", "your_api_key");

//Step 2: Create a visitor
const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

//Step 3: Fetch flags from the Flagship platform 
visitor.fetchFlags().then(()=>{
// Step 4: Retrieves a flag named "displayVipFeature"
  const flag = visitor.getFlag("displayVipFeature");
  
//Step 5: Returns the flag value ,or if the flag does not exist, it returns the default value "false"
  console.log("flag value", flag.getValue(false))
});
```

{% endtab %}

{% tab title="Retrieving flags with an event listener" %}

```javascript
// Retrieving flags with an event listener
//...import code

// Step 1: start the SDK
await Flagship.start("your_env_id", "your_api_key");

//Step 2: Create a visitor
const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

visitor.on("ready",  (error) => {
  if (error) {
    //do some stuff
    return;
  }

// Step 4: Retrieves a flag named "displayVipFeature"
  const flag = visitor.getFlag("displayVipFeature");
  
//Step 5: Returns the flag value ,or if the flag does not exist, it returns the default value "false" */
	console.log("flag value", flag.getValue(false))
});

//Step 3: Fetch flags from the Flagship platform 
visitor.fetchFlags();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
👍 Good to know

By default, the SDK assumes that the visitor has been exposed to the flag when `flag.getValue()` is called, so it sends the flag exposure hit to flagship server. However, this behavior can be changed. [Click here for more details](doc:js-reference#getvalue-method).
{% endhint %}

### Tracking hits

**Step 6:** Send hits to Flagship using the [sendHit](https://docs.abtasty.com/server-side/sdks/js-reference#sendhit-method) method of the [**visitor instance**](https://docs.abtasty.com/server-side/sdks/js-reference#visitor-class). These hits help validate your objectives (KPIs) set up in your campaign.

```jsx
import { HitType, EventCategory } from "@flagship.io/js-sdk";

// ... other code

visitor.sendHit({
  type: HitType.EVENT, 
  category: EventCategory.USER_ENGAGEMENT,
  action: "click",
  label: "label",
  value: 100,
});
```