Add custom HTML, CSS, JavaScript, and third-party embeds like videos, maps, and widgets to extend your site's functionality.
The Embed Panel
Access the Embed Panel in the left sidebar to add custom code elements:
- Insert HTML blocks anywhere on the page
- Add custom CSS to the page or site
- Include JavaScript code
- Embed third-party widgets
Adding Custom HTML
- Drag an Embed element from the Blocks Panel
- Paste your HTML code in the Embed Panel
- Preview renders in the canvas
- Code runs in the published site
Custom CSS
Add CSS at different levels:
- Site-wide CSS - Applies to all pages
- Page CSS - Applies to current page only
- Element CSS - Applies to selected element
JavaScript Options
Add JavaScript to your site:
- Head Code - Scripts in the <head> tag
- Body Start - Scripts at the start of <body>
- Body End - Scripts before closing </body>
Common Embeds
- YouTube/Vimeo - Paste video embed code
- Google Maps - Embed interactive maps
- Social Feeds - Twitter, Instagram widgets
- Chat Widgets - Intercom, Drift, etc.
- Analytics - Google Analytics, Plausible
- Calendly - Booking widgets
Code Layers Panel
View and edit all code associated with elements:
- See generated HTML structure
- Add custom classes and attributes
- Override default HTML tags
- Add data attributes for JavaScript
Best Practices
- Load external scripts asynchronously when possible
- Minimize inline JavaScript
- Test embeds on all breakpoints
- Use HTTPS for all external resources
- Validate HTML before embedding
- Keep third-party scripts to a minimum for performance
Security Notes
- Only embed code from trusted sources
- Avoid inline event handlers when possible
- Be cautious with user-generated content
- Review third-party scripts for security