WordPress Component Test Page
1. SummaryBox Component
Companies lose $37,000 annually per employee from inefficient processes. The solution isn't more documentation - it's execution.
– IDC Research
- Workflow software transforms your repetitive processes into automated digital pathways that actually get followed - saving teams 4+ hours weekly per employee
- Unlike complex BPM systems that cost six figures, modern workflow tools work instantly for $10-30 per user monthly
- The best workflow software isn't about features - it's about what actually gets used
- Curious how companies are saving hundreds of hours annually per employee? Schedule a quick chat
2. ExampleBox Component
- It's NOT project management - Projects end. Workflows repeat. If you're building a house, you need project management. If you're processing invoices every week, you need workflow software.
- It's NOT complex BPM - BPM is like managing an entire airport. Workflow is getting one plane to land safely. You shouldn't need a PhD and six consultants to set up employee onboarding.
- It's NOT just documentation - A flowchart doesn't remind Sarah to approve the budget. Documentation describes work. Workflow software makes work happen.
- 2 hours daily per person asking 'where are we on this?' (520 hours annually)
- 25 minutes to refocus after each status interruption
- 4+ hours saved weekly per employee with proper workflow tools
- Significant accuracy improvement when manual data entry is automated
- Flexible icons - Choose from multiple FontAwesome icons
- Dark mode support - Automatically adapts to user theme preference
- HTML in bullets - Supports emphasis, bold, and links
3. InterlinkingBox Component
Using Slot for Full Control
4. ComparisonTable Component
| What You Actually Need to Know | ||
|---|---|---|
| Workflow Software | BPM Systems | |
| Setup Time | 10 minutes to first workflow | 6-12 months with consultants |
| Cost Reality | $10-30 per user monthly | $100K-750K+ implementation |
| What You Get | Working process today | Consultant presentations about processes |
| Who Uses It | Your actual team members | The specialized BPM team you'll need to hire |
Simple Comparison (No Title)
| Feature | Included | Cost |
| Process Templates | ✓ | Free |
| Team Collaboration | ✓ | Free |
| Automation Rules | ✓ | Free |
| Custom Integrations | ✓ | $29/month |
5. FAQGrid Component
Can you go through our vendor onboarding process?
Yes, we welcome IT security reviews, legal/MSA/privacy agreements, and compliance checks. We have experience with regulated environments.
Can you define the specific roles available?
We have two pricing tiers: Light and Full roles. Full includes Standard and Administrator roles.
What's the difference between a member and a guest?
Members are regular users from your company (identified by email domain). Guests are external users with limited access.
With Custom Styling
Does FAQGrid support HTML in answers?
Yes! You can use bold text, italics, and even links in your answers.
How does spacing work?
FAQGrid automatically adds 30px/15px spacers between FAQ items, matching the WordPress pattern.
6. Grid System (Row/Column)
Full Width Column (span="12")
This column spans the entire width
Half Width (span="6")
This column takes up half the width
Half Width (span="6")
This column also takes up half the width
5/12 Width
Question column (5 of 12)
7/12 Width
Answer column (7 of 12) - This is the FAQ pattern used on pricing page
7. Spacer Component
The spacing you see between sections is controlled by the Spacer component:
<Spacer size="64px" mobile="32px" />- Large spacing (64px desktop, 32px mobile)<Spacer size="30px" mobile="15px" />- Small spacing (30px desktop, 15px mobile)-
<Spacer size="100px" mobile="80px" />- Extra large spacing (100px desktop, 80px mobile)
Manual FAQ Pattern (Before FAQGrid)
This shows the old manual approach using Row/Column/Spacer. See section 5 for the new FAQGrid component that simplifies this.
Can you go through our vendor onboarding process?
Yes, we welcome IT security reviews, legal/MSA/privacy agreements, and compliance checks. We have experience with regulated environments.
Can you define the specific roles available?
We have two pricing tiers: Light and Full roles. Full includes Standard and Administrator roles.
What's the difference between a member and a guest?
Members are regular users from your company (identified by email domain). Guests are external users with limited access.
8. IconComponent Widget
The IconComponent replaces the WordPress [tfIcon icon="FaIconName"] shortcode with Unicode symbols:
9. SolutionCTA Widget
The SolutionCTA component replaces the [solution-cta] shortcode for solution page CTAs:
Ready to streamline your compliance workflows?
See how Tallyfy makes compliance simple and repeatable
Need help with employee onboarding?
Join thousands of teams who've automated their onboarding process
Transform your workflow automation
Start saving time today with intelligent process management
10. RoiCalculator Widget
The RoiCalculator component replaces the [roi-calc] shortcode with an interactive JavaScript calculator:
Are you hearing this at work? That's busywork
Enter between 1 and 150,000
Enter between 0.5 and 40
Enter between $10 and $1,000
Based on $30/hr x 4 hrs/wk
Your loss and waste is:
every week
What you are losing
Cash burned on busywork
per week in wasted wages
What you could have gained
160 extra hours could create:
per week in real and compounding value
Total cumulative impact over time (real cost + missed opportunities)
You are bleeding cash, annoying every employee and killing dreams.
It's a no-brainer
11. HighIntentCTA Widget
The HighIntentCTA component replaces the [high-intent-page] shortcode for high-conversion pages:
Ready to transform your workflows?
Join thousands of teams streamlining their operations with Tallyfy
12. IntegrationsCompliance Widget
The IntegrationsCompliance component replaces the [integrations-compliance] shortcode displaying integration logos and compliance badges:
Integrations
Security & Compliance
13. WaveSignupCTA Widget
The WaveSignupCTA component replaces the [wave-signup-cta] shortcode with an eye-catching wave SVG background:
14. Testimonials Widget
The Testimonials component replaces the [testimonial-carousel] shortcode. Real testimonials are stored in the content collection at /src/data/testimonial/:
What Our Customers Say
"Our clients sail through the Tallyfy process. It has transformed how we deliver projects.
"
Kasim Aslam
Founder, Sol8
"Tallyfy enables our team to run seamless client onboarding processes across multiple locations.
"
Karen Finnin
Director, Online Physio
"Tallyfy helps us ensure compliance and maintain consistent service delivery.
"
Peter Walton
Owner, WaltonMD
15. ProfileCard & ProfileRow Widgets
The ProfileCard and ProfileRow components replace the [profile-card] and [profile-row] shortcodes for team member displays:
John Smith
John has 20+ years of experience in workflow automation and process optimization.
Jane Doe
Jane leads our engineering team and oversees all technical architecture decisions.
Bob Wilson
Bob ensures our customers get maximum value from Tallyfy's workflow automation platform.
16. VimeoPlayer Widget
The VimeoPlayer component replaces the WordPress [vimeo id="VIDEO_ID"] shortcode (224 uses in WordPress content). Responsive, privacy-enhanced video embedding:
With Autoplay and Loop (muted required for autoplay)
VimeoPlayer Props
id(required) - Vimeo video ID from URLtitle- Accessible title for the video (default: "Video")autoplay- Auto-play on load (default: false)muted- Start muted (required for autoplay)loop- Loop playback (default: false)class- Additional CSS classes
Privacy-enhanced mode (dnt=1) is enabled by default. Videos use lazy loading for performance.
17. ComplianceGrid Component (Site-Wide Standard)
The ComplianceGrid component is the site-wide standard for displaying integrations and compliance information. It shows 12 boxes with 48 links covering API, SSO, Security, Legal, and more. This replaces the simpler IntegrationsCompliance component on all templates.
Tallyfy is secure, proven and enterprise-grade
API & Webhooks
Free SSO
Middleware
BI & Data Export
Events & Triggers
AI & Automation
Security
Documents
Analytics & Metrics
Email Integration
Legal & Enterprise
ComplianceGrid Usage
<ComplianceGrid />- Uses default title: "Tallyfy is secure, proven and enterprise-grade"<ComplianceGrid title="Custom Title" />- Override with custom title- Static component - no data props needed, completely self-contained
- Used on: Homepage, all 40 solution pages, all 62 alternative pages
18. YouTubePlayer Widget
The YouTubePlayer component uses a facade pattern for performance - shows a thumbnail until clicked. Replaces WordPress [youtube id="VIDEO_ID"] shortcode:
YouTubePlayer Props
id(required) - YouTube video ID from URLtitle- Accessible title for the video (default: "Video")class- Additional CSS classes
Performance-optimized: Only loads YouTube iframe when user clicks to play.
19. HowItWorks Component
The HowItWorks component displays process steps. Used on homepage, solution pages, and alternative pages. Supports grid-centered (default), grid, and list variants:
Grid Centered Variant (Default)
How Tallyfy Works
Three simple steps to transform your workflows
2. Track
Real-time visibility into every task and workflow status.
List Variant (for blog posts)
Implementation Steps
-
1. Audit current processes
Identify your most repetitive workflows and pain points.
-
2. Design templates
Create reusable templates for common procedures.
-
3. Train your team
Roll out gradually with proper training and support.
HowItWorks Props
title(required) - Section headingsubtitle- Optional subheadingsteps(required) - Array of { title, description, icon?, number? }variant- 'grid-centered' (default), 'grid', or 'list'showNumbers- Show step numbers (default: true)
Supports HTML in descriptions for internal links. Auto-defaults to Tabler icons.
20. TfQuote Component
The TfQuote component displays styled quotes with attribution. Replaces WordPress [tfquote] shortcode. Supports negative, neutral, and positive templates:
" The old system was impossible to use without extensive training. We spent months trying to make it work. "
" Workflow automation continues to be a growing market segment with significant enterprise adoption. "
" Setup took 10 minutes instead of the 6 months we spent on our previous BPM tool. "
21. CompetitorPricingCard Widget
The CompetitorPricingCard component displays competitor pricing in a structured card format. Used in blog posts and comparison pages:
- Up to 10 teammates
- Timeline
- Workflow Builder
- Goals
- Portfolios
- Workload
Non-Public Pricing Example
Expect sales calls and unpredictable costs. Hard to budget or compare.
See Tallyfy's transparent pricing instead22. ComparisonTableCheckmarks Widget
The ComparisonTableCheckmarks component displays a visual checkmark comparison grid. Used on alternative pages:
Tallyfy vs. Process Street
23. AlternativeComparisonTable Component
The AlternativeComparisonTable component provides detailed feature comparisons with SVG icons. Used on alternative/comparison pages:
Why switch to Tallyfy?
All Block Components Demonstrated
This page demonstrates all 23+ block components:
Layout (Row, Column, Spacer),
Content (SummaryBox, ExampleBox, InterlinkingBox, ComparisonTable, FAQGrid, TfQuote),
Widgets (IconComponent, SolutionCTA, RoiCalculator, HighIntentCTA, WaveSignupCTA, ProfileCard, ProfileRow, VimeoPlayer, YouTubePlayer, CompetitorPricingCard),
Steps (HowItWorks),
Comparison (ComparisonTableCheckmarks, AlternativeComparisonTable), and
Site-Wide Standards (ComplianceGrid, TestimonialsRolling).
See /src/components/blocks/README.md for full documentation.