How to Use AI-Generated Code on Your PhotoBiz 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 PhotoBiz 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 PhotoBiz account and reference their direct URLs in your custom code.

This guide walks you through preparing AI-generated code for PhotoBiz, uploading supporting files, updating file references, adding the finished code to an HTML Block, and testing the completed page.

PhotoBiz Support can help you use the HTML Block, upload supported files, locate direct file URLs, and add or remove code you already have. PhotoBiz 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 PhotoBiz 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 PhotoBiz 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. These may include CSS stylesheets, JavaScript files, images, SVG graphics, icons, font files, or other browser-accessible assets.

The code may reference files using local paths such as styles.css, script.js, or images/photo.jpg. Files stored only on your computer or inside an AI workspace cannot be accessed by visitors to your public website, so required supporting files must be available from a public URL.

STEP TWO

Upload the supporting files required by your project to the Documents area of your PhotoBiz account. After uploading each file, get its direct URL and keep the URL available so you know which one belongs to each CSS file, JavaScript file, image, font, or other asset.

For complete instructions on uploading a file and getting its direct URL, see How Do I Get a Direct URL to 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 required supporting files reference their public URLs instead of local filenames or temporary file locations.

For example, replace a reference such as styles.css, script.js, or images/photo.jpg with the direct URL for the corresponding file you uploaded to PhotoBiz.

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, then review the revised code 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, then click inside the block or click the pencil icon and 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 adding and configuring an HTML Block, see How to Use the HTML Block on Your PhotoBiz Website.

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 features function correctly, and the page works on both desktop and mobile devices.

Return to the PhotoBiz 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 PhotoBiz 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 PhotoBiz

Providing the right requirements before the AI generates your project can make the finished code easier to use with PhotoBiz.

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 the 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.

Upload the CSS file to PhotoBiz Documents, 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 can also be uploaded to PhotoBiz Documents.

If your project includes a separate JavaScript file, upload the file, get its direct URL, and update the HTML so it loads the script from that location.

If an interactive feature does not work, check 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 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 image or SVG files.

Upload the supported files to Documents and use their direct PhotoBiz 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 a direct URL, see How Do I Get a Direct URL to a File?.

Using Custom Font Files

If your AI-generated design uses a supported custom font file, you can upload the font 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 both the font URL and the CSS used to load the font.

Using Externally Hosted Files

AI-generated code may reference resources hosted outside PhotoBiz, 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 them available.

PhotoBiz 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 or service 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 as full-width page sections.

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 extend across the page from edge to edge, 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 belongs in 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 PhotoBiz website instead of one individual block or page area, the Website Builder's global CSS/JavaScript settings may be more appropriate.

For site-wide code, see How to Add Custom CSS and JavaScript to Your PhotoBiz 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 supporting 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.
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.

PhotoBiz Support can help with the PhotoBiz 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 or FAQs

Can I use code created by ChatGPT, Claude, Perplexity, or another AI tool?

Yes. You can use compatible AI-generated code in a PhotoBiz 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 PhotoBiz 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 PhotoBiz 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 JavaScript 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 give my PhotoBiz 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.

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.

PhotoBiz does not control externally hosted files or services. If the provider changes or removes a resource, your custom content may stop working correctly.

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/JavaScript settings in the PhotoBiz Website Builder.

See How to Add Custom CSS and JavaScript to Your PhotoBiz Website for complete instructions.

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 PhotoBiz Support troubleshoot AI-generated code?

PhotoBiz 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.

PhotoBiz 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?

Support Hours: Monday to Friday, 9am to 6pm EST

Phone: 866.463.7620

Support Channels: Phone, Live Chat, Support Ticket

Previous Post Next Post

How To Use HTML Blocks

August 20, 2026

How To Create A Before & After Image Comparison Slider

May 15, 2025

How To Use HTML Blocks In The Footer

June 27, 2024

How Do I Integrate an Elfsight Widget into my Website?

May 31, 2024

How To Use AI-Generated Code On Your PhotoBiz Website