How to Use the HTML Block on Your PhotoBiz Website

Overview

The HTML Block lets you add custom HTML, scripts, or third-party embed code to a page on your PhotoBiz website. You can use it for booking widgets, forms, maps, social media feeds, badges, custom tools, and code generated with AI tools such as ChatGPT or Claude.

The HTML Block also includes optional settings for Flushing, background colors, and background images. This guide walks you through adding an HTML Block, inserting your code, reviewing the finished content, and customizing the block when needed.

PhotoBiz Support can help you add an HTML Block and insert or remove code you already have. PhotoBiz cannot create, edit, debug, troubleshoot, or guarantee the performance of custom code, AI-generated code, or third-party services.

Prerequisites

Before you begin, make sure you have the complete HTML, embed code, or script you want to use. This may be code provided by a third-party service or developer, or custom code generated with an AI tool such as ChatGPT or Claude.

Only add code from a source you trust. Review and test custom or AI-generated code before relying on it on your website.

STEP ONE

This opens the Website Builder, where you can manage your website pages and content.

STEP TWO

Click the page where you want to add the HTML Block. You can use an existing page or create a new page before continuing.

Locate the HTML Block on the right side of the Website Builder. Click the HTML Block icon to add it to the bottom of the page.

To place the block in a specific location, click and hold the HTML Block icon, drag it onto the page, and release it when the teal placement line appears where you want the block to display.

STEP THREE

Click inside the HTML Block or click the pencil icon in the top-right corner of the block, then click ADVANCED to open the HTML Block settings.

The right-side panel includes four options: HTML, STYLING, COLORS, and BACKGROUND.

The HTML section will open by default. Paste the complete HTML, embed code, or script into the HTML CODE field.

Make sure you copy the complete code. Missing or incomplete code can prevent the embedded content from loading correctly. Click SAVE CHANGES when you are finished.

FINAL STEP

Click VIEW SITE or open the page on your public website and confirm that the embedded content appears in the correct location and works as expected.

Test any forms, buttons, links, booking tools, or other interactive features included with the code. Review the page on both desktop and mobile devices because custom and third-party content may display differently depending on the available screen size.

Return to the page in the PhotoBiz Website Builder and confirm that the page and its blocks still load correctly. Your changes are already live after you click SAVE CHANGES. There is no separate publish button.

HTML Block Advanced Settings

The HTML Block includes four options in the right-side ADVANCED panel:

HTML: Add, replace, or edit the HTML, embed code, or script used by the block.
STYLING: Control the optional Flushing setting.
COLORS: Change the background color of the HTML Block.
BACKGROUND: Add and configure a background image.

You do not need to change the Styling, Colors, or Background settings to use an HTML Block.

Styling and Flushing

Click STYLING to access the FLUSHING setting.

Flushing is set to On by default for HTML Blocks. With Flushing On, the HTML Block can extend from edge to edge across its available template area.

Select Off if you want the HTML Block to remain within the standard content area instead.

Flushing controls the HTML Block container. It does not change or override styling contained in the HTML or third-party code. If your code includes its own width, maximum width, margins, padding, or other sizing rules, the embedded content may not fill the entire block.

Click SAVE CHANGES after changing the setting.

Background Color

Click COLORS to change the background color of the HTML Block.

Click the color square to choose a color. You can also enter a HEX color code when you need to match a specific brand color.

Click SAVE CHANGES after updating the background color.

Background Image

Click BACKGROUND when you want to display an image behind the HTML Block.

You can upload your own image or choose an image from the Background Library.

Under Background Settings, choose how the image should appear:

Tile: Repeats the image to fill the available background area.
Top Left: Positions the image in the top-left corner of the block.
Centered: Centers the image within the available background area.
Cover: Scales the image to cover the available background area.

Click SAVE CHANGES after updating the background settings.

Using AI-Generated Code

You can use custom code generated by AI tools such as ChatGPT, Claude, or similar services in an HTML Block.

Paste AI-generated code into the HTML section the same way you would add other custom or third-party code. Always review the public page after saving and test the code on desktop and mobile devices.

Keep these points in mind when using AI-generated code:

AI-generated code may contain errors or behave differently than expected.
Code may depend on outside files, services, fonts, scripts, or other resources.
Responsive behavior may vary across browsers and devices.
Custom code can affect other content or how the page loads.
Do not place passwords, private credentials, API keys, or other sensitive information in code that will be displayed on your public website.

PhotoBiz Support can help you add or remove AI-generated code from an HTML Block but cannot debug or rewrite the code. If the code does not work as expected, return to the AI tool that generated it or work with a web developer to revise it.

For Complete Instructions, check out How To Use AI Generated Code on Your PhotoBiz Website

Common Uses for the HTML Block

You can use an HTML Block for many types of custom or third-party content, including:

Booking and scheduling widgets
Custom forms
Live chat tools
Social media feeds
Customer review badges
Awards and certification badges
Embedded maps
External calculators or tools
AI-generated HTML, CSS, or JavaScript
Other third-party widgets or custom page elements

