🗓️Embedding a Widget

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.

Widget Types

Widgets are available in two formats, Calendar view and Card view. Both views are available for shows, classes, or shows & classes combined, 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

• Combined shows & classes calendar

Card View

Card View features:

• Visual cards with event images

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

• Option to display all recurring event dates instead of just the next upcoming

Commonly used for:

• Main "Classes" page

• Homepage features

• Special events & promotions

• Combined shows & classes display

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, shows, or both combined. Or use the customization options below to create filtered views and specialized displays for a specific tag or starting month.

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 content type, 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.

Choosing Content Type

You can choose what types of events your widget displays:

1. Go to Theatre > Embeds in your Dashboard menu

2. Use the "Content Type" dropdown to select:

   • Shows - Display only your shows

   • Classes - Display only your classes

   • Shows & Classes - Display all events intermingled in chronological order

3. Select your preferred view (Calendar or Cards)

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

Filtering by Tag

To display only events with a specific tag:

1. Go to Theatre > Embeds in your Dashboard menu

2. Choose your content type (Shows, Classes, or Shows & 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

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 content type (Shows, Classes, or Shows & 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

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 content type (Shows, Classes, or Shows & 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

Display All Recurring Event Dates

By default, Cards widgets display only the next upcoming occurrence of recurring events. You can change this to show a card for every scheduled date:

1. Go to Theatre > Embeds in your Dashboard menu

2. Choose your content type (Shows, Classes, or Shows & Classes)

3. Select "Cards" view

4. Check the "Display all dates instead of the next upcoming" checkbox

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!);

For Advanced Users: Widget Code 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.

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", "classes", or "all"
 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...)
 data-all-dates="true"                             // Optional: Show all recurring dates (Cards only)
></script></div>

Content Type Selection (Advanced)

Choose which types of events to display:

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

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

<!-- Shows & Classes combined -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="all"
  data-view="calendar">
</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"
  data-category="YourTagName">
</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"
  data-category="YourTagName">
</script></div>

<!-- All events (shows & classes) cards filtered by tag -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="all"
  data-view="cards"
  data-category="YourTagName">
</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"
  data-initial-date="2025-06">
</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"
  data-dow="1">
</script>

Cards Customization: Display All Dates (Advanced)

For Cards widgets, you can choose to display all dates of recurring events instead of just the next upcoming occurrence:

<!-- Cards showing all recurring event dates -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="classes"
  data-view="cards"
  data-all-dates="true">
</script></div>

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="all"
  data-view="calendar"
  data-category="YourTagName"
  data-initial-date="2025-10"
  data-dow="1">
</script></div>

<!-- Cards with all dates and tag filtering -->
<div><script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="classes"
  data-view="cards"
  data-category="YourTagName"
  data-all-dates="true">
</script></div>

Need help implementing these widgets? Contact us for assistance!