How to Add AI-Generated HTML to a Page in ShinePages
If Claude or another LLM built you a website or landing page - here's what to do next
ShinePages Support
Last Update منذ ١٤ يومًا
Before You Begin
Make sure you have:
- Your complete HTML code copied and ready (from Claude, ChatGPT, or another AI tool)
- A page created in your ShinePages account (or be ready to create a new one)
- Your domain connected, if you want the page live on your URL
Important - please read before you paste: Adding custom HTML code to any page always comes with some inherent risk*. Code can interact with and interfere with other code on your site - including other custom code snippets you've added, as well as the base code the ShinePages platform is built on. This is true of any website platform, not just ShinePages. The more code blocks you have on a single page or site, the higher the chance of conflicts or unexpected display issues. We want you to go in with that awareness so you're not caught off guard if something looks unexpected.
Step-by-Step: Pasting Your AI HTML Into ShinePages
Step 1 - Open Your Page in the Builder
Log in to your ShinePages account and open the page you want to add your HTML to. If you're starting fresh, create a new blank page.Step 2 - Add a Code Widget
In the page builder, click the + sign within the left-hand navigation to add a new widget/element to your page. Look for the Code widget towards the bottom of the widgets list and drag it onto your page in the position you want.
Step 3 - Paste Your HTML
Click into the code widget to open the editor. Paste your complete AI-generated HTML code into the field. This includes everything your AI gave you - the layout, styles, animations, and content.
Step 4 - Set Your Block to Full Width and Remove Padding
This step makes a big difference in how your page looks - don't skip it.
Once your code is pasted, click out of the code widget popup and back onto your page. Click on the word Block in the upper corner of the block to open its settings. Then:
- Set the block width to Full Width
- Drag the top padding to 0
- Drag the bottom padding to 0
This ensures your AI-generated page fills the screen edge to edge without extra spacing above or below that would make it look misaligned or unfinished.
Step 5 - Hide the Header and Footer (If Needed)
If your AI-generated HTML includes its own header and navigation - or if you want the page to stand alone as a clean landing page without your site's menu and footer appearing - you can hide them at the page level.
Click on the pink "Hide" button next to the Header line and Footer line and toggle those off. This gives your pasted page a clean, standalone appearance without your site navigation overlapping or doubling up with whatever the AI code included.
Step 6 - Save and Preview
Save your changes and preview the page. In most cases, a well-structured HTML file from Claude or ChatGPT will render cleanly - including animations, pricing tables, scroll effects, and CTAs.
If something looks off: AI-generated HTML occasionally includes references to external font libraries or CSS files that may not load as expected. Check that any external links in your code (Google Fonts, CSS frameworks, etc.) are using full URLs starting with https://. If you're seeing conflicts or unexpected behavior, it's possible the code is interacting with other elements on the page - see the note in the "Before You Begin" section above.
Step 7 - Publish
When you're happy with how it looks, publish your page. It will be live on your domain and accessible to anyone you share the page link with.
HOW TO ADD YOUR HTML FROM CLAUDE:
Quick Screenshare Recording
Good to Know
You can also use AI-generated code for individual page elements - not just whole pages.This is one of the most useful ways to combine AI with your natively built ShinePages pages. Build your page normally in the drag-and-drop editor, then ask Claude or ChatGPT to generate a specific element - an animated ticker bar, a custom pricing table, a countdown timer, a decorative divider - as a self-contained HTML snippet. Paste that one snippet into a code widget on your native page. You get a fully editable, connected page with a custom-built element that makes it stand out.
Just keep in mind the same caution applies here: each code snippet you add introduces the possibility of interaction with other code on the page. If you're adding multiple custom elements, test carefully after each addition so you can isolate any issues that come up.
Why We Recommend Building Natively for Long-Term Pages
Pasting code is a great shortcut - and ShinePages does support it. But there are a few things worth knowing if this will be an ongoing page in your business:
- Editing requires going back into the code. You won't be able to click on a headline and change it the way you can with a native ShinePages page. Every edit means opening the code widget and updating the HTML directly.
- Pasted pages don't connect to your ShinePages tools. A code block is a visual display only. It has no relationship with your email list, booking calendar, courses, or payment system. Native ShinePages pages connect to all of those automatically.
- AI-generated HTML can affect SEO. AI code sometimes produces duplicate heading tags or other structural issues that search engines flag. Native ShinePages templates are built to encourage clean SEO structure.
- Multiple code blocks can create conflicts over time. As your site grows and you add more code snippets, the risk of code interacting unexpectedly increases. Native ShinePages elements are part of one clean system - they're built to work together.
For a fast launch, a bridge page while you rebuild, or a standalone element - pasted HTML is a valid approach. However, for anything you plan to grow, edit, and rely on, building natively inside ShinePages will serve you better over time.
WATCH THIS VIDEO:
Still Have Questions?
Our team is here to help! Click the LiveChat button in the bottom corner of your screen to connect with our support team. 💛
ALSO SEE THIS BLOG ARTICLE FOR ADDITIONAL INFORMATION: https://shinepages.com/blog/claude-built-my-website-now-what
*CUSTOM CODE DISCLAIMER
ShinePages provides a visual drag and drop platform for users to create and manage their own websites. While our platform offers features for integrating third-party code, including but not limited to scripts, plugins, widgets, and embeds, it is important to understand that ShinePages does not endorse, control, or guarantee the performance, functionality, or security of any third-party code.
Users are solely responsible for any third-party code they choose to incorporate into their websites using our platform. This includes assessing the compatibility, reliability, and compliance with applicable laws and regulations of any third-party code.
ShinePages shall not be liable for any damages, losses, or liabilities arising from the use of third-party code, including but not limited to errors, malfunctions, data breaches, or security vulnerabilities. Users agree to use third-party code at their own risk and are encouraged to review the terms of use, privacy policies, and security practices of third-party providers before integration.
By using our platform and integrating third-party code, users acknowledge and accept that ShinePages LLC bears no responsibility or liability for the outcome, performance, or consequences of such integration.