Inbox App

Our inbox app allows you to see messages in the form of inbox on the full page.

Install Inbox 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-inbox-app" data-height="500px" data-width="100%"></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"
          },
          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.