Some third-party services require an active account, paid subscription, domain verification, or additional setup through the provider. Adding embed code to your PhotoBiz website does not activate or configure the outside service.

If a provider gives you updated embed code, return to the HTML Block, click HTML, replace the previous code, and click SAVE CHANGES.

Third-Party and Custom Code Considerations

Custom and third-party code can affect both your public website and the PhotoBiz Website Builder. Depending on the code, it may affect page speed, mobile responsiveness, block editing, or the appearance of other content.

After adding or updating code, check that:

The public page loads completely.
Other blocks on the page still display correctly.
The page opens correctly in the Website Builder.
You can edit and rearrange the page blocks.
The embedded content works on desktop and mobile devices.
The page does not become noticeably slower.

If a problem begins after you add or update code, remove the code from the HTML Block and click SAVE CHANGES. Review the page again to confirm whether removing the code resolves the issue.

PhotoBiz Support can help you locate the HTML Block, insert code you already have, or remove code from the block. Contact the third-party provider, the AI tool that generated the code, or your web developer to troubleshoot or correct the code itself.

Using the HTML Block with DuoBuild

The HTML Block supports DuoBuild. When you place it next to another supported block, the two blocks automatically display side by side in a two-column layout.

The following blocks support DuoBuild:

Text Editor Block
Text + Image Block
Images Block
List Block
Banner Block
Video Block
Form Block
Button Block
HTML Block

The FLUSHING setting still applies when an HTML Block is used in DuoBuild. However, DuoBuild divides the template between the two side-by-side blocks, so the HTML Block remains within its assigned portion of the layout.

For example, if you place two HTML Blocks next to each other, DuoBuild splits the template into two columns. Each HTML Block then fills its assigned half based on its own Flushing setting.

If you want an HTML Block to extend across the page from edge to edge, do not use DuoBuild with that block. Place the HTML Block on its own and leave FLUSHING set to On.

The appearance of embedded content inside DuoBuild also depends on how the third-party code responds to the available space. Review the layout on both desktop and mobile devices after saving.

See DuoBuild Introduction for complete instructions.

Troubleshooting or FAQs

Why is my embedded content not showing?

Confirm that you pasted the complete code into the HTML section and clicked SAVE CHANGES.

You can also check the following:

Request a new copy of the embed code from the provider.
Confirm that the third-party account or service is active.
Check whether the service requires domain verification or additional setup.
Review the page on your public website.
Test the page in another browser.
Check whether a browser extension is blocking the content.

Contact the third-party provider or developer if the code is complete but the content still does not display.

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

Yes. You can paste AI-generated HTML, CSS, or JavaScript into an HTML Block.

Test the page carefully after saving because AI-generated code may contain errors or behave differently across browsers and devices. PhotoBiz Support can help you add or remove the code but cannot debug or rewrite AI-generated custom code.

Why doesn't Flushing make my embedded content fill the entire width?

The FLUSHING setting controls the HTML Block container. It does not rewrite or override the code inside the block.

If the code contains its own width, maximum width, margins, padding, or other styling, the embedded content may remain narrower even when Flushing is set to On.

Can I use Flushing with DuoBuild?

Yes. Flushing still applies to an HTML Block used in DuoBuild.

DuoBuild always displays the two supported blocks side by side and divides the template between them. The Flushing setting therefore applies within the HTML Block's assigned portion of the DuoBuild layout.

If you want the HTML Block to extend across the full page from edge to edge, do not use DuoBuild with that block.

Why does my embedded content look different on mobile devices?

The appearance and responsive behavior of custom or third-party content are controlled by the code.

Contact the code provider, AI tool, or your web developer if the content is too wide, cut off, difficult to use, or does not adjust correctly on smaller screens.

What should I do if the page stops loading in the Website Builder?

Remove the code from the HTML Block and click SAVE CHANGES. Reopen the page and confirm that the Website Builder loads normally.

If you cannot access the HTML Block to remove the code, contact PhotoBiz Support. Support can help remove the code but cannot repair or troubleshoot the code itself.

Can PhotoBiz write or troubleshoot custom HTML code for me?

No. PhotoBiz Support does not create, edit, debug, or troubleshoot custom HTML, scripts, widgets, AI-generated code, or other third-party code.

PhotoBiz Support can help you add an HTML Block, locate an existing block, insert code you already have, or remove code that is causing a problem.

Do I need to publish my website after saving?

No. Click SAVE CHANGES to apply your updates to your website. There is no separate publish button.

Previous Post Next Post

How To Embed VidFlow Galleries or Videos on PhotoBiz

May 15, 2025

How Do I Integrate an Elfsight Widget into my Website?

May 31, 2024

How To Embed A 3rd Party Calendar In Your Website

August 11, 2026

How To Embed A 3rd Party Form In Your Website

June 25, 2026

How To Use HTML Blocks