Embed Block (Lofty AOS)

Introduction

The Embed Block lets you add custom HTML, JavaScript, or third-party code snippets to a specific section of any page. Use it to embed tools, widgets, maps, booking forms, or any external content that requires code.

The code runs on the current page only, when the block loads.

Before You Begin

• The Embed Block is best suited for static or lightly interactive third-party content. For large, complex embeds, consider using the Advanced Website Customizations page-level scripts instead.
• Make sure any external scripts are from trusted sources before embedding them on your site.
• Code embedded in this block does not affect other pages.

Adding the Embed Block

1. Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
2. Select the page you want to edit from the Pages panel.
3. Click Blocks in the left navigation to open the block library.
4. Find the Embed block type and drag it to the position you want on the page canvas.
5. Double-click the block or click the Edit icon to open the code editor panel.

Adding Your Code

In the code editor, paste or write your custom HTML or JavaScript.

Scripts must use the <script> tag. For example:

``html <script> // Your custom JavaScript code here </script> ``

To embed content from an external source using a URL:

``html <script src="https://example.com/your-script.js"></script> ``

For HTML content (iframes, widgets, static HTML): Paste the embed code directly — no <script> tag needed for pure HTML.

Publishing

Click Publish in the top-right corner of the page editor to make the embedded content live on your site.

Image to Code Block (Beta)

The Image to Code block is a beta feature that uses AI to convert an uploaded image into website code, recreating the image as a built-out section on your page.

How it works: 1. Drag the Image to Code block onto your page (it appears alongside Embed in the block library). 2. Open the edit panel and upload your image. 3. The AI analyzes the image and generates the corresponding code to recreate the layout. 4. Once generated, enter a text prompt in the input box to instruct the AI to make changes. 5. Hover over the generated image to upload a new image or edit the raw code directly.

Tips

• Use the Embed Block for third-party widgets. Chatbots, booking widgets, review badges, and map embeds are all good candidates for the Embed Block.
• Use page-level scripts for site-wide code. If your code needs to run across multiple pages, add it via [Advanced Website Customizations] at the page or site level instead of adding an Embed Block to each page individually.
• Test before publishing. Use the Preview button to verify your embed is loading and displaying correctly before making it live.
• Keep embedded code minimal. Heavy scripts can slow down page load times, which impacts both user experience and SEO.

Troubleshooting

My embed isn't showing on the page. Check that your code is correctly wrapped in the appropriate tags (<script> for JavaScript, or paste the HTML directly for iframe/widget code). Also verify that the block was published after the code was added.

The embedded content looks broken or incomplete. The Embed Block runs code in the context of your Lofty page — some third-party scripts may require additional configuration or may conflict with the page's existing CSS. Contact the third-party tool's support team for iframe or embed-specific code.

I need this code to run on multiple pages. Use [Advanced Website Customizations] to add the code at the page or site level, rather than adding an Embed Block to each page individually.

Frequently Asked Questions

Can I embed an iframe in the Embed Block? Yes. Paste your iframe HTML code directly into the block editor — no <script> tag needed for iframes.

Can I embed a Google Map? Yes. Google Maps provides an embed code (iframe) that can be pasted directly into the Embed Block.

Is there a character or file size limit for the code I can add?

Will the embedded script affect other pages? No. Code in the Embed Block only runs on the specific page where the block is placed, and only when the block loads.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.