diff --git a/src/plugins/sib-subscribe-to-rai.js b/src/plugins/sib-subscribe-to-rai.js
index 764aa9ac771f95b8001d420f4f1059620bed3789..60da2ed118375d5872a48394fe4e0b52d8078063 100644
--- a/src/plugins/sib-subscribe-to-rai.js
+++ b/src/plugins/sib-subscribe-to-rai.js
@@ -1,4 +1,5 @@
 import { store } from 'https://cdn.skypack.dev/@startinblox/core@0.17';
+import { documentReady } from '../utils.js';
 
 /**
  * Initialize rai plugin.
@@ -52,8 +53,7 @@ converse.plugins.add('sib-subscribe-to-rai', {
       }, 250);
     });
 
-    api.listen.on('connected', async () => {
-
+    const onConnected = async () => {
       // @MattJ Here userRooms is an array of each jabberID the user is on.
       let userRooms = (await Promise.all([
         getCircles,
@@ -62,14 +62,23 @@ converse.plugins.add('sib-subscribe-to-rai', {
 
       log.info(`User rooms: ${userRooms.join(', ')}`);
       await api.rooms.subscribe(userRooms);
-    });
+    };
 
-    api.listen.on('chatRoomHasActivity', jid => {
-      window.dispatchEvent(new CustomEvent('newMessage', {
-        detail: {
-          jid,
-        },
-      }));
+    // Send RAI subscriptions when connected to the XMPP endpoint
+    api.listen.on('connected', onConnected);
+    api.listen.on('reconnected', onConnected);
+
+    // Set timeout so the event is sent once the document is loaded
+    // Await document ready state so the event is properly registered
+    api.listen.on('chatRoomHasActivity', async jid => {
+      await documentReady();
+      setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('newMessage', {
+          detail: {
+            jid,
+          },
+        }));
+      }, 250);
     });
   },
 });
diff --git a/src/utils.js b/src/utils.js
index a66a5de9833ccc4d47c0c7b9a47510dbb9f90eb2..69ba1688e9b1475ed69d349b08c37ddac7c04c1f 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -14,3 +14,16 @@ export class Deferred {
  * @return {boolean}
  */
 export const isTouchDevice = () => ('ontouchstart' in document.documentElement);
+
+/**
+ * Promise that resolves once the document is fully ready.
+ * @return {Promise}
+ */
+export function documentReady() {
+  if (document.readyState === 'loading') {
+    return new Promise(resolve => {
+      document.addEventListener('DOMContentLoaded', () => resolve());
+    });
+  }
+  return Promise.resolve();
+}