MCBDSHost - Professional Minecraft Bedrock Server Management

GoFundMe Integration

Marketing Website deployment-packages/GOFUNDME-DONATION-INTEGRATION.md

GoFundMe Donation Integration - Marketing Site

Complete Donation System Added!

The MCBDSHost marketing site now has comprehensive donation integration with GoFundMe.

GoFundMe Campaign

Campaign URL: https://www.gofundme.com/f/support-minecraft-server-utilities-development

Attribution ID: sl:0e15edfd-d25f-4499-92d6-462679332e77

Integration Points

Location: Top right of every page

Features:

  • Heart icon with "Donate" text
  • Gold/warning color (Minecraft theme)
  • Opens in new tab
  • Hover effect (lifts and scales)

Code:

<a class="nav-link text-warning" href="https://www.gofundme.com/f/..." target="_blank">
    <i class="bi bi-heart-fill me-1"></i>Donate
</a>

2. Donation Banner

Location: Between main content and GoFundMe widget on all pages

Features:

  • Gold block themed (Minecraft warning color)
  • Heart icon in heading
  • Responsive layout (stacks on mobile)
  • Pulse glow animation
  • Large call-to-action button
  • Google Analytics tracking

Design:


  Support MCBDSHost Development           
 Help us continue developing...             
                                             
             [Support Us on GoFundMe]

Code:

<section class="donation-banner py-4 bg-warning bg-opacity-10 border-top border-warning">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h4><i class="bi bi-heart-fill text-danger"></i> Support MCBDSHost Development</h4>
                <p>Help us continue developing and improving MCBDSHost...</p>
            </div>
            <div class="col-lg-4">
                <a href="..." class="btn btn-warning btn-lg" target="_blank">
                    <i class="bi bi-heart-fill"></i> Support Us on GoFundMe
                </a>
            </div>
        </div>
    </div>
</section>

3. GoFundMe Widget Embed

Location: Below donation banner, above footer on all pages

Features:

  • Official GoFundMe widget
  • Shows campaign progress
  • Displays donation activity
  • Medium-sized widget (responsive)
  • Auto-updates with campaign data

Code:

<section class="gofundme-widget py-4 bg-light">
    <div class="container text-center">
        <div class="gfm-embed" 
             data-url="https://www.gofundme.com/f/support-minecraft-server-utilities-development/widget/mediumsharesheet=undefined&attribution_id=sl:0e15edfd-d25f-4499-92d6-462679332e77">
        </div>
    </div>
</section>

<script defer src="https://www.gofundme.com/static/js/embed.js"></script>

Location: Quick Links section in footer

Features:

  • Heart icon
  • Gold/warning color
  • Listed with main navigation links
  • Opens in new tab

Code:

<li>
    <a href="https://www.gofundme.com/f/..." 
       class="text-warning text-decoration-none" target="_blank">
        <i class="bi bi-heart-fill me-1"></i>Donate
    </a>
</li>

Minecraft Theme Styling

Gold Block Theme

  • Color: #faa819 (Minecraft gold)
  • Style: Block-style buttons with shadows
  • Animation: Pulse glow effect
  • Icons: Heart () in danger red

CSS Styles

Donation Banner:

.donation-banner {
    border-width: 3px;
    box-shadow: 0 4px 0 rgba(250, 168, 25, 0.3);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 0 rgba(250, 168, 25, 0.3);
    }
    50% {
        box-shadow: 0 4px 0 rgba(250, 168, 25, 0.6), 
                    0 0 20px rgba(250, 168, 25, 0.4);
    }
}

Navigation Link:

.nav-link.text-warning {
    font-weight: 700;
    transition: all 0.2s;
}

.nav-link.text-warning:hover {
    color: var(--mc-gold) !important;
    transform: translateY(-2px) scale(1.05);
}

Button Styling:

.donation-banner .btn-warning {
    box-shadow: 0 4px 0 #c88515, 0 6px 12px rgba(0,0,0,0.2);
    font-weight: 800;
}

.donation-banner .btn-warning:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c88515, 0 4px 8px rgba(0,0,0,0.2);
}

Google Analytics Tracking

Donation Click Tracking

Every donation button click is tracked:

onclick="gtag('event', 'donation_click', {
    'event_category': 'engagement',
    'event_label': 'footer_banner'
});"

Tracked Events:

  • Event Name: donation_click
  • Category: engagement
  • Label: footer_banner, nav_link, or footer_link

Analytics Dashboard:

  • View in Google Analytics Events donation_click
  • See conversion rate (visits donations)
  • Track which placement gets most clicks

Responsive Design

Desktop (> 1024px)

  • Banner: Two-column layout
  • Text on left, button on right
  • Widget: Medium size, centered

Tablet (768px - 1024px)

  • Banner: Two-column layout (stacked on small tablets)
  • Widget: Slightly smaller, centered

Mobile (< 768px)

  • Banner: Single column, stacked
  • Button: Full width below text
  • Widget: Mobile-optimized size
  • Navigation: Donate in dropdown menu

User Journey

