Extend your Durable website's functionality by embedding custom code and content from external services. The Embed section allows you to integrate unique elements and advanced customizations not available through standard Durable sections.
Understanding the Embed Section
The Embed section is designed to integrate external content or custom code directly into your Durable website. While Durable is primarily a "no code" solution for building websites, this section offers a powerful way to extend functionality for specific needs.
Purpose: Integrate content that isn't natively supported by Durable's standard sections.
Common Use Cases: Embed interactive maps (e.g., Google Maps), third-party forms, social media feeds, video players, or other custom widgets.
Flexibility: You can paste HTML, CSS, or JavaScript directly into the editor.
Adding an Embed Section to Your Website
Go to your website editor and navigate to the page where you want to add the custom code.
Scroll to the desired location on your page and click the Add Section button.
In the "Add a section" modal, select Embed from the list of available section types.
The new Embed section will be added to your page.
Inserting Your Custom Code
Locate the newly added Embed section on your page.
Click the Edit custom code button within the Embed section.
A "Custom Code" modal will appear. Paste your HTML, CSS, or JavaScript code into the provided editor.
Click Done to apply the code and close the modal.
The code will not be rendered in the web editor. To view the code live, publish your changes, then review your website to ensure it displays and functions as expected. You may need to adjust the code for optimal appearance.
Best Practices and Limitations for Embed Code
To ensure your website remains secure and performs well, keep the following in mind when using the Embed section:
Trusted Sources: Only embed code from reputable and trusted sources. Malicious code can compromise your website's security and functionality.
Iframe Sizing: When embedding iframes (common for maps, videos, or external forms), it's often necessary to specify a fixed height. For example, use
height="450px". Whilewidth="100%"generally works well for responsiveness, a fully responsive height (e.g.,height="100%") may not function as expected within Durable's layout.Testing: Thoroughly test all embedded content across different devices and browsers to ensure proper display and functionality for all your visitors.
Performance: Avoid embedding overly complex scripts or extensive custom HTML that could negatively impact your website's loading speed or conflict with Durable's site structure. Remember, Durable is designed as a "no code" platform, and while the Embed section offers flexibility, it's best used for specific, targeted integrations.
What's next
After adding and customizing your Embed section, be sure to publish your changes and review your site to confirm the content appears correctly. Explore other sections like the Call to Action section or Gallery section to further enhance your site's content and design.