update

_layouts/embed.html

@@ -33,7 +33,7 @@
     <header class="site-header">
         <div class="header-left">
             <h1 class="site-title">prompts.chat/embed</h1>
-            <p class="site-slogan">Design and share beautiful AI prompts</p>
+            <p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
         </div>
         <div class="header-right">
             <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
@@ -56,6 +56,9 @@
                                  class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
                                  rows="8"
                                  placeholder="Enter your prompt..."></textarea>
+                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
+                            Load example →
+                        </button>
                     </div>
                     
                     <!-- Model & Mode -->
@@ -226,12 +229,9 @@
             
             <!-- Generate Buttons - Fixed at bottom -->
             <div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
-                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
+                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
                     Generate Embed Code
                 </button>
-                <button id="copy-url" class="w-full bg-dynamic-muted text-dynamic-foreground p-3 rounded-lg font-medium hover:bg-opacity-80 transition-opacity border border-dynamic-border">
-                    Copy Share URL
-                </button>
                 <div class="pt-3 border-t border-dynamic-border">
                     <button id="reset-settings" class="w-full text-dynamic-muted-foreground p-2 text-sm hover:text-dynamic-foreground transition-colors">
                         Reset All Settings
@@ -249,6 +249,12 @@
                         <!-- Preview iframe will be injected here -->
                     </div>
                 </div>
+                <div class="mt-4 space-y-1">
+                    <label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
+                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
+                        &lt;iframe src="..."&gt;&lt;/iframe&gt;
+                    </div>
+                </div>
             </div>
         </div>
     </div>

_site/embed-script.js

@@ -75,6 +75,7 @@ class EmbedDesigner {
         this.setupDesignerEvents();
         this.setupDesignerColors();
         this.updatePreview();
+        this.updateIframeSnippet();
     }
     
     setupDesignerElements() {
@@ -260,8 +261,8 @@ class EmbedDesigner {
         // Generate embed button
         document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal());
         
-        // Copy URL button
+        // Iframe snippet click to copy
-        document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL());
+        document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode());
         
         // Reset settings button
         document.getElementById('reset-settings').addEventListener('click', () => {
@@ -283,9 +284,15 @@ class EmbedDesigner {
                 // Update UI to reflect defaults
                 this.setupDesignerElements();
                 this.updatePreview();
+                this.updateIframeSnippet();
             }
         });
         
+        // Load example button
+        document.getElementById('load-example').addEventListener('click', () => {
+            this.loadExample();
+        });
+        
         // Modal events
         document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal());
         document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode());
@@ -325,6 +332,17 @@ class EmbedDesigner {
         
         this.updatePreview();
         this.saveToLocalStorage();
+        this.updateIframeSnippet();
+    }
+    
+    updateIframeSnippet() {
+        const snippet = document.getElementById('iframe-snippet');
+        if (!snippet) return;
+        
+        const code = this.generateEmbedCode();
+        // Show a shortened version in the snippet
+        const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' ');
+        snippet.textContent = shortCode;
     }
     
     setupDesignerColors() {
@@ -440,6 +458,12 @@ class EmbedDesigner {
         this.showNotification('Share URL copied to clipboard!');
     }
     
+    async copyIframeCode() {
+        const embedCode = this.generateEmbedCode();
+        await this.copyToClipboard(embedCode);
+        this.showNotification('Iframe code copied to clipboard!');
+    }
+    
     async copyToClipboard(text) {
         if (navigator.clipboard && window.isSecureContext) {
             await navigator.clipboard.writeText(text);
@@ -471,6 +495,31 @@ class EmbedDesigner {
             notification.classList.add('opacity-0');
         }, duration);
     }
+    
+    loadExample() {
+        // Set example data
+        this.config = {
+            prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.',
+            context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'],
+            model: 'claude-4-sonnet',
+            mode: 'agent',
+            thinking: true,
+            max: true,
+            lightColor: '#3b82f6',
+            darkColor: '#60a5fa',
+            height: '250',
+            themeMode: 'auto'
+        };
+        
+        // Update all form elements
+        this.setupDesignerElements();
+        this.updatePreview();
+        this.updateIframeSnippet();
+        this.saveToLocalStorage();
+        
+        // Show notification
+        this.showNotification('Example loaded!');
+    }
 }
 
 // Dark mode toggle function

_site/embed-style.css

@@ -375,3 +375,15 @@ input[type="color"]::-webkit-color-swatch {
 label {
     font-weight: 500;
 }
+
+/* Dark mode iframe snippet styling */
+body.dark-mode #iframe-snippet {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+}
+
+body.dark-mode #iframe-snippet:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.9);
+} 

