Use the HTML embed block to add custom HTML and scripts to your site that aren’t pre-designed in Sitebuilder. It lets you integrate content from other sources – calendars, video and audio files, or content from another website – and you can style that HTML with CSS.
Note: adding and editing custom HTML code requires Sitebuilder Large. If you have a different package, you’ll need to upgrade to use this feature. The predefined Google Docs, Google Sheets and Google Calendar embeds aren’t affected by this requirement.
Adding an HTML embed block
- Choose where you want the block and click Add a block (+).
- In the Block library, scroll down and select HTML embed to see the ready-made layouts.
- Click the block type you want to add it to your page.
HTML embed block types let you:
- Embed Google Docs
- Embed a Google Calendar
- Embed a Google Sheet
- Embed any other custom HTML code (requires Sitebuilder Large)
Embedding Google Docs
- In the Google Doc you want to embed, go to File → Share → Publish to web.
- In the Publish to the web window, click Publish to make the content visible to everyone.
- Once published, go to the Embed tab and copy the iframe code.
- In Sitebuilder, click your Google Doc block to activate the Iframe settings icon.
- Paste the code into the field in the Embed code tab, replacing the example code, and click Submit.
You can adjust the size by clicking the block and using the resize handles. Use Preview in the top bar to check how it will look, then publish your site. You can embed several documents this way.
Embedding Google Sheets
- In the Google Sheet you want to embed, go to File → Share → Publish to web.
- Click Publish to make the content visible to everyone.
- Go to the Embed tab and copy the iframe code – you can embed the whole document or just one sheet.
- In Sitebuilder, click your Google Sheet block to activate the Iframe settings icon.
- Paste the code into the Embed code tab, replacing the example code, and click Submit.
Adjust the size with the resize handles, check it with Preview, then publish. You can embed several spreadsheets and separate sheets this way.
Embedding Google Calendar
You can embed Google Calendar directly on your page – useful if you want visitors to book a time or meeting based on your availability. You can combine it with a form for booking requests.
Note: your calendar must be public to appear on your site – see Google’s own guide on making a calendar public.
- Open Google Calendar in your browser and go to its Settings. In the left sidebar, select the calendar you want to embed.
- Scroll down to Integrate calendar and copy the code snippet from the Embed code field.
- In Sitebuilder, click your Google Calendar block to activate the Iframe settings icon.
- Paste the code into the Embed code tab, replacing the example code, and click Submit.
Adjust the calendar’s size with the resize handles if needed, check it with Preview, then publish. You can embed several calendars this way.
Adding custom HTML code
This feature requires Sitebuilder Large. Before you start, copy the HTML code from the service you want to embed.
- Hover over the HTML embed block to activate its control menu.
- Click the Custom HTML icon to open the custom HTML window.
- Paste the code into the field and click Submit. Code validation will warn you about any errors that might conflict with how Sitebuilder works.
Note: the code doesn’t run while you’re working in Sitebuilder – only in preview mode or on the published site.
Customising the HTML embed block
The Google Docs, Google Sheets and Google Calendar block types can be customised via the control panel – click the block, then the Block settings icon.
Note: the <HTML> block type doesn’t have this option, since all customisation is done through the code you embed. You can still duplicate, delete, move up and down, and copy and paste it.
In the Layout tab you can choose which elements appear – remove the blue tick next to an element to hide it. In the Appearance tab you can change:
- Block style: the block’s colour scheme.
- Block spacing: the space above and below the block.
- Media content settings: add a black-and-white filter to the media content.
Click Save when done.