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:
- Create a new app and get AppID
- Head over to the API Keys section and click on the **Create API Key ** button
- Enter a name and select the scope as Auth Only
- Now note the API Key and App ID
- 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
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.