🗓️Embedding a Widget

This page describes how to embed CrowdWork widgets into your website.

CrowdWork offers multiple ways to showcase your upcoming events directly on your website. These embeddable widgets make integrating your shows and classes easy. Once embedded, your shows and classes will update automatically.

What Are Widgets?

Widgets are components that display your shows and classes on your website. All widgets:

  • Auto-sync with your Dashboard

  • Link directly to booking pages

  • Can be filtered by categories

  • Are customizable with your own CSS

  • Use responsive design for all screen sizes

To get started, go to Theatre > Embeds in your Dashboard menu to find your widget code.

Using Squarespace? WordPress? Weebly? Wix?

If your website uses a CMS or website editing tool, check out our Platform-Specific Embedding Guides to find step-by-step instructions for your particular website platform

Widget Types

Widgets are available in two formats, Calendar view and Card view. Both views are available for shows and classes, letting you choose the best format for each page on your site.

Calendar View

Calendar View features:

  • Familiar monthly calendar layout showing all upcoming events

  • Desktop: full calendar grid

  • Mobile: scrollable list

  • Preview details on hover

  • Past events appear dimmed

Commonly used for:

  • Main "Shows" schedule pages

  • Complete event listings

Card View

Card View features:

  • Visual cards with event images

  • Multiple cards per row on desktop, single column on mobile

Commonly used for:

  • Main "Classes" page

  • Homepage features

  • Special events & promotions

Getting Started with Widget Embedding

The default widget code displayed in your Dashboard is ready for use - just copy and paste it into your website to display all your public classes or shows. Or use the customization options below to create filtered views and specialized displays for a specific tag or starting month.

Dashboard screen for customizing embed codes

Widget Tips

  • You can embed multiple widgets on the same page.

  • You can even embed widgets on other websites than your own! Customize the widget, copy the code and share it with performer's personal websites and local event sites to expand your reach - and all ticket sales still flow through your account.

  • Calendar views are taller than card views and need more vertical space available on your website to display properly.

  • Widgets automatically stay in sync with changes made to events in your Dashboard.

Customization Options

Make unique widgets the way you want them!

The best and easiest way to create custom widgets is using the controls in your Dashboard. Simply select your preferences for tag, starting month, or day of week - the code snippet will update automatically with the correct parameters. Copy and then paste the code where you want it to display on your website.

Customization controls on the Widget Embeds screen in the Dashboard

Using Squarespace? WordPress? Weebly? Wix?

We've created easy-to-follow guides for embedding CrowdWork widgets on popular website platforms. Follow these Platform-Specific Embedding Guides for a smooth setup:

Start here to find your website platform. Don't see what you need? Contact us for assistance.

Filtering by Tag

To display only events with a specific tag:

  1. Go to Theatre > Embeds in your Dashboard menu

  2. Choose your widget type (Shows or Classes)

  3. Select your preferred view (Calendar or Cards)

  4. Find the "Category" dropdown and select your desired tag

  5. Copy the updated code and paste it into your website

Only one tag can be used per widget.

Setting a Specific Start Month

To have your calendar initially display a specific month:

  1. Go to Theatre > Embeds in your Dashboard menu

  2. Choose your widget type (Shows or Classes)

  3. Select "Calendar" view

  4. Use the "Starting Month" option to select your desired month

  5. Copy the updated code and paste it into your website

Starting on a specific month can be helpful if you're using a widget to promote an upcoming event far in advance, such as a festival this summer or classes this fall.

Setting the Start Day of Week

To choose which day the calendar week starts on:

  1. Go to Theatre > Embeds in your Dashboard menu

  2. Choose your widget type (Shows or Classes)

  3. Select "Calendar" view

  4. Use the "Start Day of Week" option to select your preferred starting day

  5. Copy the updated code and paste it into your website

Creating Additional Custom Widgets

With the customization options above, you can create as many unique widgets as you'd like. You can:

  • place multiple widgets on a single page (display Shows & Classes on the same page);

  • place widgets on multiple websites, even other than your own! (give the embed code to a local blog or featured performers to place the listing of events on their sites, and the sales still flow through your CrowdWork account!);

Creative Uses for Custom Widgets

