Instant Messenger App

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.

View Demo

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="https://cdn.chatcamp.io/2.x/js/chatcamp-ui.min.js"></script>

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",
            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.