From fccc18f51c2c7a089daa9fe5fd0cb31cd049eb1b Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Mon, 4 Jul 2022 16:11:53 +0200
Subject: [PATCH] Updated comment box location

---
 apps/comments-ui/src/index.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/comments-ui/src/index.js b/apps/comments-ui/src/index.js
index f14fe311bd..91623572b2 100644
--- a/apps/comments-ui/src/index.js
+++ b/apps/comments-ui/src/index.js
@@ -5,16 +5,24 @@ import './index.css';
 const ROOT_DIV_ID = 'ghost-comments-root';
 
 function addRootDiv() {
-    const elem = document.createElement('div');
-    elem.id = ROOT_DIV_ID;
-    document.body.appendChild(elem);
+    const scriptTag = document.querySelector('script[data-ghost-comments]');
+
+    // We need to inject the comment box at the same place as the script tag
+    if (scriptTag) {
+        const elem = document.createElement('div');
+        elem.id = ROOT_DIV_ID;
+        scriptTag.parentElement.insertBefore(elem, scriptTag);
+    } else {
+        // eslint-disable-next-line no-console
+        console.warn('Comment box location was not found: could not load comments box.');
+    }
 }
 
 function getSiteData() {
     /**
      * @type {HTMLElement}
      */
-    const scriptTag = document.querySelector('script[data-ghost]');
+    const scriptTag = document.querySelector('script[data-ghost-comments]');
     if (scriptTag) {
         const siteUrl = scriptTag.dataset.ghost;
         const apiKey = scriptTag.dataset.key;