How to Add HTML & Embed Code to Your PhotoBiz Website

How to Use the HTML Block on Your PhotoBiz Website

Overview

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

You can also customize your HTML Block using optional settings for Flushing, background colors, and background images.

This guide walks you through adding an HTML Block, inserting your code, customizing its appearance, and testing the finished content on your website.

PhotoBiz Support can help you add an HTML Block and insert or remove code you already have. However, 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, a web developer, or an AI tool such as ChatGPT or Claude.

Only add code from sources you trust. Review and test custom or AI-generated code before relying on it for important website features.

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 select an existing page or create a new page before continuing.

Locate the HTML Block in the available blocks menu on the right side of the Website Builder.

Click the HTML Block icon to add it to the bottom of your 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 placement indicator appears where you want the block to display.

STEP THREE

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

The editor includes four tabs: HTML, STYLING, COLORS, and BACKGROUND.

The HTML tab opens by default. Paste your complete HTML, embed code, or script into the HTML CODE field.

Make sure you copy the complete code provided by your third-party service, developer, or AI tool. 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 to confirm that your embedded content appears in the correct location and works as expected.

Test any buttons, links, booking tools, forms, or other interactive features included in your code.

Review the page on desktop and mobile devices because custom and third-party content may display differently depending on screen size.

Return to the Website Builder and confirm that the page and its other blocks still load correctly.

Your HTML Block changes are applied to your website when you click SAVE CHANGES. There is no separate publish button.

What Your Website Visitors See

Visitors will see the embedded content wherever you placed the HTML Block on your website.

Depending on the code you added, visitors may be able to:

View customer reviews or social media content.
Complete a booking through an embedded scheduling tool.
Interact with a custom form or calculator.
View an embedded map or video.
Click links or buttons provided by the third-party service.
Use other interactive content included with your custom code.

The appearance and functionality of embedded content depend on the code and the service providing it.

Some third-party tools may load content from an outside website or require visitors to interact with that provider's service. If the outside service becomes unavailable or its embed code stops working, the content may not display or function as expected on your website.

HTML Block Advanced Settings

The HTML Block includes four editing tabs in the ADVANCED panel:

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

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

Styling

The STYLING section allows you to control how your HTML Block is positioned within your website's page layout.

Click STYLING to access the FLUSHING setting.

Flushing is set to On by default for HTML Blocks.

Available options include:

On: Allows the HTML Block to extend to the edges of its available template area.
Off: Maintains the standard spacing around the HTML Block.

Select your preferred option and click SAVE CHANGES.

Helpful Tip: Flushing controls the HTML Block container, not the formatting or spacing built into your HTML code. If your embedded content includes its own width, maximum width, margins, or padding, those settings may still affect how the content appears.

Background Color

The COLORS section allows you to customize the background color of your HTML Block to match your website's design.

Click COLORS to access the Background Color setting.

Click the color swatch to open the color picker or enter a specific hexadecimal (HEX) color code in the Background Color field.

After choosing your color, click SAVE CHANGES to apply it to your website.

Helpful Tip: The background color controls the area behind your HTML content. It does not automatically change the colors, fonts, or styling of embedded third-party content. Those elements are controlled by the HTML code or the third-party service providing the embed.

Background

The BACKGROUND section allows you to add a background image behind your HTML Block. You can upload your own image, choose one from PhotoBiz's Background Library, or remove an existing background image.

Available background options include:

No Background: Removes the background image and uses the background color configured in the COLORS section.
Custom Background: Allows you to upload your own JPG or PNG image. For best results, we recommend an image that is 3000 pixels wide by 1730 pixels high.
Background Library: Allows you to select an image from PhotoBiz's available background designs.

Background Settings

You can also control how your background image appears using these settings:

Tile: Repeats the image across the background area.
Top Left: Positions the image in the upper-left corner.
Centered: Centers the image within the available space.
Cover: Scales the image to fill the available background area. Portions of the image may be cropped to fit.

After selecting your background image and display settings, click SAVE CHANGES to apply your changes.

Helpful Tip: Background images and background colors are controlled separately. Use COLORS to change the HTML Block's solid background color or BACKGROUND to add and position a background image.

For detailed instructions on customizing individual block backgrounds, see How to Change a Block Background in PhotoBiz.

You can also customize the background of your entire website through the Website Builder's Design Settings. See How to Customize Your Website's Background Image for more information.

