diff --git a/docs/donate_with_script.html b/docs/donate_with_script.html
new file mode 100644
index 0000000..3f364e3
--- /dev/null
+++ b/docs/donate_with_script.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spenden</title>
+</head>
+<body>
+<dialog style="
+    width: 540px; /* Increased size to accommodate padding and border */
+    max-width: 90vw; /* Make it responsive */
+    height: 540px; 
+    padding: 0; /* Remove dialog padding so iframe and button are at the edge */
+    ">
+<button style="
+
+        top: 0;              /* 👈 Align to top edge */
+        right: 0;            /* 👈 Align to right edge */
+        padding: 5px 10px;
+        border: none;
+        font-weight: bold;
+        position: absolute;  /* 👈 Take it out of normal flow */
+        z-index: 10;         /* 👈 Ensure it is above the iframe */
+    " onclick="this.closest('dialog').close()">x</button>
+   <div id="betterplace_donation_iframe" style="background: transparent url('https://www.betterplace.org/assets/new_spinner.gif') 275px 20px no-repeat;">
+       <strong><a href="https://www.betterplace.org/de/donate/platform/projects/138560-3d-druck-und-elektronik-ag">Jetzt Spenden für „3D-Druck und Elektronik AG" bei unserem Partner betterplace.org</a></strong>
+   </div>
+   <script src="https://www.betterplace.org/de/projects/138560-3d-druck-und-elektronik-ag/iframe_donation_form.js"></script>
+</dialog>
+<button onclick="document.querySelector('dialog').showModal()"
+style="
+    width: 540px; /* Increased size to accommodate padding and border */
+    max-width: 90vw; /* Make it responsive */
+    ">🙏 Direkt Spenden 🙏</button>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index ef38138..d88bdbe 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,12 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTML Sniplets</title>
+    <title>HTML Snippets</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        h1 {
+            color: #333;
+        }
+        h2 {
+            color: #666;
+            margin-top: 30px;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        li {
+            margin: 10px 0;
+        }
+        a {
+            color: #0066cc;
+            text-decoration: none;
+            font-size: 18px;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        .description {
+            color: #666;
+            font-size: 14px;
+            margin-left: 20px;
+        }
+    </style>
 </head>
 <body>
-    <h1>HTML Sniplets</h1>
+    <h1>HTML Snippets</h1>
     
-    <h2>Donate</h2>
-    <p><a href="donate.html">Donate Page</a> - Direct donation page with embedded donation form as iframe</p>
+    <h2>Donate Pages</h2>
+    <ul>
+        <li>
+            <a href="donate.html">🙏 Donate Page (Direct iFrame)</a>
+            <div class="description">Direct donation page with embedded iframe (may be blocked by browser security)</div>
+        </li>
+        <li>
+            <a href="donate_with_script.html">🙏 Donate Page (JavaScript Embed)</a>
+            <div class="description">Direct donation page using betterplace.org's official JavaScript embed code</div>
+        </li>
+    </ul>
 </body>
 </html>
