Overview
AI Landing Pages
Prompt Claude, Lovable, Bolt, or v0 to design a custom, animated, multi-page landing page for your event. Gatsby wraps it with the RSVP frame and runs registration like a native template.
Premium Landing Pages, Built by AI
Section titled “Premium Landing Pages, Built by AI”Tell Claude, Lovable, Bolt, or v0 what you want. An animated globe that pulses with your event location. A custom typeface. A multi-page agenda with anchor-link navigation. A scroll-driven hero that introduces your speakers. The AI ships a fully designed site in minutes. Point Gatsby at the published URL, and Gatsby wraps it with the RSVP frame guests need to register, the confirmation email they receive, and the guest-list tracking your team relies on.
The design feels like you hired an agency. The registration plumbing comes with Gatsby.
What You Can Build Now
Section titled “What You Can Build Now”A new path opens up for the page guests land on. Describe what you want in plain language to a tool like Claude, Lovable, Bolt, or v0, and it produces a polished, custom-designed site in minutes. Animation, multi-page navigation, custom typography, a bespoke brand expression — anything you can describe in a prompt is on the table. The kind of page that used to mean an agency engagement now takes an afternoon.
What AI Landing Pages unlock
Animation as a core part of the design. A particle hero. A scroll-driven map. A dynamic chart that loads in. Anything that has to move.
Anchor links and multi-page navigation. A nav bar that scrolls to “Agenda,” “Speakers,” and “Venue” within the page. A separate “About the host” page. A press kit page. Anything past a single scroll.
A bespoke brand expression. A flagship event where the page itself is part of the brand moment. The look and feel a great in-house designer would produce.
A site that already exists. Your marketing team already built the conference site on Webflow or Framer. You want guests to register through Gatsby without sending them to a separate URL.
The Structure
Section titled “The Structure”Your AI-built site loads inside a Gatsby landing page. Guests don’t see the seam. They scroll your custom design, then hit Accept or Decline on the Gatsby RSVP frame. When they click, the standard Gatsby registration flow takes over: confirmation email, calendar invite, guest list update, all the same as a native template.
The AI-built site doesn’t need to know anything about Gatsby. No RSVP button. No registration form. Tell the AI to leave those out. Gatsby supplies them.
What Gatsby handles
The RSVP buttons. The registration form. The confirmation email. The calendar invite. Capacity and waitlist logic. Per-guest tracking. Survey questions. Everything that touches your guest list runs through Gatsby exactly as it would for a native landing page.
What the AI-built site handles
The visual design. The copy. The animations. The agenda layout. The speaker bios. The navigation structure. Anything visual or content-related is yours to control on the site you publish.
Setting It Up
Section titled “Setting It Up” Steps to publish an AI Landing Page
-
Build the page with an AI site builder.
Claude, Lovable, Bolt, or v0. Or Webflow, Framer, or hand-coded if your team prefers. Whatever produces a hosted webpage.
-
Publish to a public URL.
Most AI site builders include a free preview URL. Some require a paid plan to publish. See the hosting checklist below before you commit to a tool.
-
Copy the published URL.
Open it in a fresh incognito window to confirm it loads without a login prompt.
-
In your Gatsby event, open the Landing Page editor.
From your event’s RSVP tool, open Landing Page Templates and start a new template from Portal · Embed your own page. To add embedding to an existing template instead, add an Embed block and choose Bring your own site from the Embed Type dropdown.
-
Paste the URL.
Gatsby loads your site inside the template preview so you can see exactly what guests will see.
-
Configure the Gatsby RSVP frame.
Choose where the Accept / Decline buttons sit, what they say, and whether to include the Maybe option. Same controls you’d use on any landing page.
-
Set the template as in-use and send a test invite.
Send the invite to yourself first. Click through, scroll the page, and submit the RSVP to confirm the registration flow lands cleanly.
What the preview shows you
The Gatsby template preview renders your AI-built site exactly as a guest will see it, including how the RSVP frame overlays on top. Cycle through desktop, tablet, and mobile preview to confirm responsiveness. AI-generated sites are usually mobile-friendly out of the box, but it’s worth a quick check.
A Prompt That Works
Section titled “A Prompt That Works”Here’s a prompt that produced the Fintech summit example at the top of this page. Adapt the bracketed parts to your event and use it as a starting point.
I want you to create an elegant landing page for a global Fintech conference in Switzerland. Include a two-day agenda and a speaker section. The hero should include an animated visualization of financial centers across the globe, highlighting the event as the epicenter.
This is going to be embedded in another site, so leave out any RSVP or registration buttons. I’ll handle that myself.
Publish it to a public URL where login isn’t required so I can embed it cleanly within an iframe.
Why each part matters
The first paragraph is the brief. Be specific about tone, content sections, and any signature visual you want. “Elegant,” “playful,” “editorial,” and “minimal” produce very different results. The more concrete you are about content sections (hero, agenda, speakers, sponsors, venue, FAQ), the less you’ll have to add later.
The second paragraph protects the integration. Without it, the model will add its own Eventbrite-style RSVP button or registration form. Both would duplicate the Gatsby frame and confuse guests.
The third paragraph sets the hosting requirement. Most AI site builders default to a public preview URL. Some default to private. Naming it up front saves a round-trip.
Things to iterate on after the first generation
Most prompts won’t land perfectly on the first try. Common follow-ups:
- “Change the hero animation to something more subtle.”
- “Add a sponsor logo strip below the speaker section.”
- “Use a serif typeface for the speaker names.”
- “Make the agenda a tabbed view, one tab per day.”
- “Remove the contact form at the bottom. Registration is handled separately.”
Iterate inside the site builder until you’re happy with the page, then publish. The Gatsby side doesn’t need to change while you iterate. Each republish updates what your guests see automatically.
The Three Rules
Section titled “The Three Rules” It must be hosted at a public URL
A preview that only loads inside the builder’s editor isn’t enough. You need a real URL that you can open in a fresh incognito window and see the full page.
Most AI site builders offer a free public preview. Some require a paid plan to publish. Check your tool’s pricing page before you commit:
- Claude Artifacts: Public sharing is available on most plans.
- Lovable: Free tier includes a public preview URL.
- Bolt: Free preview URLs available; custom domains require a paid plan.
- v0: Public deployments available on free and paid plans.
- Webflow / Framer: Free tier publishes to a subdomain. Custom domains require a paid plan.
If your tool only offers private previews on its free tier, you’ll need a paid plan or a different tool.
It must not be behind a login
If the site requires the visitor to sign in to view it, the embed will show a login screen instead of your page. Some AI builders ship with a default “preview password” or auth gate. Turn those off before you copy the URL.
It must not be password-protected
Same logic as login. A password-protected page renders a password field, not your design. If your tool added one by default (some Webflow and Framer templates do), remove it before publishing.
The fast test. Open the URL in an incognito window. If you see your full page without any prompt to log in, enter a password, or accept an invitation, you’re good. If you see a wall of any kind, fix it before pasting the URL into Gatsby.
One More Constraint Worth Knowing
Section titled “One More Constraint Worth Knowing”A small number of hosts block their pages from being embedded inside other sites. They send a header that tells the browser “don’t let anyone embed me.” If you paste a URL into Gatsby and the preview shows an empty frame or a “refused to connect” error, that’s what’s happening.
Most AI site builders don’t block embedding. The ones that do usually have a setting to allow it. If you hit this, the fix is either a setting toggle in the host’s dashboard or a switch to a different host.
Common Questions
Section titled “Common Questions” Can I edit the AI-built site without touching Gatsby?
Yes. Edits you publish on the AI builder appear automatically the next time a guest loads the Gatsby landing page. You don’t need to touch Gatsby unless you’re changing the RSVP frame itself.
What happens if my AI builder or host goes down?
The Gatsby page still loads, but the AI-built content area will show a blank frame or a browser error. Pick a reputable host. If reliability matters, lean toward established platforms (Vercel, Netlify, Cloudflare Pages, Webflow, Framer) over preview URLs from a brand-new builder.
Can the AI-built site live on my own domain?
Yes. As long as the URL is public and isn’t blocked from iframing, the domain doesn’t matter. Pointing your custom domain at the host first is fine. Gatsby just needs the URL.
Do guests notice the seam between the AI page and the Gatsby frame?
Not unless they go looking. The Gatsby URL is what they see in their browser. The AI-built site loads inside it. To them, it’s one page.
Will analytics on the AI-built site capture Gatsby traffic?
Yes, if you’ve set up analytics on the AI-built site. Tools like Plausible, Fathom, or GA will record visits the same way they would on any embedded page. Cross-domain tracking has the usual caveats. If precise attribution matters, talk to whoever runs your analytics stack.
Does this work on mobile?
Yes, as long as the AI-built site is responsive. Most AI builders generate responsive layouts by default. Check the Gatsby template preview’s mobile view before going live.