Instant Messenger App

This guide will help you add our instant messenger app in less than 5 minutes!

Our instant messenger app allows you to have a floating chat widget anywhere on your website. By default it shows up at bottom right. It is compatible with all desktop and mobile browsers.

Install Instant Messenger 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 id="cc-app"></div>
  • Next include the chat UI kit in footer:
<script src=""></script>
  • Finally we need to initialize the chat UI kit. Add the following code right after the above script tag:
// Initialize ChatCamp
        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",
            position: "RIGHT" // Possible values are LEFT & RIGHT
          roster: {
            tabs: ['recent', 'publicrooms', 'users'], 
            render: true, 
            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 and USER_ACCESS_TOKEN should be replaced by correct string values and you are good to go. :)

The chat UI kit uses our ChatCamp JavaScript SDK to connect to our ChatCamp backend.