Update chatbox frontend example

keerlu · keerlu · commit 1b6b935f3910 · 2025-01-21T11:39:21.000Z
diff --git a/rest-api/migrate-data-from-sendbird-to-talkjs/index.html b/rest-api/migrate-data-from-sendbird-to-talkjs/index.html
@@ -1,44 +1,44 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Sendbird migration example</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>TalkJS Node JS Integration</title>
-  <meta name="description" content="" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-
-<body>
-  <script src="script.js" async defer></script>
-  <script>
-    (function (t, a, l, k, j, s) {
-      s = a.createElement("script");
-      s.async = 1;
-      s.src = "https://cdn.talkjs.com/talk.js";
-      a.head.appendChild(s);
-      k = t.Promise;
-      t.Talk = {
-        v: 3,
-        ready: {
-          then: function (f) {
-            if (k)
-              return new k(function (r, e) {
-                l.push([f, r, e]);
-              });
-            l.push([f]);
-          },
-          catch: function () {
-            return k && new k();
+  <body>
+    <script src="script.js" async defer></script>
+    <script>
+      (function (t, a, l, k, j, s) {
+        s = a.createElement("script");
+        s.async = 1;
+        s.src = "https://cdn.talkjs.com/talk.js";
+        a.head.appendChild(s);
+        k = t.Promise;
+        t.Talk = {
+          v: 3,
+          ready: {
+            then: function (f) {
+              if (k)
+                return new k(function (r, e) {
+                  l.push([f, r, e]);
+                });
+              l.push([f]);
+            },
+            catch: function () {
+              return k && new k();
+            },
+            c: l,
           },
-          c: l,
-        },
-      };
-    })(window, document, []);
-  </script>
-  <!-- container element in which TalkJS will display a chat UI -->
-  <div id="talkjs-container" style="width: 90%; margin: 30px; height: 700px">
-  </div>
-</body>
-
+        };
+      })(window, document, []);
+    </script>
+    <!-- container element in which TalkJS will display a chat UI -->
+    <div
+      id="talkjs-container"
+      style="width: 90%; margin: 30px; height: 600px"
+    ></div>
+  </body>
 </html>
diff --git a/rest-api/migrate-data-from-sendbird-to-talkjs/script.js b/rest-api/migrate-data-from-sendbird-to-talkjs/script.js
@@ -1,33 +1,23 @@
+const appId = "<APP_ID>"; // Replace with your app ID from the TalkJS dashboard
+
 Talk.ready.then(function () {
-  var me = new Talk.User({
-    id: "523915",
-    name: "Mathew Jacob"
-  });
-  var other1 = new Talk.User({
-    id: "523916",
-    name: "Morgan Stanley"
-  });
-  var other2 = new Talk.User({
-    id: "523917",
-    name: "Shane Riley"
-  });
-  var other3 = new Talk.User({
-    id: "523918",
-    name: "Clyde Howell"
-  });
+  // Add users from example-data
+  var alice = new Talk.User("alice-sendbird");
+  var sebastian = new Talk.User("sebastian-sendbird");
+  var nina = new Talk.User("nina-sendbird");
   window.talkSession = new Talk.Session({
-    appId: "YOUR_APP_ID",
-    me: me
+    appId: appId,
+    me: alice,
   });
 
+  // Add conversation from example-data
   var conversation = window.talkSession.getOrCreateConversation(
-    "sendbird_group_channel_229583953_53183fc50174e861b9a7d5c6684636dc94922349"
+    "sendbird_group_channel_483424280_ac14e7e8e6d5b3bc2dd3979fb360ad432ae0d6e9"
   );
-  conversation.setParticipant(me);
-  conversation.setParticipant(other1);
-  conversation.setParticipant(other2);
-  conversation.setParticipant(other3);
+  conversation.setParticipant(alice);
+  conversation.setParticipant(sebastian);
+  conversation.setParticipant(nina);
 
   var chatbox = window.talkSession.createChatbox(conversation);
   chatbox.mount(document.getElementById("talkjs-container"));
-});
+});
