Interactive Proposal Features Playground

This page showcases EVERY interactive element you can use in proposals. Each section is labeled with what it is and how to use it.

📝 Context: You're AppDraft, a Salesforce consultancy. The client is an event venue management company considering Salesforce for managing bookings, guests, catering, and operations.

🏷️ TABS: Switch between content sections without page reload. Great for organizing different aspects of your proposal.

Overview Tab Content

This content appears when "Overview" tab is selected. Each tab shows different content.

🎚️ SLIDERS: Let users adjust values to see real-time calculations. Perfect for ROI calculators, cost estimators, timeline adjustments.

ROI Calculator - Move the Sliders!

Your Current Metrics

Your Annual Benefits

Automation Savings (30% efficiency)
£157,500
Revenue Increase (15% growth)
£37,500
Guest Retention Value
£1,250
Total Annual Impact
£196,250
ROI: 207%

📂 ACCORDION: Click to expand/collapse sections. Great for FAQs, detailed features, technical specs without overwhelming the page.

🪟 MODAL: Overlay popup for detailed content, videos, forms, or additional info without navigating away from the proposal.

📊 PROGRESS BAR: Show completion status, project phases, or engagement tracking. This one auto-animates for demo purposes.

Proposal Review Progress0% Complete

Track how much of the proposal you've reviewed (or show implementation progress)

⚖️ COMPARISON TOGGLE: Switch between "before" and "after" states to show transformation. Great for showing current vs. future state.

Current Manual Process

  • Bookings managed in Excel spreadsheets - prone to double-bookings
  • Guest info scattered across email, phone notes, and paper forms
  • Staff manually coordinate catering, AV, setup via group chats
  • No visibility into upcoming events or staff availability
  • Payment tracking in separate system - reconciliation nightmare

❓ QUIZ/ASSESSMENT: Interactive questionnaire to qualify prospects, gather requirements, or personalize recommendations based on answers.

Quick Assessment - Answer to Get Personalized Recommendation

How many event spaces do you manage?

What type of events do you primarily host?

Biggest operational challenge?

🛠️ CONFIGURATOR: Let prospects build their own package by selecting features. Price updates in real-time. Great for modular offerings.

Build Your Custom Package

Select Features:

Your Custom Package

Base Platform£25,000
Total Investment£25,000

💰 PRICING CARDS: Interactive tier selection. Highlight differences, show "most popular", update CTA based on selection.

Starter

£45,000
  • Single venue
  • Basic booking
  • Email support
  • 30-day onboarding
MOST POPULAR

Professional

£75,000
  • Up to 5 venues
  • Advanced CRM
  • Priority support
  • Staff scheduling
  • Custom reporting
  • 60-day onboarding

Enterprise

£95,000
  • Unlimited venues
  • Full platform
  • 24/7 support
  • Dedicated CSM
  • Custom integrations
  • White-label options

📝 FORMS: Capture questions, feedback, or contact info directly in the proposal. Can integrate with CRM/email.

Have Questions? Ask Us Anything

📈 CHART TOGGLE: Switch between chart types (bar, line, pie) to visualize data differently. Would use Chart.js or Recharts library.

Event Revenue Projection

Chart Library Placeholder

Use Recharts, Chart.js, or D3.js

to show actual data visualization

🔘 ACTION BUTTONS: Clear CTAs with icons, hover effects, and visual feedback. Can trigger downloads, shares, scheduling, etc.

Next Steps

💬 TOOLTIPS: Hover over icons/text to show additional context without cluttering the page. Great for technical terms or feature details.

Platform Features

Cloud Native
Fully hosted on Salesforce cloud - no servers to maintain
Enterprise Security
SOC 2 Type II certified with end-to-end encryption
Lightning Fast
Optimized for speed with global CDN and caching

What You've Just Seen:

Interactive Elements:

  • ✓ Tabs (content organization)
  • ✓ Sliders (ROI calculator)
  • ✓ Accordion (collapsible FAQs)
  • ✓ Modal (popups for videos/details)
  • ✓ Progress bars (engagement tracking)
  • ✓ Comparison toggle (before/after)
  • ✓ Quiz/Assessment (qualification)
  • ✓ Feature configurator (build your own)

More Elements:

  • ✓ Pricing cards (tier selection)
  • ✓ Forms (capture feedback)
  • ✓ Chart toggles (data visualization)
  • ✓ Action buttons (CTAs)
  • ✓ Tooltips (contextual help)
  • ✓ Dark mode toggle
  • ✓ Notifications (feedback)
  • ✓ Real-time calculations

💡 This is a web app (Next.js/React), not a static site. All interactions run in the browser using JavaScript/TypeScript.