HTML embed block

You can use the HTML Embed block to add custom HTML and scripts to your site.

Some of the code that can be added include:

• Live chat services
• Site analytics
• Google Tag Manager

Custom code can be used to present content in a way that is not supported by native blocks. You can also style this HTML with CSS. 

 

How to add an HTML Embed block

Click on the + Add block button. In the Block library menu, scroll to HTML Embed:

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

- Add Google Documents

- Add Google Calendar

- Add any other custom HTML code (premium block)

Click on the block of your choice and it will be added to the page.

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

Customizing block settings

You have several options to make the HTML embed block truly yours. To activate the control panel, click anywhere on the block and then click the Block Settings icon:

In the Layout section, you can hide some of the block elements. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its 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 settings: Add a black & white filter to the media within this block.

Once you are done customizing block settings, click Save.

Embedding Google Docs

You can now embed your Google Docs in just a few clicks. Here's how to do it.

1. Choose a place on your page where you want to add a Google Doc and click the round "plus" button to add a block.

2. In the Block Library, go to the HTML embed section and choose the option to embed a document:

3. Click on the block and it will appear on your page. You have a quick instruction on how to add Google Docs to the page.

4. In your Google document, go to File and then click Publish to the web option:

5. In Publish to the web window, click Embed pane:

6. Copy the code:

7. Go to the Sitebuilder and click the HTML embed block you've just added. Click Iframe settings:

8. Paste the code from Google Docs into the field and click Submit.

9. Adjust the size of the text field using the lever:

Publish your website to make the changes live.

You can embed multiple documents using this method.

Adding Google Sheets (spreadsheets)

To add a Google Sheet to the page, follow these steps:

1. Choose a spot on your page where you want to add a spreadsheet and click the round "plus" button. You will appear in the Block Library. 

2. In the Block Library, go to HTML embed section and choose the option to add a Google Sheet:

3. In your Google Sheet, go to File and choose Publish to the web option in the drop-down menu:

5. In Publish to the web window, click Embed pane:

6. Choose between embedding the entire spreadsheet or a particular sheet.

Click Publish.

7. Copy the code:

8. Go to the Sitebuilder and click the HTML embed block you've just added. Click Iframe settings:

9. Paste the code from Google Sheets into the field and click Submit.

10. Adjust the size of the spreadsheet field by moving the lever up and down:

Publish your website to make the changes live. 

You can 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.

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

1. On a page where you want to add the calendar, click the "plus" button. You will be taken to the Block Library.

2. In the Block Library, scroll to HTML embed section and choose the calendar block. Click on it.

3. Meantime, open your Google Calendar in browser and go to Settings:

4. In the left-hand-side menu, go to Settings for my calendars and choose the calendar you wish to embed.

5. In Calendar settings, scroll down to Integrate calendar and copy the embed code:

6. Go back to the Sitebuilder and click the calendar block, then click Iframe settings:

7. Paste the code into the field and click Submit.

8. If necessary, adjust the calendar size by moving the toggle up and down.

9. Publish the site to make the calendar visible.

You can embed multiple calendars using this method.

Adding custom HTML code

Before you begin:

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

1. Hover your cursor over the HTML Embed block to activate the menu.
2. Click on the Custom HTML icon:

3. 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.
   
   
4. 

Happy with the way your code looks? Publish your site to execute the code.

Please note that the code will not be executed while you are working in the Sitebuilder. It will only be executed on the published site.

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