diff --git a/src/doctools.css b/src/doctools.css
index f4e11cd9..ee09b62b 100644
--- a/src/doctools.css
+++ b/src/doctools.css
@@ -7,13 +7,31 @@
  **/
 @layer defaults {
   :root[data-readthedocs-tool="docusaurus"] {
-    --readthedocs-flyout-header-font-size: 0.9rem;
+    --readthedocs-flyout-header-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="docsify"] {
+    --readthedocs-notification-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="asciidoctor"] {
+    --readthedocs-notification-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="antora"] {
+    --readthedocs-notification-font-size: 0.8rem;
+  }
+
+  :root[data-readthedocs-tool="jekyll"] {
+    --readthedocs-notification-font-size: 0.9rem;
   }
 
   :root[data-readthedocs-tool="mkdocs-material"] {
-    --readthedocs-font-size: 0.58rem;
-    --readthedocs-flyout-header-font-size: 0.7rem;
-    --readthedocs-flyout-font-size: 0.58rem;
+    --readthedocs-font-size: 0.65rem;
+    --readthedocs-flyout-header-font-size: 0.75rem;
+    --readthedocs-flyout-font-size: 0.65rem;
+
+    --readthedocs-notification-font-size: 0.75rem;
   }
 
   :root[data-readthedocs-tool="antora"] {
@@ -29,9 +47,11 @@
   }
 
   :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
-    --readthedocs-font-size: 0.725rem;
-    --readthedocs-flyout-header-font-size: 0.845rem;
-    --readthedocs-flyout-font-size: 0.725rem;
+    --readthedocs-font-size: 0.9rem;
+    --readthedocs-flyout-header-font-size: 0.9rem;
+    --readthedocs-flyout-font-size: 0.8rem;
+
+    --readthedocs-notification-font-size: 0.9rem;
   }
 
   :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
@@ -39,4 +59,9 @@
     --readthedocs-flyout-header-font-size: 0.7rem;
     --readthedocs-flyout-font-size: 0.58rem;
   }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="alabaster"] {
+    --readthedocs-flyout-header-font-size: 0.95rem;
+    --readthedocs-notification-font-size: 0.9rem;
+  }
 }
diff --git a/src/notification.js b/src/notification.js
index aca8f11e..3261bd74 100644
--- a/src/notification.js
+++ b/src/notification.js
@@ -47,6 +47,7 @@ export class NotificationElement extends LitElement {
     this.localStorageKey = null;
     this.dismissedTimestamp = null;
     this.autoDismissed = false;
+    this.autoDismissEnabled = true;
 
     // Trigger the auto-dismiss timer at startup
     this.triggerAutoDismissTimer();
@@ -66,7 +67,7 @@ export class NotificationElement extends LitElement {
   }
 
   triggerAutoDismissTimer() {
-    if (!document.hidden && !this.autoDismissed) {
+    if (this.autoDismissEnabled && !document.hidden && !this.autoDismissed) {
       clearTimeout(this.timerID);
       this.timerID = setTimeout(() => {
         this.autoDismissed = true;
@@ -414,6 +415,15 @@ export class NotificationAddon extends AddonBase {
   static addonEnabledPath = "addons.notifications.enabled";
   static addonName = "Notification";
   static elementClass = NotificationElement;
+  static elementInjectBehavior = "prepend";
+
+  setupInitialBehavior() {
+    for (const element of this.elements) {
+      element.autoDismissEnabled = false;
+      element.clearAutoDismissTimer();
+      element.className = "raised";
+    }
+  }
 }
 
 customElements.define(NotificationElement.elementName, NotificationElement);
diff --git a/src/utils.js b/src/utils.js
index 0037331f..c14d15c0 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -97,15 +97,53 @@ export class AddonBase {
       if (!this.elements.length) {
         this.elements = [new this.constructor.elementClass()];
 
-        // We cannot use `render(this.elements[0], document.body)` because there is a race conditions between all the addons.
-        // So, we append the web-component first and then request an update of it.
-        document.body.append(this.elements[0]);
+        const injectBehavior = this.constructor.elementInjectBehavior;
+        const selector = this.getElementInjectSelector();
+        const elementSelector =
+          document.querySelector(selector) || document.querySelector("body");
+
+        // Setup the initial behavior only if we are using a custom position for it.
+        if (elementSelector.tagName.toLocaleLowerCase() !== "body") {
+          this.setupInitialBehavior();
+        }
+
+        if (injectBehavior === "prepend") {
+          elementSelector.prepend(this.elements[0]);
+        } else if (injectBehavior === "append") {
+          elementSelector.append(this.elements[0]);
+        } else {
+          // We cannot use `render(this.elements[0], document.body)` because there is a race conditions between all the addons.
+          // So, we append the web-component first and then request an update of it.
+          document.body.append(this.elements[0]);
+        }
       }
     }
 
     this.loadConfig(config);
   }
 
+  /**
+   * Setup the initial behavior of the addon after instatiated.
+   *
+   * There are some addons we want to behave differently if we are injecting
+   * them into a known position in the page, using a custom CSS selector.
+   *
+   * This method has to be overriden by the addon.
+   */
+  setupInitialBehavior() {
+    return null;
+  }
+
+  /**
+   * Returns the selector where the element has to be injected.
+   *
+   * The element will be "appended" or "prepended" based on
+   * `elementInjectBehavior` static class property.
+   */
+  getElementInjectSelector() {
+    return docTool.getRootSelector() || "body";
+  }
+
   loadConfig(config) {
     for (const element of this.elements) {
       element.loadConfig(config);