build.js

@@ -86,26 +86,31 @@ function generateIframe(css, html, js) {
 }
 
 /**
- * No transformation needed - keep original class names for consistency
+ * Transform CSS classes from dog-calculator- to dog-calc-
  */
 function transformCSSForWidget(css) {
-    return css;
+    return css
+        .replace(/\.dog-calculator-/g, '.dog-calc-')
+        .replace(/#dog-calculator/g, '#dog-calc')
+        .replace(/dog-calculator-/g, 'dog-calc-');
 }
 
 /**
- * No transformation needed - keep original class names for consistency
+ * Transform HTML for widget (class names and IDs)
  */
 function transformHTMLForWidget(html) {
-    return html;
+    return html
+        .replace(/dog-calculator-/g, 'dog-calc-')
+        .replace(/id="dogCalculator"/g, 'id="dogCalc"');
 }
 
 /**
  * Create production-ready widget JavaScript
  */
 function createWidgetJS(css, html, js) {
-    // Use original CSS and HTML without transformation for consistency
-    const widgetCSS = css;
-    const widgetHTML = html;
+    // Transform CSS and HTML for widget namespacing
+    const widgetCSS = transformCSSForWidget(css);
+    const widgetHTML = transformHTMLForWidget(html);
     
     const widgetCode = `/**
  * Dog Calorie Calculator Widget
@@ -129,10 +134,10 @@ function createWidgetJS(css, html, js) {
     const CSS_STYLES = \`${widgetCSS}\`;
     
     function injectStyles() {
-        if (document.getElementById('dog-calculator-styles')) return;
+        if (document.getElementById('dog-calc-styles')) return;
         
         const style = document.createElement('style');
-        style.id = 'dog-calculator-styles';
+        style.id = 'dog-calc-styles';
         style.textContent = CSS_STYLES;
         document.head.appendChild(style);
     }
@@ -230,9 +235,9 @@ function createWidgetJS(css, html, js) {
                     const errorElement = $('#' + elementId);
                     if (errorElement) {
                         if (show) {
-                            errorElement.classList.remove('dog-calculator-hidden');
+                            errorElement.classList.remove('dog-calc-hidden');
                         } else {
-                            errorElement.classList.add('dog-calculator-hidden');
+                            errorElement.classList.add('dog-calc-hidden');
                         }
                     }
                 },
@@ -423,7 +428,7 @@ function createWidgetJS(css, html, js) {
                 init: () => {
                     calc.bindEvents();
                     calc.updateUnitLabels(); // Initialize unit labels
-                    const calcContainer = $('#dogCalculator');
+                    const calcContainer = $('#dogCalc');
                     if (calcContainer) {
                         calcContainer.classList.add('loaded');
                     }

iframe.html

@@ -1036,19 +1036,19 @@
             <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
             <h3>Share Calculator</h3>
             <div class="dog-calculator-share-buttons">
-                <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
+                <button class="dog-calculator-share-btn dog-calculator-share-facebook" id="shareFacebook">
                     Facebook
                 </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
+                <button class="dog-calculator-share-btn dog-calculator-share-twitter" id="shareTwitter">
                     Twitter
                 </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
+                <button class="dog-calculator-share-btn dog-calculator-share-linkedin" id="shareLinkedIn">
                     LinkedIn
                 </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
+                <button class="dog-calculator-share-btn dog-calculator-share-email" id="shareEmail">
                     Email
                 </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
+                <button class="dog-calculator-share-btn dog-calculator-share-copy" id="shareCopy">
                     Copy Link
                 </button>
             </div>
@@ -1069,7 +1069,7 @@
                     <h4>⚡ JavaScript Widget</h4>
                     <div class="dog-calculator-code-container">
                         <pre><code id="widgetCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
+                        <button class="dog-calculator-copy-btn" id="copyWidget">
                             Copy
                         </button>
                     </div>
@@ -1079,7 +1079,7 @@
                     <h4>🛡️ iframe Embed</h4>
                     <div class="dog-calculator-code-container">
                         <pre><code id="iframeCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
+                        <button class="dog-calculator-copy-btn" id="copyIframe">
                             Copy
                         </button>
                     </div>