Using AI-Generated HTML for GLM Landing Pages

A Guide for Building Program-Specific Pages with Claude (or Similar Tools)

Who this guide is for: Gym owners who want to use an AI tool like Claude to generate custom HTML for a short-term program landing page inside Gym Lead Machine (GLM).

What this guide covers: How GLM works with custom code, how to prompt your AI tool for code that actually renders correctly the first time, how to build your page inside GLM step by step, and how to make updates later without needing to know how to code.

Before You Start: A Few Important Things to Know

This approach is for short-term, program-specific landing pages

Custom HTML pages work best for promoting a specific, time-bound offer: a 6-week challenge, a nutrition program launch, a member waitlist, a seasonal transformation program. They're great for collecting leads when you want to represent a very specific program or event.

This approach is NOT for:

Your main website or permanent marketing pages
Pages you expect to update frequently with new content
Pages that need complex integrations beyond a lead capture form or link out for purchasing
Long-form content that needs to be edited often

For updates or requests related to your main website, please contact Kilo support through the standard channel or complete the appropriate Request Form.

Custom code pages are maintained through code, not through the drag-and-drop builder

This is the most important thing to understand before you begin. GLM has two completely separate ways to build a landing page:

The drag-and-drop builder (what most clients use): You add rows, columns, text blocks, image blocks, and form blocks by dragging them into place. You edit them by clicking on them and typing.
Custom Code blocks: You paste HTML code into a special block. Once the code is in there, it renders as designed, but it can only be edited by changing the code itself. There is no way to click on a headline or an image inside a code block and edit it with the drag-and-drop tools.

Think of it like the difference between a document open on your computer (where you can drag things around) and that same document printed out (where everything is locked in place). Once your custom code is in GLM, it's “printed.” Changes have to happen at the source.

This means that once you commit to building a page this way, all future updates need to come from your AI tool. Kilo support cannot edit the code for you. You'll handle updates by going back to Claude (or whichever AI tool you're using), asking for the updated code, and pasting it into the existing block in GLM. This guide walks you through exactly how to do that.

If you'd rather avoid code entirely, we would point you toward the standard drag-and-drop approach.

📽️ Full video walkthrough of prepaing and building page.

Part 1: Prompting Your AI Tool for GLM-Friendly Code

Most of the problems people run into with AI-generated landing pages come from how the AI is prompted. If you give your AI tool clear context about what GLM can and can't handle, the code comes out much better on the first try.

What to Include in Your Prompt

When you ask Claude (or any AI tool) to build your landing page, include all of the following in your prompt:

1. Tell the AI what platform the page is for.

Let it know the page will live inside Gym Lead Machine (GLM), which runs on Go HighLevel. GLM has its own quirks, and the AI will write better code if it knows where the page is going.

2. Ask for the page in separate, numbered sections.

Instead of one big chunk of code, you want the AI to hand back the page in pieces, like Block 0, Block 1, Block 2, and so on. Each piece is one section of the page (the hero at the top, the pricing area, the FAQ, etc.). Numbered pieces make it obvious what to paste where in GLM and easy to update one section later without touching the rest.

3. Ask for code that fits inside GLM, not a full standalone webpage.

Tell the AI not to include <!DOCTYPE>, <html>, <head>, or <body> tags. Those are the wrappers a normal webpage uses, but GLM already provides them. If they show up in your code, GLM will fight with them and the page will look broken.

4. Ask for a Setup Block at the very top of the page (this is Block 0).

This is the most important fix in this guide. Block 0 is a small piece of code you paste in as the first thing on your page. It does two jobs:

It locks in your fonts so they don't get overridden by GLM and turn into Times New Roman on the live page.
It forces every section of your page to span edge to edge on desktop. Without this, you'll see white margins on the left and right of your colored backgrounds, even with GLM's full-width row setting turned on.

Be very clear in your prompt that Block 0 should be returned as a normal block of code that you paste into the page like any other block. It is not something you paste into GLM's Custom CSS settings. The sample prompt below spells this out for the AI in the exact words it needs.

5. Give the AI a label to put on every CSS class name.

This sounds technical, but it just means the AI puts a short label like myprogram- or reset- in front of every style name in the code. The label keeps your styles separate from GLM's built-in styles so they don't fight each other. Pick anything short, all lowercase, no spaces. The AI will do the rest.

6. Ask for each section's styles to stay inside that section.

This makes sure the styling for one section doesn't accidentally change another section. The AI knows what this means - just include the line in your prompt and it'll handle it.

