Web SDK

Integrating SDK in your Application

Paste the below code snippet just before the head tag in each page of your application where you want the CustomFit.ai Web SDK.

<script src="https://sdk.customfit.ai/cf-js-sdk-min.js"></script>

App Client Key

Once the SDK has been integrated, your application needs to be authorized by the client key to connect to CustomFit.ai. Get your App client key from app settings in your dashboard. Click here to know how to get Client key.

Never use server key in your application. Be sure client key is used in your application,

Users

In our Web SDK, we use a builder to easily construct user objects. The config values are determined by the user object and also based on the events you pass.

const cfUser = new CustomFit.CFUser.Builder('user_customer_id')
.build();
var customFit = new CustomFit.default()
customFit.init(cfUser,'app-key').then(value=>{
//Your app code
}

Let's go through the code snippet. The first argument to the builder is the user customer id. The user customer id is used to uniquely identify the user. If user customer id is not passed then a random UUID will be generated for the user and passed as a user customer id.

The properties you pass in the builder will automatically appear in the CustomFit.ai dashboard. Some of the pre-defined user properties are listed below:

User Property

Method in user builder

Description

email

.withEmail("string")

Email id of the user

firstName

.withFirstName("string")

First name of the user

lastName

.withLastName("string")

Last name of the user

phoneNumber

.withPhoneNumber("string")

Phone number of the user

countryCode

.withCountryCode("string")

Country code of the user phone number

country

.withCountry("string)

Country of the user

gender

.withGender("string")

Gender of the user

timeZone

.withTimeZone("string")

Timezone of the user

dob

.withDob("date")

Date of Birth of user

defaultLocation

.withDefaultLocation(lat, lon)

Default location of the user

userName

.withUserName("string)

User name of the user

Custom Properties

Other than predefined user properties you can also pass your own user custom properties, like the age of a user. CustomFit.ai supports various types of custom properties and they are listed below

Custom Property type

Method in user builder

Boolean

.withCustomBooleanProperty(String key, Boolean value)

String

.withCustomStringProperty(String key, String value)

Number

.withCustomNumberProperty(String key, Number value)

Date

.withCustomDateProperty(String key, Date value)

Geo point

.withCustomGeoPointProperty(String key, GeoType value)

List string

.withCustomListStringProperty(String key, Array<String> values)

List number

.withCustomListNumberProperty(String key, Array<Number> values)

List date

.withCustomListDateProperty(String key, Array<Date> values)

The first argument in each of the custom property method in the builder is the property key and the second argument is the property values. Custom property of users is most powerful, which decides the config variation value to be returned based on the rules executed on the property values. Once the custom properties are passed to user builder then they are instantly available on the CustomFit.ai dashboard.

Example of user builder with predefined and custom properties :

const cfUser = new CustomFit.CFUser.Builder('user_customer_id')
.withFirstName("Abhishek")
.withEmail("abhishek@customfit.ai")
.withCustomNumberProperty("age",27)
.build();

Private Properties

In the Web SDK, you can define the private predefined user properties as well as private custom properties. If a user builder has any pre-defined or custom properties as private then the property data will not be stored on the CustomFit.ai server. If the properties are set as private then you cannot find the data in the CustomFit.ai dashboard. For example :

const cfUser = new CustomFit.CFUser.Builder('user_customer_id')
.withPrivateFirstName("Abhishek")
.withPrivatEmail("abhishek@customfit.ai")
.withPrivateCustomNumberProperty("age",27)
.build();

Anonymous users

Anonymous users are similar to regular users, except that they won't get created and appear in the CustomFit.ai dashboard when you call user builder. In Web SDK the anonymous users are defined as below :

const cfUser = new CustomFit.CFUser.Builder('user_customer_id')
.makeAnonymous(true)
.build();

Configs:

In Web SDK there is a method for each config. For example :

var configResult = customFit.getBoolean("config_id","fallback_value")

In all the config methods the first argument is the config id and the second argument is the fallback value. The fallback value will be returned in case if the SDK is not able to fetch the config from CustomFit.ai.

Different types of config methods supported by CustomFit.ai are as follows:

Config type

Config Method

Boolean

CustomFit.getBoolean("config_id", "fallback_value ))

String

CustomFit.getString("config_id", "fallback_value" ))

Number

CustomFit.getNumber("config_id", "fallback_value" ))

Json

CustomFit.getJson("config_id", Json object ))

Color

CustomFit.getColor("config_id", "fallback_value" ))

Rich Text

CustomFit.getRichtext("config_id", "fallback_value" ))

List

CustomFit.getList("config_id", "fallback_value" ))

Image

CustomFit.getImage("config_id", "fallback_value" ))

For boolean config make sure that you use boolean method. If we use other methods then you get fallback_value

Track Event

customFit.track(new CustomFit.CFEvent.Builder("event_id")
.withEventProperty("sign_up",true)
.withEventProperty("name","jhon")
.build());

In the above code snippet, you can see that the first argument to the event builder is the "event_id" and it is the only mandatory argument. The event_id is used to uniquely identify the event. In addition to event id, you can attach the event properties to the event to provide detailed information of why, how and when the event was generated. From the above code snippet, we can say that the event with event_id was tracked when the user by name John triggered it during sign up.

The event properties can be of different types and the supported types are listed below :

Event property type

Method in event builder

Boolean

.withEventProperty(String key, Boolean value)

String

.withEventProperty(String key, String value)

Number

.withEventProperty(String key, Number value)

Date

.withEventProperty(String key, Date value)

Geo point

.withEventProperty(String key, GeoType value)

List string

.withEventProperties(String key, Array<String> values)

List number

.withEventProperties(String key, Array<Number> values)

List date

.withEventProperties(String key, Array<Date> values)

List geopoint

.withEventProperties(String key, Array<GeoType> values)

Sample HTML file

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://dashboard.customfit.ai/cf-js-sdk-min.js"></script>
</head>
<body>
<script type="text/javascript">
var key = "<your client key>"
const cfUser = new CustomFit.CFUser.Builder('user_customer_id')
.withFirstName("Abhishek")
.withEmail("abhishek@customfit.ai")
.withCustomNumberProperty("age",27)
.build();
var customFit = new CustomFit.default()
customFit.init(cfUser,key).then(value=>{
/* your code goes here */
console.log(customFit.getString("config-key-string","fall_back_value"));
console.log(customFit.getNumber("config-key-number",10));
console.log(customFit.getBoolean("config-key-boolean",false));
console.log(customFit.getJson("config-key-json",{}));
//fire track event
customFit.track(new CustomFit.CFEvent.Builder("event_id1").build());
});
</script>
</body>
</html>