Skip to content

v2 examples #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
darklrd merged 1 commit into from
Feb 13, 2019
Merged

v2 examples #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions inbox-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// helper function
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
</script>

<title>ChatCamp JavaScript SDK - Widget Example</title>
Expand All @@ -20,7 +20,7 @@
<!-- Include ChatCamp Inbox App div -->
<div class="cc-inbox-app" data-height="600px" data-width="100%"></div>
<!-- Load ChatCamp JavaScript UI Kit -->
<script src="https://cdn.chatcamp.io/js/chatcamp-ui.min.js"></script>
<script src="https://cdn.chatcamp.io/2.x/js/chatcamp-ui.min.js"></script>
<script>
// Create user object from query parameters
let user = {
Expand All @@ -29,11 +29,11 @@
if(getQueryStringValue('displayName')) {
user.displayName = getQueryStringValue('displayName')
}

// Initialize ChatCamp
window.ChatCampUi.init({
appId: "6346990561630613504",
user: user,
appId: "6346990561630613504",
user: user,
ui: {
theme: {
primaryBackground: "#3f45ad",
Expand Down
17 changes: 9 additions & 8 deletions live-discussion-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// helper function
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
</script>

<title>ChatCamp JavaScript SDK - Live Discussion App</title>
Expand All @@ -20,7 +20,7 @@
<!-- Include ChatCamp Live Discussion Chat App div -->
<div class="cc-live-discussion-app" data-channel-id="5a5ef06b48bdc63ad6760fe5" data-channel-type="open" data-height="600px" data-width="100%"></div>
<!-- Load ChatCamp JavaScript UI Kit -->
<script src="https://cdn.chatcamp.io/js/chatcamp-ui.min.js"></script>
<script src="https://cdn.chatcamp.io/2.x/js/chatcamp-ui.min.js"></script>
<script>
// Create user object from query parameters
let user = {
Expand All @@ -29,11 +29,11 @@
if(getQueryStringValue('displayName')) {
user.displayName = getQueryStringValue('displayName')
}

// Initialize ChatCamp
window.ChatCampUi.init({
appId: "6346990561630613504",
user: user,
appId: "6346990561630613504",
user: user,
ui: {
theme: {
primaryBackground: "#3f45ad",
Expand All @@ -46,7 +46,8 @@
roster: {
tabs: ['recent', 'rooms', 'users'],
render: true,
defaultMode: 'open' // other possible values are minimize, hidden
defaultMode: 'open', // other possible values are minimize, hidden
displayStartNewChatButton: true // can be either true or false
}
}
})
Expand Down
42 changes: 42 additions & 0 deletions side-chat-app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
## Side Chat App Live Demo
- The side chat app allows you to place inbox as a floating widget on the right side.
- [Click here to view the live demo](https://demo.chatcamp.io/side-chat-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: `<div class="cc-side-chat-app" data-height="500px" data-width="370px"></div>`
- Next include the chat UI kit in footer: `<script src="https://cdn.chatcamp.io/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
// 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
}
}
})
```
Here `APP_ID`, `USER_ID`, `USER_DISPLAY_NAME`, 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.
56 changes: 56 additions & 0 deletions side-chat-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// helper function
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
</script>

<title>ChatCamp JavaScript SDK - Side Chat App</title>

</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!-- Include ChatCamp Side Chat Chat App div -->
<div class="cc-side-chat-app" data-height="600px" data-width="370px"></div>
<!-- Load ChatCamp JavaScript UI Kit -->
<script src="https://cdn.chatcamp.io/2.x/js/chatcamp-ui.min.js"></script>
<script>
// Create user object from query parameters
let user = {
id: getQueryStringValue('id') || '1'
}
if(getQueryStringValue('displayName')) {
user.displayName = getQueryStringValue('displayName')
}

// Initialize ChatCamp
window.ChatCampUi.init({
appId: "6346990561630613504",
user: user,
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
displayStartNewChatButton: true // can be either true or false
}
}
})
</script>
</body>
</html>
14 changes: 7 additions & 7 deletions widget-example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// helper function
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
</script>

<title>ChatCamp JavaScript SDK - Widget Example</title>
Expand All @@ -20,7 +20,7 @@
<!-- Include ChatCamp App div -->
<div id="cc-app"></div>
<!-- Load ChatCamp JavaScript UI Kit -->
<script src="https://cdn.chatcamp.io/js/chatcamp-ui.min.js"></script>
<script src="https://cdn.chatcamp.io/2.x/js/chatcamp-ui.min.js"></script>
<script>
// Create user object from query parameters
let user = {
Expand All @@ -29,11 +29,11 @@
if(getQueryStringValue('displayName')) {
user.displayName = getQueryStringValue('displayName')
}

// Initialize ChatCamp
window.ChatCampUi.init({
appId: "6346990561630613504",
user: user,
appId: "6346990561630613504",
user: user,
ui: {
theme: {
primaryBackground: "#3f45ad",
Expand Down