Embeddable Widget

Display your upcoming events and volunteer needs on any external website. The widget is a simple JavaScript embed that shows events and links visitors to your portal to sign up.

In this guide:

  1. Widget overview
  2. Enabling the widget
  3. Embedding on your site
  4. Widget settings
  5. Widget features
  6. Styling and layout

Widget Overview

The embeddable widget lets you display your Zendo's upcoming events on any website, such as your temple's main website. The widget:

  • Shows upcoming events with dates, times, and locations
  • Displays coverage status with color-coded progress bars
  • Shows volunteer avatars for who's signed up
  • Includes a "Sign Up to Help" button linking to your portal
  • Updates automatically when events change

The widget is self-contained and won't interfere with your website's styles. It uses its own CSS and renders in a clean, responsive container.

Enabling the Widget

To enable the widget for your Zendo:

  1. Go to Settings
  2. Scroll to the Embeddable Widget section
  3. Check "Enable Widget"
  4. Configure your preferred settings

Once enabled, the embed code will appear below the settings. Changes are saved automatically.

Embedding on Your Site

Copy the embed code from Settings and paste it into your website's HTML where you want the widget to appear:

<script src="https://zenserve.co/widget.js?v=4" data-zendo="yoursubdomain" data-limit="5"></script>

Embed Attributes

Attribute Required Description
data-zendo Yes Your Zendo's subdomain (e.g., "ssz")
data-limit No Number of events to show (1-10, defaults to your setting)
data-header No "true" or "false" - Show/hide the header with logo and name (default: true)
data-coverage No "true" or "false" - Show/hide coverage status bars (default: true)
data-signups No "true" or "false" - Show/hide volunteer avatars (default: true)
data-event No "all" or event ID - Filter to all events or a specific event (default: all)

Multiple Widgets

You can embed multiple widgets on the same page with different configurations. For example, one widget showing all events and another showing only a specific recurring event:

<!-- All events with full display -->
<script src="https://zenserve.co/widget.js?v=4" data-zendo="ssz" data-limit="3"></script>

<!-- Specific event, minimal display -->
<script src="https://zenserve.co/widget.js?v=4" data-zendo="ssz" data-event="123" data-header="false" data-signups="false"></script>

Placement Tips

  • Place in a sidebar or content area of your website
  • The widget is responsive and adapts to its container width
  • Maximum width is 500px to maintain readability
  • Works with most website builders and CMS platforms

Widget Settings

Configure how your widget displays in Settings > Embeddable Widget:

Number of Events to Show

Choose how many upcoming events to display (1-10). This default is saved to your account; the data-limit attribute in the embed code can override it for specific embeds.

Display Options

Toggle what information appears in the widget: header (logo and name), coverage status bars, and volunteer avatars. These options update the embed code - you can create different versions of the widget for different pages.

Events to Display

Choose between showing all upcoming events or filtering to a specific event. When you select a specific recurring event, the widget will show multiple upcoming occurrences of that event (up to the limit).

Widget Features

Event Display

Each event shows:

  • Date with month and day
  • Event name
  • Start and end times
  • Location (if set)

Coverage Status

When enabled, the coverage bar shows:

  • Green - All positions filled
  • Yellow - 50% or more filled
  • Red - Less than 50% filled (spots available)

Volunteer Avatars

When "Show Signed Up" is enabled, the widget displays overlapping avatar images of members who have signed up for positions. This includes both qualified members and trainees.

Privacy note: Only Gravatar images are shown - no names or identifying information is displayed on the widget.

Call to Action

The widget includes a "Sign Up to Help" button that links directly to your portal's login page, making it easy for visitors to join and volunteer.

Styling and Layout

The widget is designed to look good on any website:

  • Self-contained CSS - Won't conflict with your site's styles
  • Responsive width - Fills container up to 500px maximum
  • Scrollable event list - Shows up to 5 events before scrolling
  • Loading state - Shows spinner while fetching data
  • Error handling - Displays friendly message if unavailable

Container Suggestions

For best results, place the widget in a container that's at least 320px wide. Example:

<div style="max-width: 400px;">
  <script src="https://zenserve.co/widget.js?v=4" data-zendo="yoursubdomain"></script>
</div>

Related Guides