> ## Documentation Index > Fetch the complete documentation index at: https://docs.blacksmith.sh/llms.txt > Use this file to discover all available pages before exploring further. # Proof > Evidence that a pull request does what it claims, posted next to the diff. export const ProductEmbed = ({story, title, width, height}) => { const productionOrigin = "https://docs-embeds.blacksmith.sh"; const knownOrigin = () => { if (typeof window === "undefined") return undefined; if (!(/^localhost$|\.mintlify\.(app|site)$/).test(window.location.hostname)) return productionOrigin; return window.__blacksmithEmbedOrigin; }; const designWidth = width || 960; const designHeight = height || 600; const frameRef = useRef(null); const [embedOrigin, setEmbedOrigin] = useState(knownOrigin); const [ready, setReady] = useState(false); const [live, setLive] = useState(false); const [requested, setRequested] = useState(false); useEffect(() => { const frame = frameRef.current; const box = frame && frame.parentElement; if (requested || !box) return undefined; const request = () => setRequested(true); const observer = new IntersectionObserver(entries => { if (entries.some(entry => entry.isIntersecting)) request(); }, { rootMargin: "100px 0px" }); observer.observe(box); frame.addEventListener("blacksmith-embed-load", request); return () => { observer.disconnect(); frame.removeEventListener("blacksmith-embed-load", request); }; }, [embedOrigin, requested]); useEffect(() => { if (embedOrigin) return undefined; const resolve = () => setEmbedOrigin(knownOrigin() || productionOrigin); if (knownOrigin()) return resolve(); window.addEventListener("blacksmith-embed-origin", resolve); const timer = setTimeout(resolve, 5000); return () => { window.removeEventListener("blacksmith-embed-origin", resolve); clearTimeout(timer); }; }, [embedOrigin]); useEffect(() => { const frame = frameRef.current; const box = frame && frame.parentElement; if (!box) return undefined; const fit = () => { frame.style.transform = `scale(${box.clientWidth / designWidth})`; }; fit(); const observer = new ResizeObserver(fit); observer.observe(box); return () => observer.disconnect(); }, [designWidth, embedOrigin]); useEffect(() => { const onMessage = event => { if (event.origin !== embedOrigin) return; if (!frameRef.current || event.source !== frameRef.current.contentWindow) return; if (event.data && event.data.source === "blacksmith-docs-embed" && event.data.type === "ready") { setReady(true); if (!event.data.snapshot) setLive(true); } }; window.addEventListener("message", onMessage); return () => window.removeEventListener("message", onMessage); }, [embedOrigin]); if (!embedOrigin) return null; return