Embedding HTML in pages
Last updated August 5, 2026
Objective
This guide demonstrates how to use the Embed Component within the Recur Website Builder. This feature allows you to integrate custom HTML, external forms, or Recur’s own specialized widgets directly into your web pages to extend functionality beyond standard design tools.
Key Steps
Step 1: Create or Select a Page
Navigate to the Pages section of the Recur Website Builder.
Either select an existing page to edit or click to create a New Page.
Step 2: Locate the Embed Component
On the left-hand sidebar, click on the Components tab.
Look under the Content category.
Find the component labeled Embed (often represented by a code icon
< >).
Step 3: Drag and Drop the Component
Click and hold the Embed component.
Drag it onto your page layout and drop it into the specific section where you want the custom content to appear.
Step 4: Insert Custom HTML or Widget Code
Access Settings: Once the component is placed, look at the Right-Hand Sidebar settings panel.
Paste Code: Locate the code input field (often labeled "HTML" or "Embed Code").
Apply Content: Paste your custom HTML or your specific Recur Widget code into this box.
Example: If you have designed a custom Event Widget in the Recur Widget Tools, copy that specific embed code and paste it here.
Step 5: Save and Verify
Save your changes in the editor.
Preview: View the page in the public website mode. The custom code will render as the intended element (such as a form, calendar, or external feed) exactly where you placed the puck.
Cautionary Notes
Code Accuracy: The Website Builder will execute the code exactly as pasted. Ensure your HTML is complete (e.g., all tags like
<div>are properly closed) to avoid breaking the layout of the rest of the page.Security: Only embed code from trusted sources (like Google Forms, YouTube, or Recur Widgets). Malicious scripts can compromise the security of your site and member data.
Mobile Responsiveness: Custom HTML may not always scale automatically for mobile devices. Test your page on a smartphone after embedding code to ensure it doesn't "break" the page width.
Tips for Efficiency
Using Recur Widget Tools: You can design custom widgets (like event lists or member directories) within Recur’s separate Widget Tool, copy that code, and use this Embed process to place them on multiple pages.
External Integrations: This is the ideal tool for adding third-party features like a Google Map, a Spotify playlist, or a specialized contact form from an external provider.
Troubleshooting: If the code doesn't appear correctly in the editor, try saving and viewing the Live version of the site, as some complex scripts only execute fully on a published URL.