.svg){kind=icon}
Native EF Components — Visual Test
This sandbox page contains every Everflow native component and custom HTML pattern. Use it to verify rendering, spacing, and styling. Last updated: March 10, 2026. 44 sections: 14 native EF + 18 custom HTML + 12 Accounting Integration components.
1. Substep Block
Numbered procedural steps. Double wrapper on first, single on rest.
{transaction_id} macro.
2. Steps Block — Collapsible (short content)
Use collapsible for steps with short bullet lists. Content starts hidden, user clicks to expand.
2b. Substep Block — Open with Images Inside
Use substep blocks for steps that need to show images, callouts, and rich content always visible. ef-steps-block cannot be forced open — it either collapses (collapsible) or hides content (no attribute). Substep blocks always show content.
Go to
You will see the connection status. If it shows Disconnected, click Reconnect to re-authorize.
Click Connect next to your accounting software. A popup will appear asking you to authorize access.
After connecting, the status should change to Connected. Check the Mapping tab for your chart of accounts.
3. Bullet List
Standard and nested bullet lists.
4. Table (Native EF)
Uses ef-table-row, ef-table-cell, ef-table-header-cell — NOT standard HTML table tags.
5. Accordion
Collapsible sections. Double wrapper on accordion group.
Everflow supports Server-to-Server (S2S) postbacks, JavaScript SDK, HTML pixel, and clickless tracking via coupon codes.
A Transaction ID (TID) is a unique identifier generated by Everflow for each click. It links the initial click to the final conversion.
Use the built-in postback tester under
6. Tabbed Component (Custom HTML/CSS)
Custom tabbed content built with CSS + JS. ef-tab-block exists in the CMS but does NOT render as tabs — use this custom pattern instead.
QuickBooks Online Setup
Connect your QBO account through the Vault integration. Requires admin access to your QBO organization.
- Navigate to Accounting Integration settings
- Click Connect QuickBooks
- Authorize Everflow in the OAuth popup
Xero Setup
Connect your Xero account through the Vault integration. Requires admin access to your Xero organization.
- Navigate to Accounting Integration settings
- Click Connect Xero
- Authorize Everflow in the OAuth popup
NetSuite Setup
Connect your NetSuite account through token-based authentication. Requires administrator role in NetSuite.
- Generate a Token ID and Token Secret in NetSuite
- Enter credentials in the Everflow integration page
- Map your GL accounts
7. Color Callout — Note (Blue)
8. Color Callout — Warning (Orange)
9. Callout with Icon — Attribute Tests
Testing all attribute combinations for ef-callout. Check which ones show full content vs cut off.
9a. collapsible + opened="true" (recommended)
This content should be visible and the callout should be collapsible (click to toggle).
9b. collapsible only (no opened)
9c. opened="true" only (no collapsible)
This content should be visible. Can you collapse this one?
9d. NO attributes (expect content cut off)
If you can see this text, the callout works without any attributes. If not, content is cut off.
10. Text Border Highlight
Inline UI references with navigation icons. No wrapper needed.
Navigate to
Go to
Check your reports at
Open
Click the
11. Note Highlight
Inline tip text:
12. Code Block
13. Styled Link Button (HTML Alternative)
Native ef-button does not render. Use a styled HTML link instead. Opens in new tab.
14. SVG Icon Showcase
All navigation and menu icons available in production (5+ uses):
Custom HTML Components
The components below use <style> blocks and custom HTML. Since the sandbox is pushed via API, <style> blocks survive and render correctly.
15. Before / After Comparison Cards
- Manual CSV exports every month
- Reconcile each payment by hand
- Hope nothing was missed
- Automatic sync on approval
- Records appear in seconds
- Full audit trail
16. Interactive Checklist
17. Info Boxes (4 Colors — Pastel Everflow Palette)
Pro Tip
Purple info box — primary Everflow brand color. Use for helpful tips and additional context.
Heads Up
Warm gold warning box — Everflow accent color. Use for important caveats or things to watch out for.
Success
Soft pastel green — gentle confirmation. Use for completed steps or success messages.
Error
Soft pastel red — gentle error indicator. Use for common errors and their solutions.
18. Two-Column Comparison
❌ Wrong Way
Wrapping native EF components in a regular <div> tag. This causes them to fail silently.
✅ Right Way
Always use <div data-rt-embed-type='true'> as the wrapper for all EF components.
19. Video Embed (Purple Border)
Purple-bordered video embed — replace URL with Loom/YouTube/Vimeo link
20. Flow Diagram (Click Journey)
21. Decision Tree (Interactive Cards)
22. Video Player with Chapter Navigation
Rich video embed with collapsible chapter markers that seek to timestamps. YouTube API integration for click-to-seek.
Video Walkthrough: Sample Tutorial
23. Use-Case Cards (2-Column Grid)
Hover-interactive cards showing problem/solution pairs. Responsive grid collapses to 1 column on mobile.
24. Searchable Table with Copy-to-Clipboard
Live search filter with copy buttons on each row. Uses native ef-table elements with custom JS overlay. Search highlights matching rows.
25. Troubleshooting Flowchart (Static)
Static reference version — all paths visible. Good for printing/scanning.
{transaction_id} to your postback URL or SDK call.25b. Troubleshooting Flowchart (Interactive)
Click Yes or No to follow your path. Previous steps dim, your path highlights.
{transaction_id} in your postback URL or SDK conversion call.26. Feature Comparison Matrix
Checkmark/X grid for comparing options. Clean badges with pastel colors.
| Feature | Server Postback | JavaScript Pixel | Everflow SDK |
|---|---|---|---|
| Server-side tracking | ✓ | ✕ | ✓ |
| Works with ad blockers | ✓ | ✕ | ~ |
| Real-time conversion | ✓ | ✓ | ✓ |
| No code changes needed | ✕ | ✓ | ✕ |
| Supports revenue passback | ✓ | ~ | ✓ |
| Mobile app support | ✓ | ✕ | ✓ |
✓ Supported ~ Partial ✕ Not Supported
27. Copy-Paste Config Block
Key-value pairs with individual copy buttons. For setup articles with URLs, IDs, and tokens.
28. Expandable FAQ Accordion
Custom-styled Q&A pairs with smooth expand/collapse. Pastel Everflow palette.
A click is recorded when a user interacts with a tracking link. A conversion is recorded when that user completes a desired action (purchase, signup, etc.) and the conversion is reported back to Everflow via postback, pixel, or SDK.
Conversions can be rejected for several reasons: duplicate transaction ID, click-to-conversion time outside the allowed window, or the offer's cap has been reached. Check the Conversion Report status column for the specific rejection reason.
Yes! Use Server-to-Server (S2S) postbacks. Your server fires an HTTP request to Everflow when a conversion happens. This method works with ad blockers and is the most reliable tracking approach.
28b. Expandable FAQ Accordion — Topic Icons
Same smooth expand/collapse as 28, but each question gets a category-specific icon instead of a generic "Q". Icons are 24×24 PNGs inside the pastel circle. Replace SITE_ID in img src with your Webflow asset URLs.
A click is recorded when a user interacts with a tracking link. A conversion is recorded when that user completes a desired action (purchase, signup, etc.) and the conversion is reported back to Everflow via postback, pixel, or SDK.
Conversions can be rejected for several reasons: duplicate transaction ID, click-to-conversion time outside the allowed window, or the offer's cap has been reached. Check the Conversion Report status column for the specific rejection reason.
Yes! Use Server-to-Server (S2S) postbacks. Your server fires an HTTP request to Everflow when a conversion happens. This method works with ad blockers and is the most reliable tracking approach.
Navigate to Reports → Performance, select your date range and dimensions (e.g. Offer, Partner, Day), then add columns for the metrics you need. Save the report as a template for quick access later.
Go to Partners → Manage, click + New Partner, fill in their details, and send the invite. They'll receive an email to set up their account and access their dashboard.
Payment schedules depend on your billing configuration. Go to Billing → Payment Terms to set the frequency (weekly, bi-weekly, monthly) and minimum thresholds. Payments are generated automatically on the scheduled date.
29. Alert Banner (Deprecation / Time-Sensitive)
Full-width dismissible banner for deprecation notices, migration deadlines, or event announcements. NOT the same as warning callout — this is more prominent and time-bound.
30. Status Progress Tracker
Visual progress bar showing step completion. Place above native Steps/Substep blocks as an overview.
31. Glossary Tooltips
Hover over the transaction ID? to see its definition. Works on any inline text — no component wrapper needed.
Here is another example in a sentence: Make sure to configure your postback URL? before going live with partners, and verify the offer cap? is set correctly.
Accounting Integration Components
Components extracted from the 8 Accounting Integration articles (March 2026). These cover ERP-specific patterns, status indicators, troubleshooting cards, and navigation components.
33. Raw HTML Table (Styled)
Styled HTML table with purple header gradient, alternating rows, and rounded corners. Use when native ef-table lacks the formatting you need (5 of 8 accounting articles use this pattern).
| Everflow Pay | QuickBooks Online | NetSuite | Xero |
|---|---|---|---|
| Payee / Partner / Affiliate | Vendor | Vendor | Contact |
| Invoice | Bill | Vendor Bill | Bill |
| Payment | Bill Payment | Vendor Payment | Bill Payment |
| Expense Account | Account | Expense Account | Expense Account |
| Funding Wallet | Bank Account | N/A | Bank Account |
34. ERP Card Grid
3-column card grid with logo badges and hover effects. Use for platform/integration selection or feature comparison entry points.
35. Process Flow Steps (Vertical)
Horizontal numbered flow that stacks vertically on mobile. Highlights trigger steps with a badge. Different from Click Journey (section 20) — simpler and suited for linear processes.
36. Comparison Cards (Auth/Feature)
Side-by-side feature comparison cards with check/dash indicators. Use for comparing platforms, plans, or feature sets at a glance.
- ✓ Expense Account
- ✓ Bank Account
- ✓ Expense Account
- —N/A
- ✓ Expense Account
- ✓ Bank Account
37. ERP Tabs (Alternative Implementation)
Tab switcher using ef-tab-bar/ef-tab-btn/ef-tab-panel classes with inline JS. Alternative to section 6 which uses tab-buttons/tab-panel. Includes platform badges (OAuth vs Token-Based).
- You'll see a connection card with the QuickBooks logo, "Accounting Connection" label, and an "Unauthorized" status
- Click the "Authorize" button
- You'll be redirected to the Intuit login page
- Log in with your QuickBooks credentials and authorize Everflow Pay to access your account
- If you have multiple companies associated with your Intuit account, select the correct company from the dropdown
- Once redirected back, click Save to complete the connection
- You'll see a connection card with the NetSuite logo, "Accounting Connection" label, and an "Unauthorized" status
- Enter your NetSuite credentials directly into the following fields:
- Account ID — Found in Setup > Company > Company Information (sandbox IDs end with '_SB1', '_SB2', or '_SB3')
- Consumer key — From the integration registration in your NetSuite application
- Consumer secret — From the integration registration in your NetSuite application
- Access token ID — From the integration registration in your NetSuite application
- Access token secret — From the integration registration in your NetSuite application
- SuiteTax enabled — Select if using SuiteTax for advanced tax calculations
- Need help? Click the "View our Connection Guide" link in the connection card
- Click Save to authorize Everflow Pay to access NetSuite
- You'll see a connection card with the Xero logo, "Accounting Connection" label, and an "Unauthorized" status
- Click the "Authorize" button
- You'll be redirected to the Xero login page
- Log in with your Xero credentials and authorize Everflow Pay to access your account
- Once redirected back, select your Default Tenant (your Xero organization) from the dropdown
- Click Save to complete the connection
38. Mapping Diagram
Two-sided visual with arrow connectors showing how entities map between systems. Use for data flow or relationship explanations.
39. Status Legend Grid
Color-coded status indicator cards with dot, label, and description. Use for explaining status values, severity levels, or category definitions.
Payee is linked to a valid Vendor/Contact. Syncs work normally.
The Vendor/Contact is no longer available (deleted, deactivated, or archived in your accounting software). Syncs are blocked until you assign a new one.
No Vendor/Contact mapped. Syncs don't happen for this Payee until you create a mapping.
40. Series Navigation Cards
Numbered article series cards with gradient headers, descriptions, and CTA buttons. Use for linking related articles in a sequence.
What Accounting Integration does, what data it syncs (Invoices and Payments), which platforms are supported, and the key terms you'll see throughout the series.
After reading: You'll understand the feature at a high level and know what to expect from the setup process.
Read Article →How to connect your accounting software step by step: selecting your integration of choice, authorizing Everflow Pay to gain read & write access.
After reading: You'll be ready to start mapping your Partners (Payees) to Vendors in your Accounting ERP.
Read Article →What Payee-to-Vendor mapping is, why it matters, and how it works across different Accounting ERPs.
After reading: You're ready to start watching reconciliation happen for your Accounts Payables into your Accounting ERP.
Read Article →How the sync process works: what triggers a sync, what gets created in your accounting software, how to read the Syncs tab, and what each status means. Also covers what happens when payments are rejected and retried, and how to verify syncs using the memo reference.
After reading: You'll be able to read the Syncs tab confidently and understand the full data flow from Everflow Pay to your books.
Read Article →41. Reference Card Grid
Icon + title + description cards linking to related articles. Use for "See also" or "Related resources" sections at the end of articles.
Quick guide to monitoring your syncs, reading statuses, and verifying records landed in your books.
Read Article →Troubleshoot connection-level issues that block all syncs: expired tokens, lost connections, and disabled integrations.
Read Article →Resolve individual sync failures for specific payees: missing vendors, data mismatches, and duplicate entries.
Read Article →42. Status Lookup Table
Interactive expandable status reference with color-coded icons and location badges. Click any row to see what to do. Use for "what does this mean?" reference sections.
Nothing to do — everything is working.
Click "View Details" to go to the Syncs tab and fix the failed syncs.
Monitor only — these are system-level issues that will self-resolve.
Connection error. Click "Reconnect" to re-authorize. See Fixing Connection Errors.
Platform-wide pause. Wait — syncs resume automatically.
Click to filter the Syncs tab to failed syncs only.
Click to map unmapped Payees to Vendors.
Re-map the Payee — see Managing Payee-To-Vendor Mapping.
Payee is unmapped. Map the Payee to a Vendor first.
Click "View details" on the payment row, or go to the Syncs tab for the full picture.
Cross-reference this ID back to the original Everflow Pay invoice for traceability.
43. Priority Pyramid
Visual severity hierarchy with expanding width tiers. Use for error triage, priority ordering, or any ranked list where visual weight matters.
44. Expandable Resolution Cards
Click-to-expand troubleshooting reference cards with color-coded severity dots and resolution badges. Use for error lookups, connection issues, or any compact reference where users need details on demand.
45. Spacing Test
This section tests spacing between components. Check that the gap between each element looks correct and consistent.
A paragraph between two callouts.
Another paragraph to check spacing.
46. Changelog (What's Changed)
Collapsible timeline for article update history. Place near the bottom of updated articles (not new ones). Click header to expand. Uses color-coded tags: Added (green), Updated (purple), Fixed (gold), Removed (red).
