This guide demonstrates how to add Liftoff in your website.

1. Configuration

Signup for CometChat to get your Application Id and Application Auth Token.

Steps:

1. Create a new app and get AppID
2. Head over to the API Keys section and click on the *Create API Key * button
3. Enter a name and select the scope as Auth Only
4. Now note the API Key and App ID
5. Create an Auth Token via the CometChat API

Add the Liftoff Plugin Dependency in your project.

npm install @cometchat-pro/liftoff --save

import {Liftoff} from '@cometchat-pro/liftoff';

2. Launch the Application

1. Initialize Liftoff plugin

` var APP_ID = "12345APPID";

Liftoff.init(APP_ID).then( ()=> { console.log("Application is initialized"); }, error => { console.log("Initialized failed with error : " + error); } } //end

After the initialization is completed, You can launch the Liftoff plugin using  `Launch` method.

**2. Launch Liftoff Plugin**

let chatView = document.getElementsByTagName("BODY")[0]; let UID = "superhero1"; let CID = "superhero2";

let settings = new Liftoff.LiftoffSettingsBuilder(UID,"AUTH_TOKEN",chatView) .setConversationID(CID) .setConversationType(Liftoff.ConversationType.USER) .build();

Liftoff.launch(liftoffsettings);

**3. Set your custom theme colour.**

Add theme color using `setPrimaryColor()` and pass color hex code in argument. 

let chatView = document.getElementsByTagName("BODY")[0]; let UID = "superhero1"; let CID = "superhero2"; let color "#7b56a4";

let settings = new Liftoff.LiftoffSettingsBuilder(UID,"AUTH_TOKEN",chatView) .setConversationID(CID) .setConversationType(Liftoff.ConversationType.USER) .setPrimaryColor(color) .build();

Liftoff.launch(liftoffsettings);

`

To learn more, please refer to our javascript Developer Documentation.