Target audience: Site administrators who are new to the donations feature
This article explains how to add and configure donation campaign progress meters on your website to track fundraising goals and encourage donor participation.
Overview
Progress meters visually display your fundraising campaign's goal and current progress. Whether you're raising funds for a building project, mission trip, or special initiative, progress meters help donors see the impact of their contributions and motivate them to give.
You can create progress meters in two ways:
- Tithe.ly Integration - Automatically syncs with your Tithe.ly account
- Manual Progress Meters - Enter and update campaign details yourself
Adding a Progress Meter to Your Page
- Navigate to the page where you want to display the progress meter
- Add a new section
- Select "Donations - Campaigns" as the section type
- Configure your campaign settings (explained below)
Campaign Types
Tithe.ly Campaigns
If you've connected your Tithe.ly account, you can select from your existing campaigns. The progress meter will automatically sync with real-time donation data from Tithe.ly.
What syncs automatically:
- Campaign name and description
- Goal amount
- Current donation total
- Start and end dates
- Campaign image
- Recent donor list
Manual Progress Meters
Manual progress meters let you track fundraising without Tithe.ly integration. This option is perfect if you:
- Use a different payment processor
- Collect donations offline (cash, checks)
- Want to combine donations from multiple sources
- Prefer to update totals manually
What you enter:
- Campaign Name - The title of your fundraising initiative
- Goal Amount - Total amount you want to raise
- Current Amount - Amount raised so far (update this as donations come in)
- Start Date (optional) - When the campaign begins
- End Date (optional) - Campaign deadline
- Description (optional) - Details about your campaign
- Donation Link (optional) - URL to your external donation page
- Campaign Image (optional) - Visual to accompany your campaign
Display Options
Control what information appears on your progress meter:
Basic Information
- Title - Show/hide the campaign name
- Description - Display campaign details
- Goal - Include goal amount in the title
- Start Date - Display when campaign begins
- Finish Date - Show campaign deadline
- Image - Campaign photo (Tithe.ly campaigns only)
Interactive Elements
- Progress Bar - Visual meter showing completion percentage
- Donate Button - Call-to-action button for giving
- Recent Donations - List of recent contributors (Tithe.ly only)
- Chart/Graph - Bar chart showing top donors (Tithe.ly only)
Layout Options
- Alignment - Center the campaign display or use default alignment
- 2 Column Layout - Split information across two columns for a wider presentation
Progress Bar Styles
Choose from multiple visual styles to match your website design:
Standard Styles
- Horizontal Bar - Traditional progress bar (default)
- Circle - outline - Circular outline that fills as you progress
- Circle - filled - Solid circle that fills from center
- Square - Square shape progress indicator
Themed Styles
Perfect for churches and faith-based organizations:
- Heart - Heart shape fills as donations increase
- Church 1 - Church building silhouette
- Church 2 - Alternative church design
- Cross 1 - Cross shape progress meter
- Cross 2 - Alternative cross design
- Image - Use your own custom image as the progress indicator
Color Customization
- Progress Color - Color for the amount received
- Progress Text - Font color for the percentage display
- Progress Background - Color for the amount still needed
- Label Background - Background color behind text labels
Donate Button Configuration
Button Appearance
- Button Text - Customize the call-to-action (default: "Donate")
- Button Icon - Add an icon from Font Awesome library (default: heart)
- Button Style - Choose from preset styles or create custom buttons
Button Style Options
- Regular 1-6 - Six preset button designs
- eCommerce 1-2 - Shopping-focused button styles
- Custom - Define your own colors, shapes, and sizes
Custom Button Settings
When you select "Custom" button style, you can configure:
- Color - Choose any color using the color picker
- Shape - Square, Circle, or Rounded corners
- Size - Small, Medium, Large, X-Large, XX-Large, XXX-Large
- Fill - Background (solid) or Outline (border only)
Manual Progress Meters
For manual campaigns, enter the Donation Link - the URL where people should go to give (your payment processor, donation form, etc.). If you leave this blank, the button won't appear.
Chart and Graph Options (Tithe.ly Only)
Display donor engagement with visual charts:
Available Charts
- Bar: Top Donors - Horizontal bar chart showing leading contributors
Chart Customization
- Fill Color - Choose the color for chart bars
Best Practices
Keeping Progress Current
For Manual Progress Meters:
- Update the "Current Amount" field regularly as donations come in
- Set a reminder to check for offline donations (cash, checks) weekly
- Consider updating immediately after large donations to maintain momentum
For Tithe.ly Integration:
- Progress updates automatically - no manual updates needed
- Ensure your Tithe.ly account is properly connected
Setting Effective Goals
- Make goals specific and achievable
- Break large campaigns into smaller milestones
- Update the goal amount if you surpass your target to maintain momentum
Visual Design Tips
- Choose progress bar styles that match your website's theme
- Use themed styles (hearts, crosses, churches) when appropriate for your audience
- Ensure text colors have good contrast with backgrounds for readability
- Consider using 2-column layout for campaigns with lots of information
Writing Campaign Descriptions
- Clearly explain what the funds will be used for
- Include the "why" - help donors understand the impact
- Keep it concise but compelling
- Add urgency if there's a deadline
Button Strategy
- Use action-oriented button text ("Give Now," "Support This," "Make an Impact")
- Place buttons prominently where they're easy to find
- For manual campaigns, test your donation link to ensure it works
Common Scenarios
Scenario 1: Building Fund with Offline Donations
Use a manual progress meter to track a construction project where people give through multiple channels (online, checks, cash):
- Set the goal amount
- Update current amount weekly as you receive and deposit donations
- Include a description of what the building will be used for
- Link to your online giving page for convenience
Scenario 2: Mission Trip Fundraising
Create urgency with a deadline and visual progress:
- Enable start and finish dates to show time remaining
- Use a heart or themed progress style
- Write a compelling description about the mission
- Update progress regularly to build excitement
Scenario 3: Annual Giving Campaign
Track yearly fundraising with Tithe.ly integration:
- Let progress sync automatically
- Enable "Recent Donations" to show community participation
- Use the bar chart to recognize top donors
- Choose a clean horizontal bar for professional appearance
Troubleshooting
Progress meter isn't showing on my page
- Verify you've added a "Donations - Campaigns" section to your page
- Check that you've selected a campaign (or entered manual details)
- Ensure at least one display option is enabled (Progress Bar, Title, etc.)
Donate button isn't appearing (Manual campaigns)
- Enter a Donation Link URL in the button configuration
- Enable "Show Donate Button" in Display Options
- Save your changes
Tithe.ly campaigns aren't showing
- Contact your administrator to verify Tithe.ly integration is configured
- Check that campaigns are active in your Tithe.ly account
Progress bar shows wrong percentage
- For manual campaigns, verify Goal Amount and Current Amount are entered correctly
- For Tithe.ly campaigns, check that donations are properly recorded in Tithe.ly