UNI Territory Sea Scouts Results Widget

Quick Start Guide

Step 1: Find Your Group Slug

1. Go to your group's page on https://uni.seascouts.org.nz

2. Look at the URL: https://uni.seascouts.org.nz/groups/your-group-name/

3. The highlighted part is your group slug

Step 2: Copy This Basic Code

                <!-- Sea Scouts Results Widget -->
                <div id="seascouts-results" data-group-slug="PUT-YOUR-GROUP-SLUG-HERE">
                </div>

                <script>
                window.seaScoutsEmbed = {
                apiUrl: 'https://uni.seascouts.org.nz/wp-json/seascouts/v1'
                };
                </script>
                <script
                src="https://uni.seascouts.org.nz/wp-content/themes/uniss/assets/js/group-results-embed.js"></script>
            

Step 3: Customize (Optional)

Add any of these options to your widget div:

Option	Values	Description
`data-max-results`	1-100	Number of results to show (default: 10)
`data-style`	default, compact, detailed, table	How the results look (default: default)
`data-show-images`	true, false	Show trophy/result images (default: false)
`data-sort-by`	year, trophy_name, date_created	How to sort results (default: year)
`data-sort-order`	desc, asc	Newest first or oldest first (default: desc)

💡 Example with All Options

                <div id="seascouts-results"
                data-group-slug="your-group-slug"
                data-max-results="8"
                data-style="detailed"
                data-show-images="true"
                data-sort-by="year"
                data-sort-order="desc">
                </div>
            

🛠️ Troubleshooting & Tips

❌ Widget Not Showing?

Check that your group slug is correct (no spaces, all lowercase)
Make sure both script tags are included
Check browser console for error messages (F12 → Console)
Verify your group exists on https://uni.seascouts.org.nz

🖼️ Images Not Showing?

Ensure data-show-images="true" is set
Not all trophies may have photos - this is normal

🎨 Styling Tips

Sidebar: Use data-style="compact" for narrow spaces
Homepage: Use data-style="detailed" for visual impact
Archive: Use data-style="table" for comprehensive lists
Mobile: All styles are mobile-responsive

⚡ Performance Tips

Limit results with data-max-results for faster loading
Images use lazy loading automatically
Results are cached for 30 minutes
Multiple widgets on one page are supported

🆘 Need Help?

Use the Widget Code Generator at the top of this page to:

Configure options visually
See a live preview
Get copy-paste ready code
Test different configurations

UNI Territory Event Results Widget

🛠️ Widget Code Generator

⚙️ Configuration

📄 Generated Code

🔍 Live Preview

Examples

Example 1: Default Style

Example 2: Compact Style (Max 5 Results)

Example 3: Detailed Style

Example 4: Table Style

Example 5: Detailed Style with Images