White-Label Theme Demo

Back to Home

This demo showcases how mySmokerGrills.com can be white-labeled with custom CSS. You can modify the theme variables and see the changes in real-time.

In a real white-label implementation, these styles would be injected via postMessage from a parent window.

Loading theme demo...

Integration Guide

1. Embed the App in an iframe

<iframe 
  id="smokerGrillsApp" 
  src="https://mysmokergrills.com" 
  width="100%" 
  height="800px"
  style="border: none;"
></iframe>

2. Send Custom CSS with Variables

const iframe = document.getElementById("smokerGrillsApp");

// CSS template with variable placeholders
const css = `
  :root {
    --primary: {{primaryColor}};
    --background: {{backgroundColor}};
    --foreground: {{textColor}};
  }
  
  body {
    font-family: {{fontFamily}};
  }
`;

// Theme variables
const variables = {
  primaryColor: "#ff0000",
  backgroundColor: "#000000",
  textColor: "#ffffff",
  fontFamily: "Arial, sans-serif"
};

// Send the CSS and variables to the iframe
iframe.onload = () => {
  iframe.contentWindow.postMessage({ css, variables }, "https://mysmokergrills.com");
};

3. Receive Confirmation

// Listen for confirmation from the iframe
window.addEventListener("message", (event) => {
  if (event.origin === "https://mysmokergrills.com") {
    const { type, success, error } = event.data || {};
    
    if (type === "CSS_INJECTION_RESULT") {
      if (success) {
        console.log("CSS injected successfully!");
      } else {
        console.error("CSS injection failed:", error);
      }
    }
  }
});