Dynamic & Interactive Elements

ZiraDocs goes beyond static presentations by supporting dynamic and interactive elements that engage your audience and make presentations more memorable. These features help transform presentations from monologues into engaging dialogues.

Overview

Interactive features in ZiraDocs include:

• Live polls and surveys - Real-time audience participation
• Q&A systems - Structured question management
• Reveal content - Progressive content disclosure
• Embedded content - Videos, maps, and external content
• Interactive navigation - Non-linear presentation flows
• Dynamic data - Real-time content updates

Interactive Elements

Polls and Surveys

Create engaging polls to gather audience feedback and maintain attention.

Flex Mode:

## Quick Poll

What's your preferred development approach?

:::poll id="dev_approach" results="visible"
- [ ] Agile/Scrum methodology
- [ ] Waterfall approach
- [ ] Hybrid methodology
- [ ] Kanban workflow
:::

**Current Results:** {{poll.dev_approach.results}}

Strict Mode:

SLIDE interactive
  title: "Audience Poll"
  POLL "dev_approach"
    question: "What's your preferred development approach?"
    options: ["Agile/Scrum", "Waterfall", "Hybrid", "Kanban"]
    show_results: true
    multiple: false

Q&A Sessions

Integrate structured question and answer sessions into your presentations.

Flex Mode:

## Q&A Session

Submit your questions using the form below:

:::qa_session id="main_qa" moderation="true"
**Guidelines:**
- Keep questions concise and relevant
- One question per submission
- Questions will be moderated before display
:::

**Submitted Questions:** {{qa.main_qa.count}}

Use Cases:

• Webinars - Collect questions throughout the presentation
• Training sessions - Address specific participant concerns
• Corporate meetings - Structured feedback collection

Progressive Content Reveal

Show content progressively to maintain audience focus and build suspense.

Flex Mode:

## Implementation Steps

:::reveal
### Phase 1: Planning
- **Timeline:** 2 weeks
- **Deliverables:** Project scope, requirements

:::reveal_content
**Detailed Planning Activities:**
- Stakeholder interviews (3 days)
- Requirements gathering (5 days)
- Technical feasibility analysis (3 days)
- Resource allocation planning (3 days)
:::

### Phase 2: Development
- **Timeline:** 6 weeks
- **Deliverables:** MVP, testing suite

### Phase 3: Deployment
- **Timeline:** 2 weeks
- **Deliverables:** Production release, documentation
:::

Strict Mode:

SLIDE process
  title: "Implementation Roadmap"
  REVEAL_GROUP
    ITEM "Phase 1: Planning (2 weeks)"
      DETAILS
        TEXT "Stakeholder interviews, requirements gathering"
        TEXT "Technical feasibility and resource allocation"
    ITEM "Phase 2: Development (6 weeks)"
    ITEM "Phase 3: Deployment (2 weeks)"

Embedded Content

Video Integration

Embed videos directly in your presentations for rich multimedia experiences.

YouTube Videos:

## Product Demo

Watch our latest feature demonstration:

:::embed type="youtube" video_id="dQw4w9WgXcQ"
width="100%" height="400px" autoplay="false"
:::

**Key takeaways from the demo:**
- Improved user interface
- 40% faster performance
- Enhanced security features

Direct Video Files:

## Training Video

:::embed type="video"
src="assets/training-module-1.mp4"
controls="true" width="800" height="450"
:::

Interactive Maps

Display geographic data and locations with interactive maps.

Simple Location Map:

## Our Office Locations

:::embed type="iframe"
src="https://www.openstreetmap.org/export/embed.html?bbox=-74,40,-73,41"
width="100%" height="400px"
:::

**Headquarters:** New York, NY
**Regional Offices:** London, Tokyo, Sydney

Dashboard Embeds

Include live dashboards and analytics in your presentations.

## Real-Time Performance

:::embed type="iframe"
src="https://dashboard.company.com/public/sales-overview"
width="100%" height="500px"
sandbox="allow-scripts allow-same-origin"
:::