7. Tell the AI not to build a form into the code, and not to give you a GLM form to embed.

This is one of the most common places where things go wrong, so it's worth being firm with your AI. Forms work best when they're added directly inside GLM as their own element, not pasted in as code. Specifically, ask the AI to:

Skip building any form fields (no name field, no email field, no submit button) into the code.
Skip giving you a GLM form embed code or iframe to paste in. Embedding a form inside a code block causes spacing and sizing problems that are very hard to fix.
Instead, just leave a small placeholder note in the code where the form should go, and tell you which two blocks the form should sit between (for example, “Add the form between Block 8 and Block 9”).

You'll then add the form yourself, the normal way, by dragging a GLM Form element into a row between those two blocks.

8. Tell the AI what every button on the page should do.

Be specific. Buttons can either scroll the visitor down to a form on the same page, or send them to a different URL. Both options work. The AI just needs to know which one you want for each button. For example:

“The hero button and the pricing button should both scroll down to the form on this page.”
“The pricing button should link out to https://stripe.com/checkout/abc123 and open in a new tab.”
“The final CTA button should link to my main website at https://mygym.com and open in a new tab.”

You can mix and match. Common places clients link buttons out to:

Their main website's info or calendar page
A direct link to a hosted GLM form (you can grab this URL by opening the form in GLM and copying the share link)
A Kilo Gym Management or other checkout page

If all of your buttons link out and you're not using an on-page form at all, just say so. The AI will skip the form placeholder entirely.

9. Ask the AI to lock in your custom fonts.

GLM's default styling can quietly override custom fonts and turn your beautiful page back into Times New Roman the moment you publish it. Tell the AI to use !important on every font setting. It will know what that means - those words tell the AI's code to win the fight against GLM's defaults.

10. Ask for a mobile-friendly version of every section.

Just include the phrase “include a @media(max-width:600px) rule in every section so it works on mobile.” That's the AI's cue to make every section stack neatly on a phone instead of cramming everything side by side.

11. Give the AI your brand details.

