Private widget for GoHighLevel power users & dev teams
This Widget lets you drop fully custom, Claude-generated page code into a scoped, production-safe widget that plays nicely with your funnels, forms, tracking, and page builder.
Ideal for: dev-focused agencies, template libraries, and teams shipping high-end funnels at scale.
At a high level, the widget gives you a safe sandbox inside a page where you can render the HTML/CSS/JS exported from Claude based on your Figma design. Everything is namespaced and wired into events so your code stays isolated but fully functional.
Create your landing page or funnel in Figma using your design system. Keep frames cleanly grouped into desktop and mobile variants.
Use Claude’s code generation prompt to translate your Figma frame into a single HTML file with scoped CSS and optional JS. Follow the project structure and constraints defined below.
Inside page builder, open the Figma Page Widget, paste your page code into the editor, tweak mobile overrides if needed, and verify everything in the live preview before publishing.
Each widget instance is a self-contained runtime for your page code, with specialized tooling for high-velocity experimentation and safe deployment to funnels.
Paste or edit your generated HTML/CSS/JS directly inside page builder. The editor enforces a single-page template structure with proper scoping hooks and safety guards.
The preview frame renders your code inside the same isolation layer used in production, so what you see in the widget is exactly what web visitors will get.
Reference images, fonts, and static assets via a centralized asset manager. Use CDN URLs or your domain hosted media, and keep paths consistent across pages.
Use helper classes and mobile-only blocks to adjust layout, spacing, and visibility at the widget’s default breakpoint (max-width: 767px).
Trigger events for forms, buttons, and custom conversions. The widget exposes a small JS bridge for interacting with your tracking layer.
Your styles are automatically namespaced to the widget container. JS runs in an isolated context with a safe API surface for talking to your system only where needed.
Each page rendered by the widget is a single HTML document with three main layers: a root wrapper, a scoped style block, and an optional isolated script block.
<!-- GHL Figma Page Widget template -->
<div id="ghl-figma-root" class="ghl-figma-page">
<main class="page">
<!-- Your Claude-generated layout here -->
</main>
</div>
<style>
/* Scoping: always prefix with #ghl-figma-root */
#ghl-figma-root {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter Tight", sans-serif;
background: #0f172a;
color: #f9fafb;
}
#ghl-figma-root .hero {
padding: 80px 20px;
}
@media (max-width: 767px) {
#ghl-figma-root .hero {
padding: 40px 16px;
}
}
</style>
<script>
// Optional: isolated JS runtime
(function () {
const root = document.getElementById('ghl-figma-root');
if (!root) return;
// Example: track CTA click via GHL bridge
root.querySelectorAll('[data-cta="primary"]')
.forEach(btn => btn.addEventListener('click', function () {
if (window.ghlFigmaWidget) {
window.ghlFigmaWidget.track('cta_click', { id: 'primary' });
}
}));
})();
</script>From install to live traffic in under 15 minutes, assuming you already have a Figma frame and Claude prompt ready.
No changes required to your existing theme
Ideal for isolated sections or full-page takeovers
Roll back instantly by hiding/removing the widget
1. Install the Designed Page Widget from your private Marketplace link.
2. Open any funnel step or website page and drag the widget into the canvas.
3. In a new tab, open your Figma file and identify the frame you want to ship (desktop first, then mobile).
4. Use your Claude prompt to generate the HTML/CSS/JS that matches the project structure above.
5. Copy the full snippet and paste it into the widget’s Code editor.
6. Use the Preview tab to verify layout, links, forms, and animations.
7. Save the page, test on a staging URL, then publish when you’re satisfied.
A repeatable path from Figma to production, optimized for fast iteration and analytics-driven experimentation.
Lock your Figma frame (desktop + mobile), document interactions, and annotate edge states (errors, success, hover, etc).
Feed Claude a structured prompt that includes the project template, constraints, and any integration requirements (forms, tracking, modals).
Paste code into the widget, connect any data attributes to forms or events, and use the live preview to validate flows and responsive behavior.
Ship to production, watch funnel metrics and push variants by updating the same widget instance without touching the rest of the page.
Implementation notes for developers integrating with complex stacks or existing analytics setups.
All styles must be prefixed with #ghl-figma-root. The widget automatically wraps your code in a container with this ID, ensuring zero bleed into the parent page. Avoid global selectors like body, *, or unscoped tag selectors.
Your script is executed in an IIFE and receives no direct access to other widgets or page-level scripts. To talk to GHL, use the provided bridge if available:
window.ghlFigmaWidget.track(eventName, payload)
window.ghlFigmaWidget.openPopup(id)
You can either embed a native form inside your HTML or post to existing endpoints. For tracking-only CTAs, use data attributes and fire bridge events instead of relying on page-level click listeners.
The widget assumes a primary breakpoint at max-width: 767px. Implement mobile overrides directly in your CSS using this breakpoint. Avoid relying on the parent GHL page’s responsive utilities—they will not automatically apply inside the widget.
To keep pages stable, fast, and compatible with GHL updates, the widget enforces a few guardrails. Design your Claude prompts with these in mind.
You can treat the widget as a versioned runtime. Page implementations live inside GHL accounts, while widget behavior ships via Marketplace updates.