diff --git a/README.md b/README.md
index a288919b..71dc7924 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![Ably](https://s3.amazonaws.com/files.ably.io/logo-with-type.png)](https://www.ably.io)
+[![Ably](https://static.ably.dev/logo-h-black.svg?presence-javascript)](https://www.ably.com)
 
 ---
 
@@ -6,6 +6,8 @@
 
 This repository contains the working code for many of the [Ably tutorials](https://www.ably.io/tutorials).
 
-See [https://www.ably.io/tutorials](https://www.ably.io/tutorials) for a complete list of Ably tutorials. The source code for each tutorial exists as a branch in this repo, see [a complete list of branches in this repo](https://github.com/ably/tutorials/branches).
+This branch contains a sample app for implementing [presence](https://ably.com/docs/core-features/presence) in an Ably app. There is also a detailed [step-by-step tutorial](https://ably.com/tutorials/presence) to follow along.
+
+See [https://www.ably.io/tutorials](https://www.ably.io/tutorials) for a complete list of Ably tutorials. The source code for each tutorial exists as a branch in this repo, see [the complete list of tutorial branches in this repository](https://github.com/ably/tutorials/branches/all).
 
 To find out more Ably and our realtime data delivery platform, visit [https://www.ably.io](https://www.ably.io)
diff --git a/example.html b/example.html
new file mode 100644
index 00000000..175d9e85
--- /dev/null
+++ b/example.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Presence</title>
+  </head>
+  <body>
+    <h1>Presence example</h1>
+
+    <h2>Present in the "chatroom" channel:</h2>
+    <ul id="presence-set"></ul>
+  </body>
+  <!-- Import the Ably client library-->
+  <script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
+
+  <script>
+    const apiKey = "YOUR_ABLY_API_KEY"; // Replace with your API key
+    const randomId = Math.random().toString(36).slice(-10);
+    const realtime = new Ably.Realtime.Promise({
+      key: apiKey,
+      clientId: randomId, // Your ID in the presence set
+    });
+
+    async function doPresence() {
+      // Connect to Ably
+      await realtime.connection.once("connected");
+      console.log("Connected to Ably!");
+
+      // Attach to the "chatroom" channel
+      const channel = realtime.channels.get("chatroom");
+      await channel.attach((err) => {
+        if (err) return console.error("Error attaching to the channel.");
+      });
+
+      // Enter the presence set of the "chatroom" channel
+      await channel.presence.enter("hello", (err) => {
+        if (err) return console.error("Error entering presence set.");
+        console.log("This client has entered the presence set.");
+      });
+
+      // Subscribe to the presence set to receive updates
+      await channel.presence.subscribe((presenceMessage) => {
+        const { action, clientId } = presenceMessage;
+        console.log("Presence update:", action, "from:", clientId);
+
+        // Update the list of channel members when the presence set changes
+        channel.presence.get((err, members) => {
+          if (err)
+            return console.error(`Error retrieving presence data: ${err}`);
+          document.getElementById("presence-set").innerHTML = members
+            .map((member) => {
+              return `<li>${member.clientId}</li>`;
+            })
+            .join("");
+        });
+      });
+    }
+
+    doPresence();
+  </script>
+</html>