diff --git a/src/react-components/chat-message.js b/src/react-components/chat-message.js
index 7b9950277b..d8a3f699b4 100644
--- a/src/react-components/chat-message.js
+++ b/src/react-components/chat-message.js
@@ -43,20 +43,20 @@ const messageBodyDom = (body, from, fromSessionId, onViewProfile, emojiClassName
 
 const bubbleColorRegEx = /^.*\s?(-color=)(#?[0-9a-fA-Z]{6}|[0-9a-fA-Z]{3})\s?.*$/;
 function renderChatMessage(body, from, allowEmojiRender) {
-  const matches = body.match(bubbleColorRegEx);
+  const { content, emoji, multiline } = messageBodyDom(body, from, null, null, styles.emoji);
+  const isEmoji = allowEmojiRender && emoji;
+  const el = document.createElement("div");
+  el.setAttribute("class", `${styles.presenceLog} ${styles.presenceLogSpawn}`);
+  document.body.appendChild(el);
+
   let bubbleColor;
+  const matches = body.match(bubbleColorRegEx);
   if (matches) {
     matches.shift();
     bubbleColor = matches[1];
     body = matches.reduce((acc, cur) => acc.replace(cur, ""), body);
   }
 
-  const { content, emoji, multiline } = messageBodyDom(body, from, null, null, styles.emoji);
-  const isEmoji = allowEmojiRender && emoji;
-  const el = document.createElement("div");
-  el.setAttribute("class", `${styles.presenceLog} ${styles.presenceLogSpawn}`);
-  document.body.appendChild(el);
-
   const entryDom = (
     <div
       className={classNames({
@@ -64,7 +64,7 @@ function renderChatMessage(body, from, allowEmojiRender) {
         [styles.presenceLogEntryOneLine]: !isEmoji && !multiline,
         [styles.presenceLogEmoji]: isEmoji
       })}
-      style={{ backgroundColor: `${bubbleColor}` }}
+      style={bubbleColor && { backgroundColor: `${bubbleColor}` }}
     >
       {content}
     </div>