diff --git a/docs/tutorials/slack-history/index.html b/docs/tutorials/slack-history/index.html
index 718e923b5c5..d3facd3a79c 100644
--- a/docs/tutorials/slack-history/index.html
+++ b/docs/tutorials/slack-history/index.html
@@ -9,62 +9,68 @@
 <div class="wrapper">
   <div id="searchbox" focus></div>
   <div id="hits"></div>
+  <div id="hits2"></div>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
+<script
+    src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
 <script>
-    const searchMessages = instantsearch({
-        indexName: "messages",
-        searchClient: instantMeiliSearch(
-            "http://localhost:7700"
-        )
-    });
-    const searchThreads = instantsearch({
-        indexName: "threads",
-        searchClient: instantMeiliSearch(
-            "http://localhost:7700"
-        )
-    });
+    (async function () {
+        const searchMessages = instantsearch({
+            indexName: "threads",
+            searchClient: instantMeiliSearch(
+                "http://localhost:7700"
+            )
+        });
 
-    searchMessages.addWidgets([
-        instantsearch.widgets.searchBox({
-            container: "#searchbox"
-        }),
-        instantsearch.widgets.configure({ hitsPerPage: 8 }),
-        instantsearch.widgets.hits({
-            container: "#hits",
-            templates: {
-                item: `
+        const client = new MeiliSearch({host: "http://localhost:7700"});
+        // put all users in a map so that we can display user names.
+        const users = await client.getIndex("users")
+            .then(usersResult => usersResult.getDocuments())
+            .then(usersResult => usersResult.reduce((map, obj) => {
+                map[obj.id] = obj.name;
+                return map;
+            }, {}));
+
+        // put all channels in a map so that we can display channel names.
+        const channels = await client.getIndex("channels")
+            .then(usersResult => usersResult.getDocuments())
+            .then(usersResult => usersResult.reduce((map, obj) => {
+                map[obj.id] = obj.name;
+                return map;
+            }, {}));
+
+        searchMessages.addWidgets([
+            instantsearch.widgets.searchBox({
+                container: "#searchbox"
+            }),
+            instantsearch.widgets.configure({hitsPerPage: 8}),
+            instantsearch.widgets.hits({
+                container: "#hits",
+                templates: {
+                    item(hit) {
+                        return `
                       <div>
                       <div class="hit-name">
-                          {{#helpers.highlight}}{ "attribute": "text" }{{/helpers.highlight}}
+                          <b>${users[hit.user] || hit.user}</b>
+                          (<i>${channels[hit.channel_id] || hit.channel_id}, ${instantsearch.highlight({
+                            attribute: 'ts',
+                            highlightedTagName: 'mark',
+                            hit
+                        })}</i>):
+                          ${instantsearch.highlight({attribute: 'text', highlightedTagName: 'mark', hit})}
                       </div>
                       </div>
                   `
-            }
-        })
-    ]);
-    searchMessages.start();
+                    }
+                }
+            })
+        ]);
 
-    searchThreads.addWidgets([
-        instantsearch.widgets.searchBox({
-            container: "#searchbox"
-        }),
-        instantsearch.widgets.configure({ hitsPerPage: 8 }),
-        instantsearch.widgets.hits({
-            container: "#hits",
-            templates: {
-                item: `
-                      <div>
-                      <div class="hit-name">
-                          {{#helpers.highlight}}{ "attribute": "text" }{{/helpers.highlight}}
-                      </div>
-                      </div>
-                  `
-            }
-        })
-    ]);
-    searchThreads.start();
+        searchMessages.start()
+    })();
 </script>
 </body>
 </html>
+