How to Embed Fund My School on Your Website

WordPress Integration

Method A: Embedded iFrame (Block Editor / Gutenberg)

1. Open the WordPress page or post where you want the portal to appear.
2. Click the + (Add Block) button and search for Custom HTML.
3. Paste the following code (replace YOUR_SCHOOL_SLUG with your slug):

<iframe src="https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG" width="100%" height="850" frameborder="0" style="border:none; border-radius:12px; width:100%;" title="School Fundraising Portal"></iframe>

Method B: Page Builders (Elementor / Divi)

• Elementor: Drag an HTML Widget into your column and paste the iFrame code above. Alternatively, use a Button Widget and set the URL to https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG.
• Divi Builder: Add a Code Module and paste the iFrame code.

Method C: WordPress Main Menu Link

1. Go to Appearance > Menus in your WordPress Dashboard.
2. Expand the Custom Links tab on the left.
3. Enter your public portal URL in the URL field and "Raffles & Events" in the Link Text field.
4. Click Add to Menu and click Save Menu.

Joomla Integration

Method A: Custom HTML Module Embed

1. In Joomla Admin, go to Content > Modules > New.
2. Select Custom HTML (or Custom in Joomla 4+).
3. In the editor toolbar, click Toggle Editor or Source Code (<>) to enter raw HTML view (this ensures TinyMCE doesn't filter out <iframe> tags).
4. Paste your iFrame code and set your target position (e.g. main-top or position-1).
5. Set status to Published and Save.

Method B: External URL Menu Item

1. Go to Menus > Main Menu > Add New Menu Item.
2. Click Select next to Menu Item Type and choose System Links > External URL (or URL).
3. Enter "School Raffles" in Menu Title and paste your full URL https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG in the Link field.
4. Click Save & Close.

Hard-Coded HTML / Custom Websites

Option 1: Full-Width Responsive iFrame Embed

Embeds your raffle grid cleanly inside any page section:

<!-- Fund My School iFrame Container -->
<div style="position: relative; width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
    <iframe src="https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG" 
            style="width: 100%; height: 850px; border: none; min-height: 600px;" 
            title="School Fundraising Portal">
    </iframe>
</div>

Option 2: Styled Call-To-Action (CTA) Button

A standalone high-converting button link for your homepage or newsletter:

<!-- Fund My School Action Button -->
<a href="https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG" 
   target="_blank" 
   rel="noopener" 
   style="display: inline-flex; align-items: center; gap: 8px; background-color: #4F46E5; color: #ffffff; padding: 14px 28px; font-weight: 600; font-size: 16px; border-radius: 8px; text-decoration: none; box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25);">
   🎟️ Support Our School - Buy Tickets Online &rarr;
</a>

Option 3: Modal Pop-up Overlay (Advanced HTML/JS)

Opens the public portal in an interactive lightbox pop-up on your website:

<button onclick="document.getElementById('fms-modal').style.display='flex'" style="padding:12px 24px; background:#4F46E5; color:#fff; border:none; border-radius:8px; font-weight:600; cursor:pointer;">Open Raffle Portal</button>

<div id="fms-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; justify-content:center; align-items:center;">
    <div style="position:relative; width:90%; max-width:1000px; height:85%; background:#fff; border-radius:12px; overflow:hidden;">
        <button onclick="document.getElementById('fms-modal').style.display='none'" style="position:absolute; top:12px; right:16px; z-index:10; background:#f1f5f9; border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-weight:bold;">&times;</button>
        <iframe src="https://fundmyschool.co.za/?t=YOUR_SCHOOL_SLUG" style="width:100%; height:100%; border:none;"></iframe>
    </div>
</div>