_site/embed/index.html

@@ -33,7 +33,7 @@
     <header class="site-header">
         <div class="header-left">
             <h1 class="site-title">prompts.chat/embed</h1>
-            <p class="site-slogan">Design and share beautiful AI prompts</p>
+            <p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
         </div>
         <div class="header-right">
             <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
@@ -56,6 +56,9 @@
                                  class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
                                  rows="8"
                                  placeholder="Enter your prompt..."></textarea>
+                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
+                            Load example →
+                        </button>
                     </div>
                     
                     <!-- Model & Mode -->
@@ -226,12 +229,9 @@
             
             <!-- Generate Buttons - Fixed at bottom -->
             <div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
-                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
+                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
                     Generate Embed Code
                 </button>
-                <button id="copy-url" class="w-full bg-dynamic-muted text-dynamic-foreground p-3 rounded-lg font-medium hover:bg-opacity-80 transition-opacity border border-dynamic-border">
-                    Copy Share URL
-                </button>
                 <div class="pt-3 border-t border-dynamic-border">
                     <button id="reset-settings" class="w-full text-dynamic-muted-foreground p-2 text-sm hover:text-dynamic-foreground transition-colors">
                         Reset All Settings
@@ -249,6 +249,12 @@
                         <!-- Preview iframe will be injected here -->
                     </div>
                 </div>
+                <div class="mt-4 space-y-1">
+                    <label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
+                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
+                        &lt;iframe src="..."&gt;&lt;/iframe&gt;
+                    </div>
+                </div>
             </div>
         </div>
     </div>

embed-script.js

@@ -75,6 +75,7 @@ class EmbedDesigner {
         this.setupDesignerEvents();
         this.setupDesignerColors();
         this.updatePreview();
+        this.updateIframeSnippet();
     }
     
     setupDesignerElements() {
@@ -260,8 +261,8 @@ class EmbedDesigner {
         // Generate embed button
         document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal());
         
-        // Copy URL button
+        // Iframe snippet click to copy
-        document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL());
+        document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode());
         
         // Reset settings button
         document.getElementById('reset-settings').addEventListener('click', () => {
@@ -283,9 +284,15 @@ class EmbedDesigner {
                 // Update UI to reflect defaults
                 this.setupDesignerElements();
                 this.updatePreview();
+                this.updateIframeSnippet();
             }
         });
         
+        // Load example button
+        document.getElementById('load-example').addEventListener('click', () => {
+            this.loadExample();
+        });
+        
         // Modal events
         document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal());
         document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode());
@@ -325,6 +332,17 @@ class EmbedDesigner {
         
         this.updatePreview();
         this.saveToLocalStorage();
+        this.updateIframeSnippet();
+    }
+    
+    updateIframeSnippet() {
+        const snippet = document.getElementById('iframe-snippet');
+        if (!snippet) return;
+        
+        const code = this.generateEmbedCode();
+        // Show a shortened version in the snippet
+        const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' ');
+        snippet.textContent = shortCode;
     }
     
     setupDesignerColors() {
@@ -440,6 +458,12 @@ class EmbedDesigner {
         this.showNotification('Share URL copied to clipboard!');
     }
     
+    async copyIframeCode() {
+        const embedCode = this.generateEmbedCode();
+        await this.copyToClipboard(embedCode);
+        this.showNotification('Iframe code copied to clipboard!');
+    }
+    
     async copyToClipboard(text) {
         if (navigator.clipboard && window.isSecureContext) {
             await navigator.clipboard.writeText(text);
@@ -471,6 +495,31 @@ class EmbedDesigner {
             notification.classList.add('opacity-0');
         }, duration);
     }
+    
+    loadExample() {
+        // Set example data
+        this.config = {
+            prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.',
+            context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'],
+            model: 'claude-4-sonnet',
+            mode: 'agent',
+            thinking: true,
+            max: true,
+            lightColor: '#3b82f6',
+            darkColor: '#60a5fa',
+            height: '250',
+            themeMode: 'auto'
+        };
+        
+        // Update all form elements
+        this.setupDesignerElements();
+        this.updatePreview();
+        this.updateIframeSnippet();
+        this.saveToLocalStorage();
+        
+        // Show notification
+        this.showNotification('Example loaded!');
+    }
 }
 
 // Dark mode toggle function

embed-style.css

@@ -375,3 +375,15 @@ input[type="color"]::-webkit-color-swatch {
 label {
     font-weight: 500;
 }
+
+/* Dark mode iframe snippet styling */
+body.dark-mode #iframe-snippet {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+}
+
+body.dark-mode #iframe-snippet:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.9);
+}