Live Discussion App
Add conversation widget right next to your live feed in less than 5 minutes!
Our live discussion app allows you to embed a particular conversation right next to your live feed or product. It is ideal for gaming events and live conferences.
Install Live Discussion App into your Website
We provide ready-to-use UI kit which may be integrated into your web app in three easy steps.
- First add the following div in your webpage:
<div class="cc-live-discussion-app" data-channel-id="CHANNEL_ID" data-channel-type="CHANNEL_TYPE" data-height="500px" data-width="100%"></div>
- Next include the chat UI kit in footer:
- Finally we need to initialize the chat UI kit. Add the following code right after the above script tag:
// Initialize ChatCamp
window.ChatCampUi.init({
appId: APP_ID,
user: {
id: USER_ID,
displayName: USER_DISPLAY_NAME // optional
// avatarUrl: USER_AVATAR_URL // optional
// accessToken: USER_ACCESS_TOKEN // optional
},
ui: {
theme: {
primaryBackground: "#3f45ad",
primaryText: "#ffffff",
secondaryBackground: "#ffffff",
secondaryText: "#000000",
tertiaryBackground: "#f4f7f9",
tertiaryText: "#263238"
},
roster: {
tabs: ['recent', 'rooms', 'users'],
render: false,
defaultMode: 'open', // other possible values are minimize, hidden
showUserAvatarUpload: true,
showStartNewChat: true
},
channel: {
showAttachFile: true,
showVideoCall: true,
showVoiceRecording: true
}
}
})
Here APP_ID
, USER_ID
, USER_DISPLAY_NAME
, USER_AVATAR_URL
, USER_ACCESS_TOKEN
, CHANNEL_ID
and CHANNEL_TYPE
should be replaced by correct string values and you are good to go. :)
The value of CHANNEL_ID
you may get by using our ChatCamp Dashboard. And the value of CHANNEL_TYPE
can be either group
or open
depending on if it is a group channel or open channel respectively.
The Chat UI kit uses our ChatCamp JavaScript SDK to connect to our ChatCamp backend.
Updated over 5 years ago