HTML embed block

You can use the HTML embed block to add custom HTML and scripts that are not predesigned in Sitebuilder to your site. The HTML embed block allows you to integrate content from other sources like calendars, video and audio files, or content from another website. You can also style this HTML with CSS.

Note: Please keep in mind that while the code may work now, we cannot guarantee that it will continue to work in the future. Codes can become obsolete and/or conflict with the enhancements made to provide you with the best Sitebuilder possible.

Adding an HTML embed block

Choose a location where you want to add your HTML embed block and click the Add a block (+) Plus button.
In the Block library, scroll down the list and choose HTML embed to see the pre-designed layout for this block type.
Click the block type you like to add it to your page.

You have three types of HTML embed blocks that allow you to:

Embed Google Documents
Embed a Google Calendar
Embed a Google Sheet (Spreadsheet)
Embed any other custom HTML code (premium block)

Note: You may need to upgrade your Yola plan to access custom HTML embed functionality.

Embedding Google Docs

After you choose the Google Documents predestined block, it appears on your page. Right inside the block, you have short instructions on how to add Google Docs to the page.

Here are some more detailed instructions:

In the Google document you want to embed to your site, go to File > Share > Publish to web.
In the Publish to the web window, click Publish to make your content visible to everyone.
When the doc is published, go to the Embed tab and copy the iframe code.
In the Sitebuilder, go to your Google Doc block and click it to activate the Iframe settings icon.
Paste the code from Google Docs into the Embed code tab’s field instead of the example code and click Submit.

Now you can adjust the size of the text field by clicking the block and using the resize controls.

Use the Preview button on the Topbar to see what your block will look like when published. Publish your website to make the changes live.

You can embed multiple documents using this method.

Adding Google Sheets (Spreadsheets)

The process is similar to adding a Google doc to the block. Here are the steps:

In the Google Sheet you want to embed to your site, go to File > Share > Publish to web.
In the Publish to the web window, click Publish to make your content visible to everyone.
When the doc is published, go to the Embed tab and copy the iframe code. You can choose to embed the whole document or just one sheet.
In Sitebuilder, go to your Google Sheet block and click it to activate the Iframe settings icon.
Paste the code from Google Sheets into the Embed code tab’s field instead of the example code and click Submit.

You can adjust the size of the text field by clicking the block and using the resize controls.

Now, use the Preview button on the Topbar to see what your block will look like when published. Publish your website to make the changes live.

It’s possible to embed multiple spreadsheets and separate sheets using this method.

Embedding Google Calendar

You can embed Google Calendar directly into your page. This is useful if you would like users to book an appointment or a meeting according to your availability. You can combine Google Calendar with the form that allows requesting appointments and booking a specific time and date.

Note: Your calendar must be public so that it can be visible on your site. This Google tutorial will help you make it public.

To add a Google Calendar to your block, follow these steps:

Open your Google Calendar in the browser and go to its Settings. In the left Sidebar, choose the calendar you want to embed.
Scroll down to the Integrate calendar section and copy the code snippet from the Embed code field.
In Sitebuilder, go to your Google Calendar block and click it to activate the Iframe settings icon.
Paste the code from Google Calendar into the Embed code tab’s field instead of example code and click Submit.

If necessary, adjust the calendar size by moving the resize controls up or down.

Now, you can use the Preview button on the Topbar to see what your block will look like when published. Publish your website to make the changes live.

You can embed multiple calendars using this method.

Adding custom HTML code

Before you begin, copy the HTML code from the service you want to add the code, and keep it handy.

Hover over the HTML embed block that you’ve added to activate its controls menu.
Click the Custom HTML icon to open the custom HTML window.

Paste the code into the field and click Submit. The code validation feature will notify you if the code contains any errors that may conflict with the way Sitebuilder works.

Note: The code will not be executed while you are working in the Sitebuilder. It will only be executed in the Preview mode or on the published site.

For more ways to add the HTML code to your page visit: Adding the custom code

Customizing HTML embed block

The Google Docs, Google Sheets, and Google Calendar HTML embed block types can be customized with the help of its control pane. To activate it, click the block and then click the Block settings icon.

Note: The <HTML> type of the block doesn’t have this option since all the customization is supposed to be done via the code you embed. However, you can duplicate, delete, move up and down, and copy and paste this type of HTML embed block.

The block settings menu consists of two tabs: the Layout tab and the Appearance tab.

In the Layout tab, you can choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.

In the Appearance tab, you can make the following changes:

Block style: Change the color scheme of the block.
Block spacing: Change the whitespaces on the top and bottom of the block.
Media content settings: Add a black & white filter to the media within this block.

Once you are done customizing block settings, click Save. Read about block customization options in detail in our Block settings article.

We hope you find this article helpful. If you have any questions left, please contact our Support Team.

Ready to use your new knowledge? – Edit your site!