Include your brand colors as hex codes if you have them (for example, #91b840 for green). Include your website URL so the AI can look at your existing style. Mention any font preferences (“Poppins,” “something clean and modern,” “feels warm and welcoming” - all helpful). The more the AI knows about your brand, the more on-brand the page will feel.

12. Tell the AI what the page is for.

Describe the program, who it's for, what's included, the price, and what you want people to do (join a waitlist, book a call, sign up). The more specific and personal you are here, the better the copy on your page will sound. Don't be afraid to include the vibe you want too: “Warm and encouraging, not intimidating, for people who haven't worked out in years” will give you very different copy than “High-energy, competitive, for athletes pushing for a PR.”

A Sample Prompt You Can Use

Copy, customize, and paste this prompt into Claude (or your AI tool of choice). Replace anything in square brackets with your own details before sending.

I need you to build a landing page for a program I'm running at my gym. The page will be hosted on Gym Lead Machine (GLM), which is built on Go HighLevel. Please follow these technical requirements exactly.

Output format

Return the page as separate HTML section blocks, one per section. Label them clearly: Block 0 of X, Block 1 of X, Block 2 of X, and so on, in the order I should paste them into GLM, top to bottom.
Each block must be a self-contained HTML fragment. Do NOT include <!DOCTYPE>, <html>, <head>, or <body> tags anywhere.
Prefix every CSS class name with glmpage- so my styles don't collide with GLM's. Use this same prefix on the section element of every block (for example, <section class="glmpage-hero">).
Each section block should have its own scoped <style> block that only targets its own prefixed classes.
Use !important on every font-family declaration so GLM's global styles don't override them.
Include a @media(max-width:600px) rule in every section so it works on mobile and stacks columns to a single column where appropriate.

Block 0: the Setup Block (please read carefully)

The first block you return must be Block 0, a Setup Block. This is a paste-in HTML block that I'll drop into the very top row of my page as a Custom Code element. It is NOT instructions for me to paste into GLM's Custom CSS field. Generate it as actual HTML I'll paste into a Custom Code element in the page itself.

Block 0 must contain a single <style> tag that does two things:

Forces my custom font family on every section that starts with my prefix, using !important on font-family declarations. Apply this to the section, all descendants, and headings (h1, h2, h3).
Forces full-width rendering on desktop. GLM wraps Custom Code elements in row, section, and wrapper containers that have default max-widths and side padding, which leaves white margins on either side of my colored backgrounds. Block 0 needs to override these.

Specifically, Block 0 must include CSS that:

Targets GLM's row and section wrapper classes (.c-section, .c-wrapper, .c-row, .row, .row-wrapper, .hl-page-row, .hl-row, .hl-section, and any div[class*="row"] or div[class*="Row"]) and forces max-width: 100% !important, width: 100% !important, and zero left/right padding and margin with !important.
Targets every section that starts with my prefix (section[class^="[YOUR PREFIX]-"]) and forces it to span the full viewport using margin-left: calc(-50vw + 50%) !important, margin-right: calc(-50vw + 50%) !important, width: 100vw !important, and max-width: 100vw !important.

Return Block 0 as a labeled HTML block I can paste into a Custom Code element. Do not describe it in plain English, and do not tell me to paste any of it into GLM's Custom CSS field.

On-page form behavior (read this even if you think you know how to do it)

Do NOT include any raw HTML form inputs, no <form> tag, no <input> fields, no GLM form embed code, and no iframes.
If the page should include an on-page lead form, leave a single placeholder comment in the appropriate spot like  and tell me clearly which two blocks the form should be added between (for example, “Add a native GLM Form element between Block 8 and Block 9”). I'll add the native form in GLM directly, as its own row.
If a button should scroll to that form, place a scroll target <div id="form-anchor"></div> inside the block immediately above where the form will live, and have every scroll button use href="#form-anchor".
If a button should link to an external URL, use a proper <a href="..."> tag with target="_blank" and rel="noopener" so it opens in a new tab.

My brand details

Business name: [YOUR GYM NAME]
Website: [YOUR WEBSITE URL]
Brand colors: [PRIMARY HEX], [SECONDARY HEX], [ACCENT HEX]
Preferred font family: [FONT STACK, or say “clean modern sans-serif”]
Class prefix to use on every class: glmpage- [gym owner may change if preferred]

Button destinations

Primary buttons (hero, pricing section, final CTA) should: [CHOICE A: scroll to an on-page GLM form / CHOICE B: link to this URL: [PASTE URL HERE] and open in a new tab]
If any buttons should go to different destinations, list them here: [for example, “The pricing button should go to https://stripe.com/checkout/abc123, but the hero and final CTA buttons should scroll to the form”]

About the program

Name: [PROGRAM NAME]
Length: [DURATION]
Who it's for: [TARGET AUDIENCE]
What's included: [LIST OF DELIVERABLES]
Price: [PRICE]
Main call to action: [JOIN WAITLIST / BOOK A CALL / ENROLL NOW / etc.]
Vibe and tone: [warm and encouraging / hard-charging and competitive / clean and clinical / etc.]
Key sections I want on the page: hero, problem statement, program overview, what's included, pricing, FAQ, final call to action

Final reminders

Please label every block clearly as “Block 0 of X,” “Block 1 of X,” and so on, in the order I should paste them into GLM, top to bottom.
Do not use em-dashes anywhere in the copy. Use hyphens, periods, or restructured sentences instead.
After the last block, please tell me exactly which two blocks the native GLM Form element should be added between (if I'm using one).

After the AI Gives You the Code

Before you bring the code to GLM:

Read through the copy in Claude's preview and make sure it sounds like your brand
Ask the AI to rewrite any sections where the tone feels off
Ask for revisions until you're happy with how it reads

You don't want to paste everything into GLM, realize the copy needs work, and then have to redo it one block at a time. Get the content right first.

Part 2: Building the Page in GLM

Once you have your sectioned code ready, here's how to build the page inside GLM. There's a short video walkthrough showing this process in action.

Step 1: Create a blank landing page

In GLM, navigate to your Websites or Funnels area and create a new blank landing page. Give it a clear name (for example, “Gut Reset Waitlist” or “6-Week Challenge Spring 2026”). Choose a blank template with no default header, footer, or pre-built sections.

Step 2: Add your first row

Click to add a new row. Set the row to Full Width (not “Boxed” or “Fixed”). Set column padding to 0 on the left and right. Do this for every row you add throughout the build. Block 0 (the Setup Block) reinforces full-width rendering with CSS, but starting with the right row settings keeps the editor preview cleaner.

Step 3: Add a Custom Code (HTML) element to the row

Inside the row, add a single column, and inside that column add a Custom Code / HTML element.

Step 4: Paste Block 0 (the Setup Block) into this first Custom Code element

Block 0 contains your font override and your full-width override CSS. Paste the entire block (the <style> tag and everything inside it) into this first Custom Code element. This block doesn't display anything visible on the page. It only sets the rules for everything below it.

Important: paste Block 0 into a Custom Code element on the page itself. Do not paste it into GLM's Custom CSS field. Block 0 belongs in the page's first row, like every other block.

Step 5: Paste Block 1 into the next Custom Code element

Add another row. Set it to Full Width with 0 padding left and right. Add a column. Drop in another Custom Code element. Paste the code for Block 1 (usually your hero section).

Step 6: Repeat for each block

For every block of code your AI tool gave you (Block 2, Block 3, Block 4, and so on):

Add a new row
Ensure the row is set to Full Width
Set column padding to 0 (left and right)
Add a Custom Code element
Paste the block's code
Save

Work in the order the AI gave them to you (Block 1, Block 2, Block 3, etc.).

Step 7: Add a native GLM Form element where the AI told you to (if using one)

If your page includes an on-page form (and not just buttons that link out to external URLs), the AI's response should have told you exactly which two blocks the native GLM Form element belongs between. In that position, add a new row, set it to Full Width with 0 left/right padding, and drop in a native GLM Form element. Select the form you've prepared for this page.

If you've not yet prepared a form, you can save the landing page and exit to Sites -> Forms. Configure the form with the fields you want to collect (name, email, phone, etc.). Often, it's simpler to duplicate and edit one of your existing forms.

Contact Kilo Support after the form is created and let us know the following. We can help you ensure the form is properly connected to collect leads into your GLM system.

The tag that should be applied to new leads from this form
The pipeline (if any) the lead should enter
The follow-up automation to trigger (a workflow you've created or the content of a single email)
Notifications for your team (who should be notified)

Important: Don't try to embed a GLM form code into a Custom Code block. The native GLM Form element added as its own row between two code blocks is the only approach that captures leads cleanly without spacing or sizing problems. The HTML code blocks and the GLM Form element exist as separate, stacked rows. They cannot be nested.

If your page uses buttons that link to external URLs (Kilo GMS, Stripe, an external signup form, etc.) instead of an on-page form, you can skip this step entirely.

Step 8: Preview and check

Click Save, then use Preview to see how the page looks. Always preview the published version in an incognito browser window, not just the GLM preview. The GLM preview sometimes caches old styles or doesn't reflect what the live page will look like.

Check for:

Fonts rendering correctly (not defaulting to Times New Roman)
Colored section backgrounds extending full width on desktop with no white margins on the sides
Mobile layout looking correct when you resize the browser or view on your phone
Buttons scrolling correctly to the form OR linking out to the right external URLs
External links opening in a new tab (if that's what you asked for)
The form capturing leads correctly (submit a test entry to yourself, if applicable)

Remember: If you have any issues with how the code is rendering in Gym Lead Machine, tell your AI tool what the issue is and how you need it addressed. Ask for updated code to paste into the code block in GLM. Kilo Support cannot help you update the code or identify code errors.

Step 9: Publish

When everything looks right, publish the page. Share the URL with your team and test the full lead flow from landing page to form submission (or external link destination) to follow-up.

Part 3: Troubleshooting Common Issues

The fonts look like Times New Roman on the live page

This is GLM's global stylesheet overriding your custom fonts. Make sure Block 0 (the Setup Block) is pasted into the very first Custom Code element on the page. If it's already there, go back to your AI tool and ask it to regenerate Block 0 with stronger !important flags on every font-family declaration, including on h1, h2, and h3 selectors specifically.

There are white margins on either side of the page on desktop

Block 0 is what fixes this on the live page. If you still see white margins after publishing, walk through these checks in order:

Confirm Block 0 is pasted into the very first Custom Code element on the page, before all other blocks.
Confirm every row containing a code block is set to Full Width and has column padding of 0 on the left and right.
If margins still appear, go back to your AI tool and ask it to add additional GLM container selectors to Block 0.
As a final fallback, copy the same <style> content from Block 0 and paste it into GLM's Custom CSS field (under page settings). This is belt-and-suspenders insurance, not the primary fix.

The page looks fine in GLM's preview but broken when published

GLM's builder preview can show cached or outdated styles. Always test in an incognito browser window using the published URL. If there's a genuine difference, it usually means a style is being overridden at publish time. Go back to your AI tool with a description of what's broken and ask for a revised block.

My mobile layout is stacked weirdly or cut off

Your sections may not have @media(max-width:600px) rules. Go back to your AI tool and ask specifically: “Please add mobile responsive rules to each block so columns stack to one column on screens under 600px wide.”

My on-page form isn't capturing leads

If the form on your page is anything other than a native GLM Form element added as its own row, it won't connect to your contact system. Specifically:

HTML form inputs inside Custom Code blocks do not connect to GLM's contact system. Delete any <input> fields from the code.
GLM form embed codes pasted inside Custom Code blocks cause spacing and sizing issues and bypass the cleanest tracking flow. Remove any embed code and replace with the placeholder comment.
The correct setup is a native GLM Form element added as its own row, between two code blocks, in the position your AI tool's notes specified.

The page is too wide or too narrow on desktop

The outer sections are full width by design. The inner content width is controlled by a max-width value on each block's inner wrapper (usually something like .[YOUR PREFIX]-hero-inner). Ask your AI tool to adjust this number. A common sweet spot is between 720px and 960px for the inner content while the outer section stays full width.

My button is linking to the wrong place, or isn't clickable

Open your page code and find the button in the block where it lives. Look for an <a href="..."> tag. The URL inside the quotes is where the button is pointing. If it's pointing to a scroll anchor like #form-anchor but you want it to link to a URL (or vice versa), ask your AI tool: “Please update the button in Block [X] to link to [your URL] and open in a new tab,” or “Please update the button in Block [X] to scroll to the on-page form instead of linking out.” Replace the block with the updated version.

My external link button is opening in the same tab and losing my page

If you want a button to open a URL in a new browser tab, the link needs target="_blank" and rel="noopener" attributes. Ask your AI tool to update the button in the relevant block to open in a new tab, then replace the block with the updated code.

My buttons aren't scrolling to the form

Each scroll button needs an href that matches an id somewhere else on the page. Make sure there's a <div id="form-anchor"></div> (or similar) placed right above your form, and that every button uses href="#form-anchor". If your AI tool didn't include this, ask it to add a scroll anchor near the form and update the button links accordingly.

Part 4: Making Updates After the Page Is Live

This is the most important section to bookmark.

The Golden Rule: Updates Happen in the Code, Not in GLM's Editor

Once your page is built from code blocks, you cannot edit the content by clicking on the text or images inside GLM. The only way to change what's on the page is to update the code. Your AI tool will do the hard part for you.

The Update Process

Open a new chat with your AI tool or return to the relevant chat. Claude is what we recommend, but any tool you used to generate the original code will work.
If you're working with a new tool, upload or paste the original code you used to build the page. Include all the blocks. If you saved a master copy of your page code somewhere (Google Drive, Notion, a text file), that's what you want to give the AI as context.
Tell the AI what you want to change, in plain English. For example:

“Change the price in Block 6 from $150 to $197.”
“Add a new FAQ item to Block 7 that asks ‘Is there a payment plan?’ with the answer ‘Yes, we offer a 2-payment option at checkout.’”
“Update the headline in Block 1 to say ‘The Spring Reset Challenge’ instead of ‘The Gut Reset Program.’”
“Change the early bird badge in Block 6 to say ‘Final 10 Spots’ instead of ‘Members First.’”
“Change the hero button in Block 1 to link to https://thisdomain.com/ and open in a new tab, instead of scrolling to the form.”

Ask the AI to return only the updated block or blocks. You don't need to regenerate the whole page for a small change. Say: “Please return only the updated Block 6 in full so I can paste-replace the existing block.”
In GLM, find the block that needs updating. Open the page in edit mode, find the Custom Code element that contains the code for that block, and click into it.
Delete the existing code and paste the new code. Select all, delete, paste new.
Save and preview in an incognito window.
Publish when you're satisfied.

The whole process takes a few minutes once you've done it once. You're not learning to code. You're asking a tool to rewrite code for you and then copying the new version into the right place.

What to Save for Future Updates

Keep a master copy of your page's code somewhere outside of GLM. A simple text file in Google Drive, a document in Notion, or a dedicated chat thread with your AI tool all work well. This way, when you want to make updates months later, you can hand the AI the full original context and get targeted updates back.

What You Can and Can't Do on Your Own

You CAN handle on your own, with your AI tool:

Content updates (copy changes, headline swaps, price changes)
Adding or removing items from a list (new FAQ, removed bullet)
Swapping out bullet text, button labels, section headlines
Changing button destinations (from one URL to another, or from an on-page scroll to an external URL)
Small visual tweaks (changing a color, adjusting spacing) if you ask the AI specifically

You CANNOT edit by other means:

Content inside a Custom Code block using the drag-and-drop tools
Text or images in the code by clicking on them in GLM's editor

Please contact Kilo support for:

Issues with your form not capturing leads
Pipeline, tag, or automation setup changes