Side Chat App

Our side chat app allows you to add a concise instant messenger on your website. It takes very less space on your web page and loads at the bottom right corner of the page.

View Demo

Install Side Chat 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-side-chat-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.