How to Use AI-Generated Code on Your Zibster Website
Overview
AI tools such as ChatGPT, Claude, Perplexity, and other coding assistants can generate custom HTML, CSS, JavaScript, images, fonts, and other assets for your website. Compatible browser-based AI-generated code can be added to an HTML Block to create custom page sections, landing pages, calculators, interactive elements, styled layouts, and other content on your Zibster website.
If your AI-generated project uses separate CSS, JavaScript, images, fonts, or other supported files, you can upload those files to the Documents area of your Zibster account and reference their direct URLs in your custom code.
This guide walks you through preparing AI-generated code for Zibster, uploading supporting files, updating file references, adding the finished code to an HTML Block, and testing the completed page.
Zibster Support can help you use the HTML Block, upload supported files, locate direct file URLs, and add or remove code you already have. Zibster Support cannot create, edit, debug, troubleshoot, or guarantee the performance of AI-generated or other custom code.
Prerequisites
Before you begin, make sure you have:
- The complete code generated by your AI tool
- Any supporting files required by the project
- Access to your Zibster Website Builder
The finished project should be designed to run directly in a web browser. If the AI-generated project requires a server-side application, database, software installation, or build process, it may not work inside a Zibster HTML Block.
Do not include passwords, private credentials, API keys, or other sensitive information in code that will run on your public website.
STEP ONE
Review the project generated by your AI tool and identify the main HTML code along with any supporting files it requires.
AI-generated projects may include separate:
- CSS stylesheets
- JavaScript files
- Images
- SVG graphics
- Icons
- Font files
- Other browser-accessible assets
The code may reference these files using local paths such as styles.css, script.js, images/photo.jpg, or another filename or location that exists only inside the AI tool's project or on your computer.
Files stored only on your computer or inside an AI workspace cannot be accessed by visitors to your public website. Required supporting files must be available from a public location that the visitor's browser can access.
STEP TWO
Log in to your Zibster account and upload the supporting files required by your project to the Documents area.
Common website assets supported by Zibster Documents include:
- CSS files
- JavaScript files
- JPG, JPEG, PNG, GIF, and SVG images
- ICO files
- TTF, OTF, and WOFF2 font files
After uploading each file, get its direct URL. You will use these URLs to replace local file references in the AI-generated code.
Keep each direct URL available for the next step so you know which URL belongs to each file.
For complete instructions, see How Can I Get a Direct URL Link for a File?.
Projects that require server-side software, databases, installed packages, or other backend dependencies cannot run directly from the Documents area or an HTML Block.
STEP THREE
Update the AI-generated code so any required supporting files reference their public URLs instead of local filenames or temporary file locations.
For example:
- Replace a CSS reference such as
styles.csswith the direct URL for the CSS file uploaded to Zibster. - Replace a JavaScript reference such as
script.jswith the direct URL for the JS file uploaded to Zibster. - Replace an image reference such as
images/photo.jpgwith the direct URL for the image uploaded to Zibster.
You can make these changes manually or provide the direct URLs to the AI tool that generated the project and ask it to update the existing code.
Clearly identify which URL belongs to each file.
Review the updated code before continuing and confirm that every required file reference points to the correct public URL.
STEP FOUR
Click WEBSITE in the left-side menu and open the page where you want to display the AI-generated content.
Add an HTML Block to the page.
Click inside the HTML Block or click the pencil icon in the top-right corner, then click ADVANCED.
Click HTML in the right-side settings panel and paste the completed code into the HTML code field.
Confirm that the code includes the correct public URLs for any CSS, JavaScript, images, fonts, or other supporting files it requires.
Click SAVE CHANGES when you are finished. Your changes are automatically applied to your website.
For complete instructions on working with the HTML Block, see How To Use An HTML Block.
FINAL STEP
Open the page on your public website and test the completed AI-generated content.
Confirm that:
- The layout displays correctly
- Images and graphics load
- Fonts and styling appear as expected
- Links and buttons work
- Interactive elements function correctly
- The page works on desktop and mobile devices
Return to the Zibster Website Builder and confirm that the page still opens and can be edited normally.
If a problem begins after adding the custom code, remove the code from the HTML Block and click SAVE CHANGES. Then test the page again.
If removing the code resolves the issue, return to the AI tool that generated the code or work with a web developer to correct it.
What Types of AI-Generated Code Can I Use?
The Zibster HTML Block is best suited for code designed to run directly in a web browser.
This commonly includes:
- HTML
- CSS
- Browser-based JavaScript
- Third-party embed code
- Custom page elements
- Calculators
- Interactive browser-based components
- Custom page layouts
AI coding tools can also generate full applications that rely on technology outside the browser. These projects cannot necessarily be added directly to an HTML Block.
Examples include projects that require:
- A server-side application
- A database
- PHP, Python, Node.js, or another server-side runtime
- Software packages installed on a server
- A development or build process
- Server-side authentication
- Private API credentials
If an AI tool generates a project with these requirements, ask whether it can convert the project into standalone browser-based HTML, CSS, and JavaScript.
What to Tell an AI Tool When Creating Code for Zibster
Providing the right requirements before the AI generates your project can make the finished code easier to use with Zibster.
Tell the AI that:
- The finished content will be placed inside an HTML Block on an existing website.
- The project should use browser-based HTML, CSS, and JavaScript.
- The project should not require a server-side application, database, or build process.
- Any separate supporting files should be clearly identified.
- The layout should be responsive for desktop and mobile devices.
- File references should be easy to replace with public URLs.
- Private API keys, passwords, or other credentials must not be included in browser-accessible code.
If you already have direct URLs for CSS, JavaScript, images, fonts, or other supporting files, you can provide those URLs to the AI tool and ask it to use them in the finished code.
Working With Supporting Files
AI-generated projects may include separate files that need to be available online before your custom content can work correctly.
Using Separate CSS Files
AI tools may create one or more CSS files instead of placing all styling directly inside the HTML.
CSS files can be uploaded to Zibster Documents.
After uploading the CSS file, get its direct URL and update the HTML so the stylesheet loads from that URL.
If your custom content appears on the page but does not look like the AI-generated preview, check the CSS reference. A missing or incorrect stylesheet URL can cause the content to load without its intended fonts, spacing, colors, or layout.
You can also ask the AI tool to include the required CSS directly with the HTML when appropriate.
Using Separate JavaScript Files
JavaScript files with the .js file type can also be uploaded to Zibster Documents.
If your project includes a separate JavaScript file, upload the JS file, get its direct URL, and update the HTML so it loads the script from that location.
If an interactive feature does not work, confirm that:
- The JavaScript file uploaded successfully
- The HTML references the correct direct URL
- The project does not depend on additional missing files or services
- The JavaScript does not require unsupported server-side functionality
If the JavaScript itself needs to be changed or debugged, return to the AI tool that generated it or work with a web developer.
Using Images and SVG Files
AI-generated designs may use separate JPG, JPEG, PNG, GIF, or SVG files.
Upload the supported image or graphic files to Documents and use their direct Zibster URLs wherever the AI-generated code references those assets.
This is especially important when the original code uses:
- A local computer path
- A filename that exists only inside the AI project
- A temporary AI preview URL
- A temporary file location
Temporary AI preview URLs and file locations may stop working or may not be publicly accessible from your website.
For instructions on getting the direct URL for an uploaded file, see How Can I Get a Direct URL Link for a File?.
Using Custom Font Files
Zibster Documents supports TTF, OTF, and WOFF2 font files.
If your AI-generated design uses a custom font file, you can upload the supported font file to Documents and use its direct URL in compatible CSS.
Make sure you have the appropriate license or permission to use the font on your website.
If the custom font does not display correctly, check the font URL and the CSS used to load the font.
Supported File Types in Zibster Documents
Zibster Documents supports the following file types:
- JPG
- JPEG
- PNG
- GIF
- TTF
- OTF
- WOFF2
- PSD
- DOC
- DOCX
- XLS
- XLSX
- ZIP
- ICO
- MP3
- JS
- CSS
- SVG
Not every supported Documents file type is intended to function as a website asset. The file still needs to be used in a way that is compatible with browser-based HTML, CSS, or JavaScript.
Using Externally Hosted Files
AI-generated code may reference resources hosted outside Zibster, including stylesheets, JavaScript libraries, fonts, images, APIs, or other services.
These resources may work as long as the outside provider permits them to be loaded by your website and keeps the resource available.
Zibster does not control externally hosted resources. Your custom content may stop working or display differently if an outside provider:
- Changes the resource URL
- Removes the file or service
- Changes its access requirements
- Blocks third-party use
- Changes a library, service, or other resource your project depends on
If an externally hosted resource stops working, contact the provider, update the code through your AI tool, or work with a web developer.
Using the HTML Block Flushing Setting
The HTML Block includes an optional FLUSHING setting under STYLING.
Flushing is set to On by default.
With Flushing On, a standalone HTML Block can extend from edge to edge across its available template area. This can work well for AI-generated layouts designed to create a full-width page section.
Flushing controls the HTML Block itself. It does not override widths, margins, padding, or other styling contained within the AI-generated code.
If you want the HTML Block to use its full available template width, do not use DuoBuild with that block. DuoBuild places two supported blocks side by side, and each block fills its assigned portion of the template.
When to Use an HTML Block vs. Global CSS/JavaScript
Use an HTML Block when the AI-generated content is intended for a specific location on a page, such as:
- A custom page section
- A calculator
- An interactive element
- A custom layout
- A third-party embed
- A landing page component
If the code is intended to affect your entire Zibster website instead of one individual block or page area, the Website Builder's global CSS/JS settings may be more appropriate.
For site-wide code, see the Zibster guide for adding Custom CSS and JavaScript to your website.
Updating AI-Generated Content Later
You can return to the AI tool at any time to request changes to your custom content.
When the AI provides updated code, review all file references before replacing the existing code in your HTML Block.
An updated project may:
- Change filenames
- Create additional files
- Remove existing files
- Replace working URLs
- Add new external dependencies
If the revised version requires additional supported files, upload those files to Documents and update their file references before adding the new HTML.
After replacing the code, click SAVE CHANGES and test the public page again on desktop and mobile devices.
Important Considerations for AI-Generated Code
AI-generated code is custom code and should be reviewed and tested before you rely on it for an important website feature.
Keep the following in mind:
- AI-generated code can contain mistakes.
- Code that works in an AI preview may behave differently on your live website.
- Custom code can affect page speed, accessibility, or other content on the page.
- Responsive layouts should be tested on desktop and mobile devices.
- External resources may stop working if their provider changes or removes them.
- Uploaded files still require correctly written HTML, CSS, or JavaScript references to work.
- Do not include passwords, API keys, private credentials, or other sensitive information in public website code.
- Confirm that you have permission or the proper license to use images, fonts, scripts, and other assets included in your project.
- Future changes to outside services or custom code may require the code to be updated.
- Test important forms, links, buttons, calculators, and interactive features before relying on them for customers.
Zibster Support can help with the Zibster tools used to add or remove your code. The AI provider or a web developer should be used when the custom code itself needs to be created, changed, debugged, or repaired.
Troubleshooting / FAQs
Can I use code created by ChatGPT, Claude, Perplexity, or another AI tool?
Yes. You can use compatible AI-generated code in a Zibster HTML Block.
The code should be designed to run directly in a browser. If the project includes separate supported CSS, JavaScript, images, fonts, or other assets, you can upload those files to Documents and reference their direct URLs in the code.
Can an AI tool create an entire custom page for my Zibster website?
An AI tool can generate a custom layout that may be displayed through an HTML Block as long as the finished project can run as browser-based code.
Projects that require a database, server-side application, build process, or other backend technology cannot necessarily run directly inside an HTML Block.
Why does my AI-generated page look different from the preview?
An AI preview may have access to files, styles, libraries, fonts, or other resources that your public website cannot access.
Check that all required supporting files are publicly available and that the code references the correct URLs.
Also test the page at different screen sizes because responsive behavior may differ from the AI preview.
Why are my images missing?
Check the image references in the AI-generated code.
If the code references a file stored on your computer, inside the AI project, or at a temporary location, your public website may not be able to access it.
Upload the supported image to Documents and replace the original reference with its direct Zibster URL.
Why is my custom content displaying without the correct styling?
Check any CSS referenced by the HTML.
If a separate stylesheet is required, confirm that the CSS file has been uploaded and that the HTML references the correct direct URL.
A missing or inaccessible stylesheet can cause the content to display without its intended fonts, spacing, colors, or layout.
Why is an interactive feature not working?
Check whether the project uses JavaScript or another external resource.
Confirm that any required JS file is publicly available and that the HTML references the correct URL.
If all required files are loading correctly but the feature still does not work, the JavaScript itself may need to be corrected by the AI tool that generated it or by a web developer.
Can I upload JavaScript and CSS files to Zibster?
Yes. Zibster Documents supports both JS and CSS files.
After uploading the file, get its direct URL and use that URL wherever the AI-generated project needs to load the stylesheet or JavaScript file.
Can my AI-generated code load files from another website?
Potentially. Browser-based code can reference externally hosted resources when the provider makes those resources publicly available and permits them to be loaded from another website.
Zibster does not control externally hosted files or services. If the provider changes or removes a resource, your custom content may stop working correctly.
Can I give my Zibster file URLs to the AI tool?
Yes. You can provide the direct URLs for your uploaded files to the AI tool and ask it to update the existing code.
Clearly identify which URL belongs to each file and review the revised code before adding it to your website.
Should I use an HTML Block for code that affects my entire website?
An HTML Block is best for custom content placed in a specific location on a page.
Code intended to load or apply across the entire website may be better suited for the global CSS/JS settings in the Zibster Website Builder.
What should I do if the AI-generated code causes problems with my page?
Remove the custom code from the HTML Block and click SAVE CHANGES.
Then confirm that the public page and Website Builder load correctly again.
If removing the code resolves the issue, return to the AI tool that generated the code or work with a web developer to correct it.
Can Zibster Support troubleshoot AI-generated code?
Zibster Support can help you add an HTML Block, upload supported files, locate direct file URLs, insert code you already have, or remove code that is causing a problem.
Zibster Support cannot create, edit, debug, or troubleshoot AI-generated or other custom code.
Do I need to publish my website after adding AI-generated code?
No. Click SAVE CHANGES to apply your updates to your website. There is no separate publish button.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
