diff --git a/README.md b/README.md index d52bfbe..704ea8e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ -# ChatCamp-ChatCamp-JavaScript-Examples -Sample apps for ChatCamp JavaScript SDK -- Instant Messenger Demo: [Click to view demo](https://demo.chatcamp.io/widget-example/index.html?userId=1) +# ChatCamp JavaScript Examples +Sample chat apps implemented using ChatCamp JavaScript SDK +- Instant Messenger Demo: [Click to view demo](https://demo.chatcamp.io/widget-example/index.html?id=1) +- jQuery Chat App Demo: [Click here to see the demo](https://demo.chatcamp.io/jquery-chat-example/index.html) + +# ChatCamp JavaScript Documentation +You may review our documentation at the following links: +- Chat JavaScript UI Kit Documentation - [https://docs.chatcamp.io/docs/javascript-ui-chat-live-discussion-app](https://docs.chatcamp.io/docs/javascript-ui-chat-live-discussion-app) +- Chat JavaScript SDK Documentation - [https://docs.chatcamp.io/docs/javascript-chat-quickstart](https://docs.chatcamp.io/docs/javascript-chat-quickstart) diff --git a/inbox-app/README.md b/inbox-app/README.md new file mode 100644 index 0000000..00e139a --- /dev/null +++ b/inbox-app/README.md @@ -0,0 +1,49 @@ +## Inbox Chat App Live Demo +- Our inbox app allows you to see messages in the form of inbox on full page. +- [Click here to view the live demo](https://demo.chatcamp.io/inbox-app/index.html?id=1) + +## ChatCamp JavaScript Documentation +- You may review our documentation here - [https://docs.chatcamp.io/docs/javascript-chat-quickstart](https://docs.chatcamp.io/docs/javascript-chat-quickstart). + +## How to Install ChatCamp UI Kit +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: `
` +- 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: true, + defaultMode: 'open', // other possible values are minimize, hidden + showUserAvatarUpload: 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. diff --git a/inbox-app/index.html b/inbox-app/index.html new file mode 100644 index 0000000..4f55891 --- /dev/null +++ b/inbox-app/index.html @@ -0,0 +1,55 @@ + + + + + + + +
- To get started, edit src/App.js and save to reload.
-
User is not a participant of this group
-{this.props.groupChannels.getIn([this.props.id, 'errorMessage'], "")}
-' + message.text + '
' + timeago().format(message.time) + '
- To get started, edit src/App.js and save to reload.
-
User is not a participant of this group
-{this.props.groupChannels.getIn([this.props.id, 'errorMessage'], "")}
-