fixup! annotations: publish, subscribe, summary and type

Author: mschristensen

src/pages/docs/messages/annotations.mdx

@@ -216,6 +216,14 @@ The value of the `summary` field is an object where the keys are the [annotation
 
 <Code>
 ```javascript
+// Create an Ably Realtime client specifying the clientId that will
+// be associated with annotations published by this client
+const realtime = new Ably.Realtime({ key: '{{API_KEY}}', clientId: 'my-client-id' });
+
+// Create a channel in a namespace called `annotations`
+// which has message annotations enabled 
+const channel = realtime.channels.get('annotations:example');
+
 await channel.subscribe((message) => {
   if (message.action === 'message.summary') {
     console.log(message.summary);
@@ -224,6 +232,14 @@ await channel.subscribe((message) => {
 ```
 
 ```nodejs
+// Create an Ably Realtime client specifying the clientId that will
+// be associated with annotations published by this client
+const realtime = new Ably.Realtime({ key: '{{API_KEY}}', clientId: 'my-client-id' });
+
+// Create a channel in a namespace called `annotations`
+// which has message annotations enabled 
+const channel = realtime.channels.get('annotations:example');
+
 await channel.subscribe((message) => {
   if (message.action === 'message.summary') {
     console.log(message.summary);
@@ -240,12 +256,21 @@ For more details on summary structure and usage, see [annotation summaries](#ann
 
 ### Subscribing to individual annotations <a id="subscribe-individual-annotations" />
 
-For more fine-grained visibility, you can also subscribe directly to individual annotation events using the `annotations.subscribe()` method on a channel.
+For more fine-grained visibility, you can also subscribe directly to individual annotation events using the `annotations.subscribe()` method on a channel. To subscribe to individual annotations, you must request the `ANNOTATION_SUBSCRIBE` [mode](/docs/channels/options#modes).
 
 Annotations delivered to the `annotations.subscribe()` listener will have an `action` of `annotation.create` or `annotation.delete`.
 
 <Code>
 ```javascript
+// Create an Ably Realtime client specifying the clientId that will
+// be associated with annotations published by this client
+const realtime = new Ably.Realtime({ key: '{{API_KEY}}', clientId: 'my-client-id' });
+
+// Create a channel in a namespace called `annotations`
+// which has message annotations enabled.
+// Specify the ANNOTATION_SUBSCRIBE mode to enable annotation subscriptions.
+const channel = realtime.channels.get('annotations:example', { modes: ['ANNOTATION_SUBSCRIBE'] });
+
 await channel.annotations.subscribe((annotation) => {  
   if (annotation.action === 'annotation.create') {
     console.log(`New ${annotation.type} annotation with name ${annotation.name} from ${annotation.clientId}`);
@@ -256,6 +281,15 @@ await channel.annotations.subscribe((annotation) => {
 ```
 
 ```nodejs
+// Create an Ably Realtime client specifying the clientId that will
+// be associated with annotations published by this client
+const realtime = new Ably.Realtime({ key: '{{API_KEY}}', clientId: 'my-client-id' });
+
+// Create a channel in a namespace called `annotations`
+// which has message annotations enabled.
+// Specify the ANNOTATION_SUBSCRIBE mode to enable annotation subscriptions.
+const channel = realtime.channels.get('annotations:example', { modes: ['ANNOTATION_SUBSCRIBE'] });
+
 await channel.annotations.subscribe((annotation) => {  
   if (annotation.action === 'annotation.create') {
     console.log(`New ${annotation.type} annotation with name ${annotation.name} from ${annotation.clientId}`);