Using the Recur component in pages
Last updated August 5, 2026
Objective
This guide explains how to utilize the Recur Component Suite within the Website Builder. These specialized tools allow you to pull live data—such as events, products, and donation forms—directly from your Recur database and display them on your website with automatic synchronization.
Key Steps
Step 1: Access Recur Components
Open the Pages editor and navigate to the left-hand sidebar.
Locate and click the section labeled Recur.
This menu contains dynamic widgets for Events, Products, and Donations.
Step 2: Configure Event Displays
Event List: Drag the Event List onto your page to show multiple upcoming gatherings.
View Types: Choose from List, Compact List, or Masonry Grid.
Max Events & Pagination: Set the "Max Events to Show" (e.g., 20). If you have many events, toggle Show Pagination to "Yes" to add "Next/Previous" buttons, preventing the page from becoming too long.
Single Event: Use this to highlight one specific high-priority event. You can select the specific event from a dropdown at the top of the settings panel.
Event Calendar: Drag this to provide a full-month grid view. You can toggle between a Full Calendar or a Mini Calendar for sidebars.
Step 3: Showcase Products and Memberships
Product Selection: Drag a Product Single or Product List to the page.
Filtering: In the Product List settings, use the checkboxes to choose which categories to display: Membership, Sponsored, Donation, or Other.
Visuals: * Card Styles: Choose Featured (adds a "Featured" tag), Compact, or Horizontal.
Images: Click Browse Library to upload or select a thumbnail. Use "Small" for the best loading performance.
Descriptions: Choose to show the full text, a 3-line snippet, or no description at all.
Step 4: Set Up a Donation Section
Call to Action: Drag the Donation component to encourage financial support.
Payment Toggles: * Fee Coverage: Toggle Yes to allow donors to cover the Stripe processing fee. You can manually set the percentage (e.g., 3%).
Payment Categories: Enable buttons for preset donation amounts.
Backend Integration: * Contact Creation: Toggle Yes to automatically create a new contact record in Recur for any donor.
Tracking: Add a Campaign Name, Appeal Code, or Designation (e.g., Scholarship Fund) for detailed reporting in Stripe and Recur.
Legal: Enter a Tax Deductibility Statement that will automatically appear on the donor's Stripe receipt.
Cautionary Notes
Live Sync: Changes made to event dates or product prices in the main Recur dashboard will update on your website automatically; however, structural changes (like switching from a List to a Calendar) must be done manually in the Page Builder.
Pagination Visibility: The pagination buttons (Page 1 of 2, etc.) may not appear in the editor if you have fewer items than the "Max Events" limit you set.
Empty State Messages: Always customize the "Empty State Message" for your calendar so that if there are no events in a given month, users see a helpful note (e.g., "Check back soon for new workshops!") instead of a blank box.
Tips for Efficiency
Lead Generation: Use the "Create Contact" toggle on the donation form to build your marketing list for future membership outreach.
Featured Products: Use the "Featured Card" style for your most popular membership tier to make it visually stand out from other options.
Mobile View: When using the Event Calendar, check the "Mini Calendar" view on mobile devices to ensure it fits within the narrower screen width.