Typical Flow

  1. User visits site Sees donate link in navigation
  2. Scrolls down page Encounters donation banner
  3. Continues scrolling Sees GoFundMe widget with progress
  4. Reaches footer Another donate link available
  5. Clicks any link Opens GoFundMe in new tab
  6. Analytics tracks Conversion recorded

Benefits of Multi-Point Integration

Maximum Visibility

  • Top navigation (always visible)
  • Content area (prominent banner)
  • Widget embed (shows progress)
  • Footer (secondary CTA)

Non-Intrusive

  • Professional appearance
  • Matches site theme
  • Not popup or modal
  • Easy to ignore if not interested

Trackable

  • Google Analytics integration
  • GoFundMe campaign tracking
  • Attribution ID for referrals
  • Conversion metrics

Expected Impact

Visibility Metrics

  • 4 touchpoints per page visit
  • 100% exposure on all pages
  • Prominent placement above fold

Engagement Opportunities

  • Navigation click (immediate action)
  • Banner click (after seeing value)
  • Widget interaction (social proof)
  • Footer click (decision made)

GoFundMe Widget Features

What the Widget Shows

  1. Campaign Title: Support Minecraft Server Utilities Development
  2. Goal Amount: Your target fundraising goal
  3. Current Amount: Real-time donation total
  4. Progress Bar: Visual progress indicator
  5. Recent Donations: Latest supporters (if enabled)
  6. Donate Button: Direct to campaign

Auto-Updates

  • Widget syncs with GoFundMe automatically
  • No code changes needed when donations come in
  • Real-time progress display

Visual Design

Color Scheme

  • Primary: Gold (#faa819) - Minecraft gold block
  • Accent: Red heart (#dc3545) - Bootstrap danger
  • Background: Light warning tint (gold opacity)
  • Border: Warning color, 3px block style

Typography

  • Heading: Bold, uppercase, letter-spaced
  • Button: Bold, uppercase, large
  • Body: Medium weight, readable

Spacing

  • Banner: Ample padding (py-4)
  • Widget: Separate section (py-4)
  • Gap between elements maintained

Campaign Message

Heading: "Support MCBDSHost Development" Body: "Help us continue developing and improving MCBDSHost. Your support makes a difference!"

Benefits Implied:

  • Continued development
  • New features
  • Bug fixes
  • Better documentation
  • Community support

Deployment

What's Included

Both updated packages contain:

  • Navigation donate link
  • Donation banner HTML
  • GoFundMe widget embed
  • Footer donate link
  • CSS animations and styling
  • Google Analytics tracking
  • GoFundMe embed script

No Additional Setup

Once deployed:

  • Widget loads automatically
  • Analytics tracks immediately
  • No backend configuration
  • Works with static hosting

Privacy & Transparency

User Data

  • No data collected by marketing site
  • Analytics tracks clicks only (anonymous)
  • GoFundMe handles donations securely
  • No sensitive data stored

Transparency

  • Clear call-to-action (no deception)
  • Direct link to GoFundMe (reputable platform)
  • Campaign purpose stated clearly
  • Optional support (not required)

Monitoring Success

Key Metrics to Track

  1. Click-Through Rate

    • Navigation clicks / Page views
    • Banner clicks / Page views
    • Widget interactions / Page views

  2. Conversion Rate

    • Donations / Total clicks
    • Average donation amount
    • Repeat donors

  3. Attribution

    • Which placement converts best
    • What pages lead to donations
    • Time to donation after visit

Google Analytics Reports

  • Events donation_click
  • Behavior Flow Donation journey
  • Conversions Goal completions

Testing Checklist

Verify everything works:

  • Donate link visible in navigation
  • Donate link styled (gold, heart icon)
  • Banner appears on all pages
  • Banner responsive on mobile
  • Widget loads correctly
  • Widget shows campaign progress
  • Footer link works
  • All links open in new tab
  • Analytics tracks clicks
  • No console errors

Campaign Details

GoFundMe Campaign

Purpose

  • Fund ongoing development
  • Server hosting costs
  • Tool improvements
  • Community support

Future Enhancements

Potential additions:

  • Donation milestones display
  • Thank you page for donors
  • Donor recognition (optional)
  • Donation progress notifications
  • Stretch goals display
  • Alternative donation methods
  • Sponsor tiers

Files Modified

  1. MainLayout.razor

    • Added donate link to navigation
    • Added donation banner section
    • Added GoFundMe widget section
    • Added donate link to footer
    • Added GoFundMe embed script

  2. marketing.css

    • Added .donation-banner styles
    • Added .gofundme-widget styles
    • Added pulse animation
    • Added navigation link styles
    • Added responsive breakpoints

Donation System Complete!

Your marketing site now has:

  • 4 donation touchpoints per page
  • Minecraft-themed gold block styling
  • Live campaign widget showing progress
  • Analytics tracking for conversion insights
  • Professional design that's non-intrusive
  • Mobile responsive on all devices

Users can now easily support your development!

Remember: Update the GoFundMe campaign regularly with:

  • Development progress
  • New features released
  • Thank you messages
  • Milestone achievements
  • Community updates

This keeps donors engaged and encourages continued support!

Back to Documentation Index Back to Top
On This Page

Support MCBDSHost Development

Help us continue developing and improving MCBDSHost. Your support makes a difference!

Support Us on GoFundMe