# Implementation

### Implementation

This quickstart guides you through initializing the **Flagship SDK**, Getting flags and sending Hit.

### Import Flagship SDK

In order to use the SDK, you have to import the Flagship SDK bundle from this [CDN](https://unpkg.com/@flagship.io/js-sdk/dist/index.browser.js)

```html
<script src="https://unpkg.com/@flagship.io/js-sdk/dist/index.browser.js"><script>
```

### Initialization

The aim of this step is to give to the SDK all information necessaries which the Flagship SDK will use in order to fetch data from your [Flagship account](https://github.com/flagship-io/Gitbook/blob/main/SDKs/quickstart/app.flagship.io) and define the SDK running behaviors

```javascript
Flagship.start("yourEnvId", "yourApiKey");
```

You just need to call the static method **start** of **Flagship** class with parameters **envId** and **apiKey** from your [Flagship](https://app.flagship.io/) account. [Learn more](/server-side/sdks/js-sdk/js-reference.md#start-method)

### Create a visitor

Once the SDK is initialized, the next step is to create a visitor. With this visitor instance, you'll be able to get all your available flags defined in [Flagship](https://app.flagship.io/), send hit, etc.

```javascript
const selectedZone = document.querySelector("#zone");

//when fetch property is unset or true, newVisitor will call synchronizeModifications automatically
const visitor = Flagship.newVisitor({
    hasConsented: true,
    context: {
        zone: selectedZone.value,
    },
});
```

This code will create a visitor with **context** the geographic zone where user is connected. We don't set **visitorId** property so, the SDK will generate one for us.\
**hasConsented** is set to true so that to track some user action. [learn more about consent](/server-side/sdks/key-features/managing-visitor-consent.md)

Here the geographic zone comes from a list on the UI but you can get this information either by IP or by a third-party service.

In this step, you define all information about the user, which will be used in the targeting process.

### Get my flags

In order to get your flags defined in Flagship, you have to fetch Flags. The **fetchFlags** method will request Flagship and get all flags according to user targeting

```javascript
const loader = document.getElementById("loader");
const googleLogin = document.getElementById("google-btn");
const weChatLogin = document.getElementById("wechat-btn");

//listen visitor to be ready
visitor.on("ready", function (error) {
  if (error) {
    console.log("error", error);
  }

  // step 5 get flags
  const flagLoginWithGoogle = visitor.getFlag("login-with-google");
  const flagLoginWithWechat = visitor.getFlag("login-with-wechat");
  const flagLoginBtnColor = visitor.getFlag("login-btn-color");

  const loginOr = document.getElementById("login-or");

  //Hide or show google login according to flag login-with-google

  const isLoginWithGoogle = flagLoginWithGoogle.getValue(false); //by default calling the getValue method will automatically send an activation to the flagship
  if (isLoginWithGoogle) {
    googleLogin.classList.remove("d-none");
  } else {
    googleLogin.classList.add("d-none");
  }

  //Hide or show wechat login according to flag login-with-wechat
  const isLoginWithWechat = flagLoginWithWechat.getValue(false);
  if (isLoginWithWechat) {
    weChatLogin.classList.remove("d-none");
  } else {
    weChatLogin.classList.add("d-none");
  }

  if (!isLoginWithGoogle && !isLoginWithWechat) {
    loginOr.classList.add("d-none");
  } else {
    loginOr.classList.remove("d-none");
  }

  //Change login form button color according to the flag `login-btn-color`
  const loginBtnColor = flagLoginBtnColor.getValue("#0d6efd");
  const loginBtn = document.querySelector("form button");
  loginBtn.style.backgroundColor = loginBtnColor;
  loginBtn.style.borderColor = loginBtnColor;

  setTimeout(() => {
    loader.classList.add("d-none");
  }, 200);
});

visitor.fetchFlags() // fetch all Flags
```

Once the **fetchFlags** method process is done, the SDK will trigger the **"Ready"** event in the visitor instance to let know you that all your flags are ready to be used.

We call the **getFlag** method from the callback of the **"Ready"** event to get the 3 flags (**login-with-google**, **login-with-wechat** and **login-btn-color** ) defined in Flagship. Then, we activate each flag to report to Flagship that the current visitor has seen it.

Sometimes, the callback of the **Ready** event can have an error as a parameter if something wrong happened. [Learn more](/server-side/sdks/js-sdk/js-reference.md#flagship-class)

### Send hits

The aim is to track some user actions in order to get reports about them

```javascript
const loginForm = document.getElementById("login-form");

//send hit
loginForm.addEventListener("submit", (e) => {
    e.preventDefault();
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "submit-basic-login",
    });
});

//send hit
googleLogin.addEventListener("click", () => {
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "click-google-login",
    });
});

//send hit
weChatLogin.addEventListener("click", () => {
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "click-wechat-login",
    });
});
```

In this code, if a visitor has logged in with the login form, an **Event** hit with the action "submit-basic-login" will be sent to Flagship with "click-google-login" if the login process used is google and with "click-wechat-login" if wechat is used. [Learn more](/server-side/sdks/js-sdk.md)

The visitor has to consent otherwise the SDK won't send hits.

### Github repos

[See repos Github](https://github.com/flagship-io/code-samples/tree/master/sdk/quickstart/js)


---

# 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/quickstart/implementation.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.