> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sendx.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Learn how to configure and add your first contact with SendX Javascript SDK

The SendX JS Client library enables you to seamlessly capture contacts, assign tags, and update custom fields directly from your website. This guide walks you through installing the snippet, sending asynchronous API requests, and using available methods like identify and track to personalise and automate your marketing workflows.

## Installing Javascript Snippet

To use SendX JS Client library you need to have SendX snippet installed on your website. Each SendX team account has a unique snippet that can be found under [Settings > SendX Snippet](https://app.sendx.io/setting/connectors/api) Snippet.

Here's an example snippet, replace the `YOUR_TEAM_ENCRYPTED_ID` with your team's encrypted Id.

```html theme={null}
<script type="text/javascript">
  var _scq = _scq || [];
  var _scs = _scs || {};
  _scs.teamId = "<YOUR_TEAM_ENCRYPTED_ID>";

  (function() {
    var dc = document.createElement('script');
    dc.type = 'text/javascript';
    dc.async = true;
    dc.src = '//cdn.sendx.io//<YOUR_TEAM_ENCRYPTED_ID>.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(dc, s);
  })();
</script>

```

SendX Javascript snippet gets loaded asynchronously and hence it won't affect page load time of your website.

## Sending API Requests

All requests follow the same pattern.

```javascript theme={null}
_scq.Push(["methodName", { key: "value", ... }]);
```

API requests are executed asynchronously so you can safely place them anywhere on the page. The conventions are similar to what **google analytics** API follows.

## API Methods

SendX Javascript Client library has two methods:

* Identify
* Track

## Identify API Method

Identify API Method is used to attach data to a visitor. If a contact is not yet created then we will create the contact. In case contact already exists then we update it.

<RequestExample>
  ```javascript identify.js expandable theme={null}
  _scq.push([
    "identify",
    {
      email: "john.doe@gmail.com",
      firstName: "John",
      lastName: "Doe",
      birthday: "1989-03-03",
      customFields: {
        Designation: "Software Engineer",
        Age: "27",
        Experience: "5",
      },
      tags: ["Developer", "API Team"],
    },
  ]);
  ```

  ```javascript track.js theme={null}
  _scq.push([
    "track",
    {
      addTags: ["blogger", "female"],
      success: function () {
        console.log("track call successful");
      },
      failure: function () {
        console.log("track call failed");
      },
    },
  ]);

  _scq.push([
    "track",
    {
      addTags: ["paid user"],
      removeTags: ["trial user"],
      success: function () {
        console.log("track call successful");
      },
      failure: function () {
        console.log("track call failed");
      },
    },
  ]);
  ```
</RequestExample>

### Tags:

* `tags` is an array of strings.
* If a tag does **not exist**, it is **automatically created** and associated with the contact.

### Custom Fields:

* If a custom field **does not exist**, it will be created with \*\*type \*\*`string` and the value will be set.
* If the field already exists, the **value will be updated**.
* Custom fields can also have type `number`. To modify them incrementally, use:

  * `"customField_name": "++34"` → Increases the current value by `34`
  * `"customField_name": "--10"` → Decreases the current value by `10`

  <Info>
    If the custom field does not already exist, the numeric value (e.g. 34) is directly set as the starting value.
  </Info>

<Warning>
  Identify Calls are Additive
</Warning>

The `identify` call does **not delete** any previously set properties.

### API Call A

```javascript identify.js theme={null}
_scq.push([
  "identify",
  {
    email: "john.doe@gmail.com",
    firstName: "John",
    birthday: "1989-03-03",
    customFields: { Designation: "Software Engineer" },
    tags: ["Developer"],
    success: function () {
      console.log("identify call successful");
    },
    failure: function () {
      console.log("identify failed");
    },
  },
]);
```

### API Call B

```javascript identify.js theme={null}
_scq.push([
  "identify",
  {
    email: "john.doe@gmail.com",
    customFields: { Age: "29" },
    tags: ["API Team"],
    success: function () {
      console.log("identify call successful");
    },
    failure: function () {
      console.log("identify failed");
    },
  },
]);
```

Then the final contact will look like this:

```json theme={null}
{
  "firstName": "John",
  "email": "john.doe@gmail.com",
  "birthday": "1989-03-03",
  "customFields": {
    "Designation": "Software Engineer",
    "Age": "29"
  },
  "tags": [
    "Developer",
    "API Team"
  ]
}
```

Values are **merged**, not overwritten wholesale. You only need to send what you want to **add or update**.

### Identify Properties

| Property       | Type                    | Description                                                                  |
| :------------- | :---------------------- | :--------------------------------------------------------------------------- |
| `firstName`    | `string`                | Contact’s first name                                                         |
| `lastName`     | `string`                | Contact’s last name                                                          |
| `email`        | `string`                | Contact’s current email address (used to identify the contact)               |
| `newEmail`     | `string`                | New email address if updating an existing contact                            |
| `company`      | `string`                | Company name                                                                 |
| `birthday`     | `string (YYYY-MM-DD)`   | Date of birth (e.g., `2016-11-21`)                                           |
| `customFields` | `map[string]string`     | Key-value pairs for custom fields (e.g., `{"Designation": "Engineer"}`)      |
| `tags`         | `array of string`       | List of tags associated with the contact (e.g., `["Developer", "API Team"]`) |
| `success`      | `function` *(optional)* | Callback executed upon a successful request                                  |
| `failure`      | `function` *(optional)* | Callback executed when the request fails or times out                        |

<Tip>
  In case email of an already existing contact needs to be updated then specify current email under email property and updated email under `newEmail` property.
</Tip>

<ResponseExample>
  ```json response.json theme={null}
    {
      "status": "200",
      "message": "OK",
    }
  ```
</ResponseExample>

## Track API Method

Track API Method is used to track a contact. You can add or remove tags from a contact using this API.

### Track Properties

| Property     | Type                    | Description                                                          |
| :----------- | :---------------------- | :------------------------------------------------------------------- |
| `addTags`    | `array of string`       | Tags to **add** to the contact (e.g., `["Developer", "Onboarding"]`) |
| `removeTags` | `array of string`       | Tags to **remove** from the contact                                  |
| `success`    | `function` *(optional)* | Callback executed when the request completes successfully            |
| `failure`    | `function` *(optional)* | Callback executed when the request fails or times out                |