From 787815b8dfff896a557521b1c5159c8afd903d01 Mon Sep 17 00:00:00 2001
From: Shashwat Srivastava <darklrd@gmail.com>
Date: Wed, 13 Feb 2019 16:38:25 +0530
Subject: [PATCH] v2 examples

---
 inbox-app/index.html           | 14 ++++-----
 live-discussion-app/index.html | 17 ++++++-----
 side-chat-app/README.md        | 42 +++++++++++++++++++++++++
 side-chat-app/index.html       | 56 ++++++++++++++++++++++++++++++++++
 widget-example/index.html      | 14 ++++-----
 5 files changed, 121 insertions(+), 22 deletions(-)
 create mode 100644 side-chat-app/README.md
 create mode 100644 side-chat-app/index.html

diff --git a/inbox-app/index.html b/inbox-app/index.html
index 29b60a3..4f55891 100644
--- a/inbox-app/index.html
+++ b/inbox-app/index.html
@@ -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>
@@ -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 = {
@@ -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",
diff --git a/live-discussion-app/index.html b/live-discussion-app/index.html
index 0961ddf..c97db5a 100644
--- a/live-discussion-app/index.html
+++ b/live-discussion-app/index.html
@@ -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>
@@ -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 = {
@@ -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",
@@ -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
           }
         }
       })
diff --git a/side-chat-app/README.md b/side-chat-app/README.md
new file mode 100644
index 0000000..e080aac
--- /dev/null
+++ b/side-chat-app/README.md
@@ -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.
diff --git a/side-chat-app/index.html b/side-chat-app/index.html
new file mode 100644
index 0000000..e5099f7
--- /dev/null
+++ b/side-chat-app/index.html
@@ -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>
diff --git a/widget-example/index.html b/widget-example/index.html
index eda24d8..26a6aac 100644
--- a/widget-example/index.html
+++ b/widget-example/index.html
@@ -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>
@@ -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 = {
@@ -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",