# Quick-start

## Installation

Refer to the [installation page](/server-side/sdks/js-sdk/javascript-installation.md) for installation steps.

## Flagship Usage

### Start SDK

**Step 1:** Start the SDK by importing the [Flagship class](/server-side/sdks/js-sdk/js-reference.md#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**](/server-side/sdks/js-sdk/js-reference.md#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](/server-side/sdks/js-sdk/js-reference.md#decision-mode). More options are available in the [SDK configuration](/server-side/sdks/js-sdk/js-reference.md#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](/server-side/sdks/js-sdk/js-reference.md#visitor-class) using the [newVisitor](/server-side/sdks/js-sdk/js-reference.md#newvisitor-method) method from the [Flagship](/server-side/sdks/js-sdk/js-reference.md#flagship-class) instance. The visitor instance allows you to set relevant data for Flagship to make a decision, including: [Visitor ID](/server-side/glossary.md#visitor-id), [Visitor Context](/server-side/glossary.md#user-context), [GDPR Consent](/server-side/sdks/js-sdk/js-reference.md#newvisitor-method), and [Authentication status](/server-side/sdks/js-sdk/js-reference.md#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](/server-side/sdks/js-sdk/js-reference.md#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](/server-side/sdks/js-sdk/js-reference.md#getflag-method) method of the [**visitor instance**](/server-side/sdks/js-sdk/js-reference.md#visitor-class) to retrieve a specific [flag](/server-side/sdks/js-sdk/js-reference.md#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](/server-side/sdks/js-sdk/js-reference.md#sendhit-method) method of the [**visitor instance**](/server-side/sdks/js-sdk/js-reference.md#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,
});
```


---

# 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.abtasty.com/server-side/sdks/js-sdk/javascript-quick-start.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.