**Data updated:** Every 5 minutes
**Metrics shown:** Sales, conversions, user activity

Dynamic Data Integration

Real-Time Variables

Use dynamic variables that update during the presentation.

Live Session Data:

---
variables:
  session_participants: ${live.participants}
  current_time: ${live.timestamp}
  poll_responses: ${poll.tech_stack.total_responses}
---

## Welcome to Our Webinar

**Current attendees:** {{session_participants}}
**Session time:** {{current_time}}
**Poll responses so far:** {{poll_responses}}

API Data Integration

Connect to live data sources for up-to-date information.

---
data_sources:
  sales_api: "https://api.company.com/sales/current"
  weather_api: "https://api.weather.com/current"
  refresh_interval: "5m"
---

## Current Status

**Today's sales:** ${{data.sales_api.today_total|currency}}
**Weather at HQ:** {{data.weather_api.temperature}}°F
**Last updated:** {{data.last_refresh|time}}

Interactive Navigation

Conditional Branching

Create presentations that adapt based on audience choices.

Flex Mode:

## Choose Your Path

What would you like to explore today?

:::branch_buttons
- [Technical Implementation](#technical-deep-dive)
- [Business Overview](#business-case)
- [Use Cases & Examples](#use-cases)
:::

---
id: technical-deep-dive
---

# Technical Deep Dive
*Content for technical audience...*

---
id: business-case
---

# Business Overview
*Content for business stakeholders...*

Strict Mode:

SLIDE choice
  title: "Customize Your Experience"
  TEXT "What's your primary interest?"

  BRANCH_BUTTON "Technical Details" target="tech_slides"
  BRANCH_BUTTON "Business Impact" target="business_slides"
  BRANCH_BUTTON "Implementation" target="implementation_slides"

SLIDE_GROUP tech_slides
  SLIDE technical_overview
    title: "Technical Architecture"
    # Technical content...

Navigation Controls

Add custom navigation elements for non-linear presentations.

## Presentation Menu

:::navigation
- [Introduction](#intro) - Project overview
- [Technical Details](#tech) - Architecture deep-dive
- [Demo](#demo) - Live demonstration
- [Q&A](#qa) - Questions and discussion
- [Next Steps](#next) - Action items
:::

**Current section:** {{navigation.current_section}}
**Progress:** {{navigation.progress}}% complete

Interactive Forms

Feedback Collection

Gather structured feedback during presentations.

## Session Feedback

:::form id="session_feedback"
action="https://api.company.com/feedback"
:::

**How would you rate this session?**
- [ ] Excellent - Exceeded expectations
- [ ] Good - Met expectations
- [ ] Fair - Some improvement needed
- [ ] Poor - Significant issues

**What topics would you like covered next time?**
[ ] Text input field

**Submit Feedback** [Button]

Registration Forms

Capture attendee information and preferences.

## Workshop Registration

:::form id="workshop_signup"
:::

**Personal Information:**
- Name: [ Text input ]
- Email: [ Email input ]
- Company: [ Text input ]

**Session Preferences:**
- [ ] Beginner track
- [ ] Advanced track
- [ ] Custom implementation

**Special Requirements:**
[ ] Textarea for additional notes

**Register Now** [Submit button]

Best Practices

Engagement Guidelines

1. Purpose-driven interactivity - Only add interactive elements that enhance your message
2. Clear instructions - Always explain how to interact with elements
3. Technical testing - Test all interactive features before presentation
4. Backup plans - Have static alternatives ready
5. Accessibility - Ensure interactive elements work with assistive technologies

Performance Considerations

• Load times - Optimize embedded content for fast loading
• Bandwidth - Consider audience internet connection quality
• Device compatibility - Test on mobile devices and tablets
• Graceful degradation - Provide fallbacks for unsupported features

Security & Privacy

• Data collection - Be transparent about data usage
• External content - Validate safety of embedded sources
• User consent - Request permission for data collection
• Secure transmission - Use HTTPS for all external connections

Implementation Examples

Corporate Training Session

---
mode: flex
title: "Employee Onboarding - Day 1"
interactive: true
---

# Welcome to TechCorp! 👋

## Quick Introduction Poll

:::poll id="intro_poll"
**What's your role?**
- [ ] Software Engineer
- [ ] Product Manager
- [ ] Designer
- [ ] Data Scientist
- [ ] Other
:::

---

## Training Modules

:::reveal
### Module 1: Company Culture
**Duration:** 30 minutes

:::reveal_content
**Learning objectives:**
- Understand company values
- Learn communication protocols
- Explore collaboration tools

**Interactive elements:**
- Culture quiz
- Virtual office tour
- Team introductions
:::

### Module 2: Tools & Systems
**Duration:** 45 minutes

### Module 3: First Project
**Duration:** 60 minutes
:::

---

## Live Q&A

:::qa_session id="onboarding_qa" moderation="false"
**Ask anything about:**
- Company policies
- Tools and systems
- Team structure
- Growth opportunities
:::

**Questions submitted:** {{qa.onboarding_qa.count}}

Sales Presentation

---
mode: flex
title: "Product Demo - Q4 2024"
variables:
  prospect_name: "Acme Corp"
  demo_date: "2024-12-15"
---

# Welcome {{prospect_name}}!

## Agenda Customization

What would you like to focus on today?

:::poll id="agenda_focus" multiple="true"
- [ ] Technical capabilities
- [ ] ROI and pricing
- [ ] Implementation timeline
- [ ] Support and training
- [ ] Integration options
:::

---

## Live Product Demo

:::embed type="iframe"
src="https://demo.ourproduct.com/live-demo"
width="100%" height="600px"
:::

**Demo environment:** Customized for {{prospect_name}}
**Data shown:** Representative of your use case

---

## Implementation Planning

:::branch_buttons
- [Pilot Program](#pilot) - Start small, 30-day trial
- [Full Deployment](#full) - Enterprise-wide rollout
- [Custom Solution](#custom) - Tailored implementation
:::

---
id: pilot
---

## Pilot Program Details

**Timeline:** 30 days
**Users:** Up to 50 team members
**Support:** Dedicated success manager
**Investment:** ${{pricing.pilot|currency}}/month

:::form id="pilot_interest"
**Express interest in pilot program:**
- Contact: [ Email input ]
- Preferred start date: [ Date input ]
- Team size: [ Number input ]

**Request Pilot** [Submit]
:::

Advanced Features

Real-Time Collaboration

Enable multiple presenters and audience interaction:

---
collaboration:
  co_presenters: ["john@company.com", "sarah@company.com"]
  audience_questions: true
  live_annotations: true
  shared_whiteboard: true
---

## Collaborative Session

**Current presenters:** {{collaboration.active_presenters}}
**Audience size:** {{collaboration.audience_count}}
**Questions queue:** {{collaboration.questions_pending}}

:::whiteboard id="main_board"
tools="pen,highlighter,shapes"
collaborative="true"
:::

Analytics Integration

Track engagement and presentation effectiveness:

---
analytics:
  track_engagement: true
  heatmap_tracking: true
  poll_analytics: true
  completion_tracking: true
---

## Presentation Analytics

**Current engagement:** {{analytics.engagement_score}}%
**Slide attention:** {{analytics.current_slide_time}}s
**Most engaging:** Slide {{analytics.top_slide}}
**Poll participation:** {{analytics.poll_participation}}%

Related Documentation

• Advanced Elements - Charts, maps, and rich media
• Special Blocks - Interactive block elements
• Variables & Templates - Dynamic content management
• Themes & Styling - Customizing interactive element appearance

Future Roadmap

Planned interactive features include:

• Voice interaction - Voice-controlled navigation
• AR/VR support - Immersive presentation experiences
• AI integration - Smart content recommendations
• Advanced analytics - Machine learning insights
• Real-time translation - Multi-language audience support

---

Interactive elements require HTML output format and may need additional setup for full functionality.