Here are some great ways theatres use additional custom widgets on their sites:

  • Organize by Experience Level: Tag classes with skill levels ("L1", "Beginner", etc). Add level-specific widgets to sections of your classes page OR dedicated Level pages.

  • Feature Teams & Teachers: Tag shows and classes with teams, performers, teachers. Embed performance calendars on team/teacher bios or personal websites

  • Market Special Events:

    • Free Events: Tag "FREE", create a dedicated intro/trial page

    • Season Preview: Use start-date widgets to preview upcoming seasons

    • New Student Specials: Tag beginner classes & pair with discount codes

For Advanced Users: Widget Code Reference

To create widgets, visit Theatre > Embeds in your Dashboard and use the customization controls. While manual code editing is possible, we strongly recommend using the customizer to ensure proper formatting and avoid errors. The following information about manual customization is provided for reference.

The Dashboard's widget customizer provides access to all the configuration options that are available. However, for those comfortable editing HTML, you can manually customize widget code.

Before You Start...

  • Sample Code: The widget code snippets provided on this page are just samples – find & customize your theatre's code in the Dashboard under Theatre > Embeds to access your embed codes

  • Custom Editing: If you make edits by hand, remember that:

    • Starting Day of Week requires a single digit and zero means Sunday

    • Starting Month dates must be in the format: YYYY-MM

    • Tag names are case-sensitive and must match exactly

  • Code Formatting: You can format the widget code however you like:

    • putting it all on one line (as shown in your Dashboard & preferred, especially for WordPress, Squarespace, etc.); or

    • splitting it across multiple lines (as shown on this page for easier reading);

    • however, did we say yet that we always recommend copying it directly from your Dashboard? 😸

Basic Structure

Here's a breakdown of the all available configuration options:

<div><script 
 id="fw_script" 
 src="https://crowdwork.com/embed.js?v=6"          // Widget version (use the version shown in your dashboard)
 data-theatre="yourtheatre"                        // Your account subdomain
 data-type="shows"                                 // "shows" or "classes"
 data-view="calendar"                              // "calendar" or "cards"
 data-category="YourTagName"                       // Optional: Filter by one tag (case sensitive)
 data-initial-date="2024-12"                       // Optional: Starting month (YYYY-MM)
 data-dow="1"                                      // Optional: Starting day (0=Sun, 1=Mon...)
></script></div>

Filtering by Tag (Advanced)

To display only events with a specific tag:

  1. Start with the code sample below or copy the default code from your Dashboard at Theatre > Embeds and be sure to add your account details in data-theatre="yourtheatre"

  2. For the data-category="YourTagName" attribute, enter a single case-sensitive public tag (e.g., "Comedy" not "comedy") 

<!-- Show calendar filtered by tag -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X" 
  data-theatre="yourtheatre" 
  data-type="shows" 
  data-view="calendar" 
  >
</script></div>

<!-- Class cards filtered by tag -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X" 
  data-theatre="yourtheatre" 
  data-type="classes" 
  data-view="cards" 
  >
</script></div>

Calendar Customization (Advanced)

For calendar views, you can customize the Starting Month or Starting Day of Week:

  1. Start with a code sample below or copy the default code from your Dashboard at Theatre > Embeds and be sure to add your account details in data-theatre="yourtheatre"

  2. Starting Month: Set which month the calendar initially displays using the data-initial-date="2025-06" attribute, enter digits for the full year and month in the format YYYY-MM 

<script id="fw_script" src="https://crowdwork.com/embed.js?v=X" 
  data-theatre="yourtheatre" 
  data-type="shows" 
  data-view="calendar" 
  >
</script>

  1. Starting Day of Week: Choose which day the calendar week starts on using the data-dow="1" attribute, enter digits a single digit for the desired start day:

    • data-dow="0" for Sunday

    • data-dow="1" for Monday

    • data-dow="2" for Tuesday

    • data-dow="3" for Wednesday

    • data-dow="4" for Thursday

    • data-dow="5" for Friday

    • data-dow="6" for Saturday 

<script id="fw_script" src="https://crowdwork.com/embed.js?v=X" 
  data-theatre="yourtheatre" 
  data-type="shows" 
  data-view="calendar" 
  >
</script>

Combined Customization (Advanced)

You can combine multiple customization options as desired:

<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X" 
  data-theatre="yourtheatre" 
  data-type="shows" 
  data-view="calendar"
  
  
  >
</script></div>

Need help implementing these widgets? Contact us for assistance!

PreviousCustomizing Your Theatre SettingsNextTags

Last updated

Was this helpful?