PS: If you need to attach hidden elements such as tracking scripts, analytics or custom scripts / styles, check out Hosting Plugins instead.
- Select the Embed Anything widget from either the Widget or the Section add-menu.
- Place the Widget on the Canvas and double-click to open the Widget Form
- Paste your embed code into the form. This will sometimes not render until the project is published, depending on how the embed code works.
Below is an example of the Embed Anything widget waiting for input.
Some advanced embed codes may however rely on functionality that triggers when the document is loaded. These may not work in the Editor Preview, but will trigger as they normally would on the published version.
In the example below, we are going to use the embed code from HubSpot to add a booking calendar. The code we are going to use is as follows:
<!-- Start of Meetings Embed Script -->
hsappstatic.net/MeetingsEmbed/ ex/MeetingsEmbedCode.js"></ script>
<!-- End of Meetings Embed Script -->
If nothing shows up on the published version, but you know you copied the Embed code from your third-party website correctly, it may often be due to bad character sets.
Taking HubSpot as an example, their embed code is sent to the user with some bad characters in it.
In the embed code example from HubSpot below, you can see that it's full of horrible quotation marks.
// BAD EXAMPLE!
// BAD QUOTATION MARKS IN THE EMBED CODE SUPPLIED DIRECTLY FROM HUBSPOT
‘’<!--[if lte IE 8]>
Replace all the nasty quotation characters with either the correct "-mark or as a single apostrophe.
// GOOD EXAMPLE
// FIXED QUOTATION MARKS IN THE EMBED CODE THAT COMES FROM HUBSPOT
<!--[if lte IE 8]>
After changing the apostrophes, the HubSpot embed code should work just fine.