Managing Your HTML Block

You can manage your HTML Block using the pencil icon in the upper-right corner of the block.

This menu provides options for editing, copying, moving, renaming, accessing advanced settings, or deleting the block.

Available options include:

HTML: Opens the HTML Block editor, where you can add or update your code.
COPY: Creates a duplicate of the HTML Block directly below the original, including its existing code and settings.
MOVE: Allows you to move the HTML Block to another page on your website.
RENAME: Changes the block's internal name to help you identify and organize your content. Named blocks can also be used when creating anchor links.
ADVANCED: Opens the HTML Block editor with the HTML tab selected by default. You can also access the Styling, Colors, and Background settings.
DELETE: Removes the HTML Block from your page after you confirm the deletion.

For detailed instructions on organizing blocks, see:

Deleting an HTML Block

If you no longer need an HTML Block on your website, you can remove it using the block management menu.

Click the pencil icon in the upper-right corner of the HTML Block, then click DELETE.

A confirmation message will appear asking you to confirm that you want to delete the block. Confirm the deletion to remove the HTML Block from your page.

Important: Deleting an HTML Block removes the block and its embedded code from that page. It does not delete your account or content stored with the third-party service that provided the code.

If the HTML Block contains a third-party widget or integration, removing the block will also remove that embedded content from the page.

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
Google Reviews widgets and customer review badges
Awards and certification badges
Embedded maps
External calculators or interactive 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 automatically activate or configure the outside service.

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

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 CODE field 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.
Code that works in an AI preview may not work the same way on your public website.
Do not place passwords, private credentials, API keys, or other sensitive information in code that will be displayed on your public website.

Some AI-generated projects include separate CSS files, JavaScript files, images, fonts, or other supporting assets. These files may need to be hosted online and referenced using their public URLs before the code can work correctly.

Projects requiring server-side applications, databases, or other backend technology may not be compatible with an HTML Block.

PhotoBiz Support can help you add or remove AI-generated code but cannot debug or rewrite it. 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 on preparing AI-generated code, uploading supporting files, and adding custom content, see How to Use AI-Generated Code on Your PhotoBiz Website.

Third-Party and Custom Code Considerations

Custom HTML 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 custom code, check that:

Your public website 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's 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 custom code, remove the code from the HTML Block and click SAVE CHANGES.

Review the page again to determine whether removing the code resolves the problem.

PhotoBiz Support can help you locate the HTML Block, insert code you already have, or remove code that may be causing an issue.

Contact the third-party provider, the AI tool that generated the code, or your web developer when the code itself needs to be corrected.

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?

First, confirm that you pasted the complete code into the HTML CODE field and clicked SAVE CHANGES.

You can also try the following:

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

If your code appears complete but the embedded content still does not display, contact the third-party provider or developer for assistance.

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

Yes. You can add compatible AI-generated HTML, CSS, or browser-based JavaScript to an HTML Block.

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

For detailed instructions, see How to Use AI-Generated Code on Your PhotoBiz Website.

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 your HTML contains its own width, maximum width, margins, padding, or other styling, the embedded content may remain narrower even when Flushing is set to On.

You may need to contact the code provider or your developer to adjust those settings.

Can I use Flushing with DuoBuild?

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

DuoBuild places two supported blocks side by side and divides the available template area between them.

The Flushing setting therefore applies within the HTML Block's assigned portion of the layout.

If you want an HTML Block to extend across the full available page width, place it on its own instead of using DuoBuild.

Why does my embedded content look different on mobile devices?

The appearance and responsive behavior of custom or third-party content depend on the code.

Some embeds use fixed dimensions or layouts that do not automatically adjust for smaller screens.

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

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

If you can access the HTML Block, remove the custom code 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. Our team can help remove the code but cannot repair or troubleshoot the code itself.

Can PhotoBiz write or troubleshoot custom HTML code for me?

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

However, our Support Team can help you:

Add an HTML Block to your website.
Locate an existing HTML Block.
Insert code you already have.
Remove code from an HTML Block.

For help creating or modifying custom code, contact the third-party service, AI tool, or developer that provided it.

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 when updating HTML Blocks or other content in the PhotoBiz Website Builder.

Related Guides

Need Help?

Our PhotoBiz Support Team is happy to help you add, manage, or remove HTML Blocks on your website.

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