diff --git a/website/core/Footer.js b/website/core/Footer.js
index 11c64103..912aa667 100755
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -13,70 +13,78 @@ function Footer(props) {
   const pageUrl = (doc) => baseUrl + (language ? `${language}/` : '') + doc;
 
   return (
-    <footer className="nav-footer" id="footer">
-      <section className="sitemap">
-        <a href={baseUrl} className="nav-home">
-          {config.footerIcon && (
-            <img
-              src={baseUrl + config.footerIcon}
-              alt={config.title}
-              width="52"
-              height="52"
-            />
-          )}
-        </a>
-        <div>
-          <h5>Docs</h5>
-          <a href={docUrl('getting-started.html')}>Getting Started</a>
-          <a href={docUrl('configuration.html')}>API Reference</a>
-          <a href={docUrl('continuous-integration.html')}>Guides</a>
-        </div>
-        <div>
-          <h5>Community</h5>
-          <a href={pageUrl('users.html')}>User Showcase</a>
-        </div>
-        <div>
-          <h5>More</h5>
-          <a href="https://github.com/oblador/loki">GitHub</a>
-          <a
-            className="github-button"
-            href={config.repoUrl}
-            data-icon="octicon-star"
-            data-count-href="/oblador/loki/stargazers"
-            data-show-count="true"
-            data-count-aria-label="# stargazers on GitHub"
-            aria-label="Star this project on GitHub"
-          >
-            Star
-          </a>
-          {config.twitterUsername && (
-            <div className="social">
-              <a
-                href={`https://twitter.com/${config.twitterUsername}`}
-                className="twitter-follow-button"
-              >
-                Follow @{config.twitterUsername}
-              </a>
-            </div>
-          )}
-          {config.facebookAppId && (
-            <div className="social">
-              <div
-                className="fb-like"
-                data-href={config.url}
-                data-colorscheme="dark"
-                data-layout="standard"
-                data-share="true"
-                data-width="225"
-                data-show-faces="false"
+    <>
+      <script
+        async
+        type="text/javascript"
+        src="//cdn.carbonads.com/carbon.js?serve=CEAIV2JN&placement=lokijsorg"
+        id="_carbonads_js"
+      ></script>
+      <footer className="nav-footer" id="footer">
+        <section className="sitemap">
+          <a href={baseUrl} className="nav-home">
+            {config.footerIcon && (
+              <img
+                src={baseUrl + config.footerIcon}
+                alt={config.title}
+                width="52"
+                height="52"
               />
-            </div>
-          )}
-        </div>
-      </section>
+            )}
+          </a>
+          <div>
+            <h5>Docs</h5>
+            <a href={docUrl('getting-started.html')}>Getting Started</a>
+            <a href={docUrl('configuration.html')}>API Reference</a>
+            <a href={docUrl('continuous-integration.html')}>Guides</a>
+          </div>
+          <div>
+            <h5>Community</h5>
+            <a href={pageUrl('users.html')}>User Showcase</a>
+          </div>
+          <div>
+            <h5>More</h5>
+            <a href="https://github.com/oblador/loki">GitHub</a>
+            <a
+              className="github-button"
+              href={config.repoUrl}
+              data-icon="octicon-star"
+              data-count-href="/oblador/loki/stargazers"
+              data-show-count="true"
+              data-count-aria-label="# stargazers on GitHub"
+              aria-label="Star this project on GitHub"
+            >
+              Star
+            </a>
+            {config.twitterUsername && (
+              <div className="social">
+                <a
+                  href={`https://twitter.com/${config.twitterUsername}`}
+                  className="twitter-follow-button"
+                >
+                  Follow @{config.twitterUsername}
+                </a>
+              </div>
+            )}
+            {config.facebookAppId && (
+              <div className="social">
+                <div
+                  className="fb-like"
+                  data-href={config.url}
+                  data-colorscheme="dark"
+                  data-layout="standard"
+                  data-share="true"
+                  data-width="225"
+                  data-show-faces="false"
+                />
+              </div>
+            )}
+          </div>
+        </section>
 
-      <section className="copyright">{config.copyright}</section>
-    </footer>
+        <section className="copyright">{config.copyright}</section>
+      </footer>
+    </>
   );
 }
 
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index aa4dda28..f7cc3a22 100755
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -147,3 +147,87 @@ body
     display: none;
   }
 }
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+  line-height: initial;
+}
+
+#carbonads {
+  --carbon-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  --carbon-font-size: 14px;
+  --carbon-padding: 1.5ch;
+  --carbon-max-char: 20ch;
+  --carbon-bg-primary: hsl(0, 0%, 98%);
+  --carbon-bg-secondary: hsl(0, 0%, 92%);
+  --carbon-text-color: hsl(0, 0%, 20%);
+  z-index: 10;
+  font-size: var(--carbon-font-size);
+  font-family: var(--carbon-font-family);
+}
+
+#carbonads > span {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 2rem auto;
+  min-inline-size: 130px;
+  max-inline-size: calc(130px + var(--carbon-max-char) + 8ch);
+  padding: var(--carbon-padding);
+  gap: var(--carbon-padding);
+  background-color: var(--carbon-bg-primary);
+  box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085),
+    0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085);
+}
+
+#carbonads a {
+  color: var(--carbon-text-color);
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: var(--carbon-text-color);
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5ex;
+}
+
+#carbonads .carbon-img {
+  flex: 0 0 130px;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  flex-grow: 1;
+  flex-basis: var(--carbon-max-char);
+  line-height: 1.4;
+  text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+  padding: 6px 8px;
+  background: var(--carbon-bg-secondary);
+  color: var(--carbon-text-color);
+  font-weight: 600;
+  font-size: 0.6em;
+  line-height: 1.4;
+  letter-spacing: 0.2ch;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+@media (prefers-color-scheme: dark) {
+  #carbonads {
+    --carbon-bg-primary: hsl(0, 0%, 12%);
+    --carbon-bg-secondary: hsl(0, 0%, 15%);
+    --carbon-text-color: hsl(0, 0%, 90%);
+  }
+}