Are you looking to reward your Bevy chapters with badges as part of an award program? Custom widgets using EmbedIt can help you do just that. In this guide, we’ll walk you through the steps to create and publish a custom badge widget (gold, silver, bronze) and make it available for chapters to use on their pages.

Here’s how to build the widget using EmbedIt:

Step 1: Create a New Custom EmbedIt Widget in the Admin Dashboard

1. Log into the Bevy Admin Dashboard. Start by accessing your admin account in Bevy, and navigate to the admin dashboard.

2. Navigate to the Widgets section. Look for the "Page Builder" tab, "Widgets" section where you can manage custom embeds.

3. Create a New Widget. Click on the button to create a new custom widget. This will open a blank code editor where you can add your custom code.

Step 2: Add the Necessary Code

Now that you've created a new widget, it’s time to embed the code that will display badges on the chapter's pages. You can design your badges as HTML, CSS, and JavaScript snippets to customize the appearance and behavior.

• Insert HTML structure for the badges.

You will need three badges (gold, silver, bronze). Here’s a simple example of the structure:

<div id="badge"></div>

Add interactivity using JavaScript. You can add some interactivity like animations or conditions that grant these badges dynamically. Here’s an example of a simple calculation of stars count based on the badge type:

<script>
    const badgeTypes = ['Gold', 'Silver', 'Bronze'];
    let currentBadgeIndex = 0;

    function createStarSVG() {
          return `<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
          </svg>`;
    }

    function updateBadge() {
        const badgeType = '{{badge}}';
        const badgeElement = document.getElementById('badge');
        badgeElement.className = badgeType;
        const starCount = badgeType === 'Gold' ? 3 : (badgeType === 'Silver' ? 2 : 1);
        const stars = Array(starCount).fill(createStarSVG()).join('');
        badgeElement.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="8" r="6"></circle>
                <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"></path>
            </svg>
            <span>${badgeType}</span>
            <div id="stars">${stars}</div>
        `;
    }

    // Initialize the badge
    updateBadge();
</script>

Add the variable "badge"

Set the default value "Gold".

This variable will be visible in the chapter's settings. For this example, it can take the values Gold, Silver or Bronze

Style the badges using CSS.

Add CSS styling to ensure that the badges look appealing and differentiated. Example:

<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    #badge {
        display: flex;
        align-items: center;
        border-radius: 9999px;
        padding: 0.5rem 1rem;
        margin-bottom: 2rem;
    }

    #badge svg {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
    }

    #badge span {
        font-weight: 600;
    }

    #stars {
        margin-left: 0.5rem;
        display: flex;
    }

    .star {
        width: 1rem;
        height: 1rem;
        margin-right: 0.25rem;
        fill: currentColor;
    }

    .Gold {
        background-color: #fbbf24;
        color: #92400e;
    }

    .Silver {
        background-color: #d1d5db;
        color: #1f2937;
    }

    .Bronze {
        background-color: #d97706;
        color: #fffbeb;
    }
</style>

Step 3: Make the Widget Available for Chapters

Once you've added your code, make sure the widget is ready to be used by chapters.

1. Save the widget. After you’ve finished adding your code, save the widget. Ensure that it’s saved under a name that’s easy to identify, such as “Chapter Badge Widget.”

2. Publish the widget. In the admin dashboard, ensure the widget is available for "Chapter" so it can be accessed by chapters.

Step 4: Add the Widget to Chapter Pages

1. Go to the Chapter's Page Builder Template. Each chapter may have its own customizable page where widgets can be added, or you can modify the global template for chapters.

2. Edit the Page with the Page Builder. Use Bevy's Page Builder feature to edit the layout of the chapter’s page.

3. Add the EmbedIt Widget to the Canvas. In the page builder, locate the section where you want to add the badges. Drag and drop the newly created EmbedIt widget (e.g., “Chapter Badge Widget”) into the canvas where you want the badges to appear.

4. Save the Page Builder template. Once you’ve placed the widget on the page, save the template. This will apply the widget to the live chapter page, displaying the badges for viewers.

Step 5: Test and Finalize

After adding the widget to the chapter page, visit the chapter’s public page to ensure the badges display correctly and any interactivity works as expected. If necessary, go back to the widget in the admin dashboard to make any adjustments.

Try changing the value of the variable badge for the widget in the chapter's setting.

Finally, in the page you'll see: