# Embedding a Widget

<figure><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FaWNhDxCd6Zh5LOSppX3C%2FCleanShot%202024-12-13%20at%2018.42.10%402x.png?alt=media&#x26;token=92997ce0-4e83-4325-8c82-08916328e2a3" alt="" width="318"><figcaption></figcaption></figure>

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**](https://crowdwork.com/dashboard/embeds) in your Dashboard menu to find your widget code.

{% hint style="warning" %}
**Using Squarespace? WordPress? Weebly? Wix?**

If your website uses a CMS or website editing tool, check out our [Platform-Specific Embedding Guides](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms) to find step-by-step instructions for your particular website platform
{% endhint %}

### 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.

<table data-full-width="true"><thead><tr><th>Calendar View</th><th></th></tr></thead><tbody><tr><td><p><strong>Calendar View features:</strong></p><ul><li>Familiar monthly calendar layout showing all upcoming events</li><li>Desktop: full calendar grid</li><li>Mobile: scrollable list</li><li>Preview details on hover</li><li>Past events appear dimmed</li></ul><p>Commonly used for:</p><ul><li>Main "Shows" schedule pages</li><li>Complete event listings</li><li>Combined shows &#x26; classes calendar</li></ul><p><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FD66N7HVBq8Q3seD1oIZh%2FCleanShot%202024-12-14%20at%2015.54.19-optimised.gif?alt=media&#x26;token=8479e724-db69-4327-ba9a-a9b4609c6b90" alt="" data-size="original"></p></td><td><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FJ5YwSf30Ny5v8uuaEtVm%2FSaturday%2C%2014%20Dec%202024%2021%3A29%3A01.png?alt=media&#x26;token=0c994e47-8cc8-47c5-9ce9-56d396f799cf" alt=""></td></tr></tbody></table>

<table data-full-width="true"><thead><tr><th>Card View</th><th></th></tr></thead><tbody><tr><td><p><strong>Card View features:</strong></p><ul><li>Visual cards with event images</li><li>Multiple cards per row on desktop, single column on mobile</li><li>Option to display all recurring event dates instead of just the next upcoming</li></ul><p>Commonly used for:</p><ul><li>Main "Classes" page</li><li>Homepage features</li><li>Special events &#x26; promotions</li><li>Combined shows &#x26; classes display</li></ul><p><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FECfQTO69UJGs3ajtMMop%2Fcoldtowne-embed-widget-cards-CrowdWork.gif?alt=media&#x26;token=d942df71-bb25-4b6f-9d24-b45312227225" alt="" data-size="original"></p></td><td><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FwGHv1NTiCmtD8NSmwx33%2Fcoldtowne-mobile-embed-widget-cards-CrowdWork.gif?alt=media&#x26;token=02c5776d-4fc7-4c0d-958b-0386f4824d53" alt=""></td></tr></tbody></table>

### 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.

![Dashboard screen for customizing embed codes](https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2F6JkJ8fgwECwr0Y1Jdrpi%2FCleanShot%202024-12-14%20at%2009.04.20%402x.png?alt=media\&token=dbc88ac9-4d38-494b-890d-ff6283defa92)

{% hint style="info" %}
**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.
  {% endhint %}

### 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.

![Customization controls on the Widget Embeds screen in the Dashboard](https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2FQ8eqgtDBA4OvSEdKQDjD%2FCleanShot%202024-12-13%20at%2018.44.09%402x.png?alt=media\&token=8657608e-08ed-4610-8b49-9a85e3cc9af3)

{% hint style="warning" %}
**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](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms) for a smooth setup:

* [GoDaddy Website Builder](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/godaddy-site-builder-embed-guide)
* [Squarespace](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/squarespace-embed-guide)
* [Weebly](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/weebly-embed-guide)
* [Wix](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/wix-embed-guide)
* [WordPress](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/wordpress-embed-guide) (including [Elementor, Divi & page builders](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/wordpress-page-builders-embed-guide))

[**Start here to find your website platform**](https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms). Don't see what you need? [Contact us for assistance](https://docs.crowdwork.com/contacting-support).
{% endhint %}

#### Choosing Content Type

You can choose what types of events your widget displays:

1. Go to [**Theatre > Embeds**](https://crowdwork.com/dashboard/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

{% hint style="info" %}
The Shows & Classes option is perfect for creating a comprehensive events calendar or homepage widget that showcases your entire schedule.
{% endhint %}

#### Filtering by Tag

To display only events with a specific tag:

1. Go to [**Theatre > Embeds**](https://crowdwork.com/dashboard/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

{% hint style="info" %}
Only one tag can be used per widget.
{% endhint %}

#### Setting a Specific Start Month

To have your calendar initially display a specific month:

1. Go to [**Theatre > Embeds**](https://crowdwork.com/dashboard/embeds) in your Dashboard menu
2. Choose your content type (Shows, Classes, or Shows & Classes)
3. Select "Calendar" view
4. Use the "Starting Calendar Month" option to select your desired month
5. Copy the updated code and paste it into your website

{% hint style="info" %}
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.

**Date format:** The Dashboard generates the correct date automatically when you use the picker. If editing the code manually, use the format `YYYY-MM-DD` (e.g., `data-start-date="2026-05-01"`).
{% endhint %}

#### Setting the Start Day of Week

To choose which day the calendar week starts on:

1. Go to [**Theatre > Embeds**](https://crowdwork.com/dashboard/embeds) in your Dashboard menu
2. Choose your content type (Shows, Classes, or Shows & Classes)
3. Select "Calendar" view
4. Use the "Starting Calendar DOW" dropdown to select your preferred starting day
5. Copy the updated code and paste it into your website

#### Setting a Rolling Day Limit

By default, widgets display all future events with no time cutoff. Use the Rolling Day Limit to restrict a Calendar or Cards widget to only show events within a set number of days from today.

1. Go to [**Theatre > Embeds**](https://crowdwork.com/dashboard/embeds) in your Dashboard menu
2. Choose your content type (Shows, Classes, or Shows & Classes)
3. Select your preferred view (Calendar or Cards)
4. Use the "Rolling Day Limit" dropdown to select:
   * **No Limit** — Display all upcoming events (default)
   * **Today** — Display only today's events
   * **Next 3 Days** — Display events within the next 3 days
   * **Next 7 Days** — Display events within the next 7 days
5. Copy the updated code and paste it into your website

{% hint style="info" %}
**Calendar view changes appearance with a rolling day limit.** Instead of a standard monthly calendar grid, the widget switches to a rolling day-range view — for example, "Next 7 Days" always shows the current 7-day window, starting from today.
{% endhint %}

{% hint style="success" %}
Rolling day limits are great for homepage "what's on this week" sections, venue lobby displays, or any context where only near-term events are relevant.
{% endhint %}

#### 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**](https://crowdwork.com/dashboard/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

{% hint style="info" %}
This option only applies to 🃏 Cards view. 🗓️ Calendar view always displays all occurrences of recurring events.
{% endhint %}

{% hint style="warning" %}
Heads up! This will show a separate card for each date of your recurring events. *Great for highlighting all available dates*, but keep in mind this can create **many similar-looking cards** and **may slow down your page** if you have lots of recurring events.
{% endhint %}

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

{% hint style="success" %}
**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
* **Comprehensive Event Display:** Use Shows & Classes widgets to provide a unified calendar on your site
* **Recurring Event Promotion:** Use "Display all dates" for Cards to showcase all occurrences of popular recurring classes or shows
  {% endhint %}

### For Advanced Users: Widget Code Reference

{% hint style="danger" %}
*To create widgets, visit* [***Theatre > Embeds***](https://crowdwork.com/dashboard/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.*
{% endhint %}

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.

{% hint style="warning" %}
**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**](https://crowdwork.com/dashboard/embeds) to access your embed codes
* **Custom Editing:** If you make edits by hand, remember that:
  * Starting Day of Week (`data-start-dow`) requires a single digit and zero means Sunday
  * Starting Month dates (`data-start-date`) must be in the format: `YYYY-MM-DD` (e.g., `2026-05-01`)
  * Rolling Day Limit (`data-days`) accepts: `1`, `3`, or `7`
  * Tag names are ***case-sensitive*** and must match exactly
  * The `data-all-dates` attribute only applies to Cards widgets
* **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?* :smile\_cat:
    {% endhint %}

#### Basic Structure

Here's a breakdown of all available configuration options:

{% code fullWidth="true" %}

```html
<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-start-date="2024-12-01"                      // Optional: Starting month (YYYY-MM-DD)
 data-start-dow="1"                                // Optional: Starting day (0=Sun, 1=Mon...)
 data-days="7"                                     // Optional: Rolling day limit — 1, 3, or 7 days from today
 data-all-dates="true"                             // Optional: Show all recurring dates (Cards only)
></script></div>
```

{% endcode %}

#### Content Type Selection (Advanced)

Choose which types of events to display:

{% code fullWidth="true" %}

```html
<!-- 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>
```

{% endcode %}

#### 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**](https://crowdwork.com/dashboard/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")

<pre class="language-html" data-full-width="true"><code class="lang-html">&#x3C;!-- Show calendar filtered by tag -->
&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="shows"
  data-view="calendar"
  <a data-footnote-ref href="#user-content-fn-1">data-category="YourTagName"</a>>
&#x3C;/script>&#x3C;/div>

&#x3C;!-- Class cards filtered by tag -->
&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="classes"
  data-view="cards"
  <a data-footnote-ref href="#user-content-fn-1">data-category="YourTagName"</a>>
&#x3C;/script>&#x3C;/div>

&#x3C;!-- All events (shows &#x26; classes) cards filtered by tag -->
&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="all"
  data-view="cards"
  <a data-footnote-ref href="#user-content-fn-1">data-category="YourTagName"</a>>
&#x3C;/script>&#x3C;/div>
</code></pre>

#### 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**](https://crowdwork.com/dashboard/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-start-date="2025-06-01"` attribute, enter the date in the format `YYYY-MM-DD`

<pre class="language-html"><code class="lang-html">&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="shows"
  data-view="calendar"
  <a data-footnote-ref href="#user-content-fn-2">data-start-date="2025-06-01"</a>>
&#x3C;/script>
</code></pre>

3. **Starting Day of Week**: Choose which day the calendar week starts on using the `data-start-dow="1"` attribute, enter a single digit for the desired start day:
   * `data-start-dow="0"` for Sunday
   * `data-start-dow="1"` for Monday
   * `data-start-dow="2"` for Tuesday
   * `data-start-dow="3"` for Wednesday
   * `data-start-dow="4"` for Thursday
   * `data-start-dow="5"` for Friday
   * `data-start-dow="6"` for Saturday

<pre class="language-html"><code class="lang-html">&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="shows"
  data-view="calendar"
  <a data-footnote-ref href="#user-content-fn-3">data-start-dow="1"</a>>
&#x3C;/script>
</code></pre>

#### 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:

<pre class="language-html"><code class="lang-html">&#x3C;!-- Cards showing all recurring event dates -->
&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="classes"
  data-view="cards"
  <a data-footnote-ref href="#user-content-fn-4">data-all-dates="true"</a>>
&#x3C;/script>&#x3C;/div>
</code></pre>

{% hint style="info" %}
The `data-all-dates="true"` attribute only works with Cards view. Calendar view always shows all recurring event dates.
{% endhint %}

#### Combined Customization (Advanced)

You can combine multiple customization options as desired:

<pre class="language-html"><code class="lang-html">&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="all"
  data-view="calendar"
  <a data-footnote-ref href="#user-content-fn-1">data-category="YourTagName"</a>
  <a data-footnote-ref href="#user-content-fn-2">data-start-date="2025-10-01"</a>
  <a data-footnote-ref href="#user-content-fn-3">data-start-dow="1"</a>
  <a data-footnote-ref href="#user-content-fn-5">data-days="7"</a>>
&#x3C;/script>&#x3C;/div>

&#x3C;!-- Cards with all dates and tag filtering -->
&#x3C;div>&#x3C;script id="fw_script" src="https://crowdwork.com/embed.js?v=X"
  data-theatre="yourtheatre"
  data-type="classes"
  data-view="cards"
  <a data-footnote-ref href="#user-content-fn-1">data-category="YourTagName"</a>
  <a data-footnote-ref href="#user-content-fn-4">data-all-dates="true"</a>>
&#x3C;/script>&#x3C;/div>
</code></pre>

Need help implementing these widgets? [Contact us](https://docs.crowdwork.com/contacting-support) for assistance!

[^1]: **Display a Specific Tag**

    *- tag names are case-sensitive and must match exactly*

    *- remove to display All Shows or All Classes*

[^2]: **Starting Month**

    \- attribute: `data-start-date`

    \- date format: *YYYY-MM-DD* (e.g., `2026-05-01`)

[^3]: **Starting Day of Week**

    \- attribute: `data-start-dow`

    *0 = Sunday*

    *1 = Monday*

    *2 = Tuesday*

    *3 = Wednesday*

    *4 = Thursday*

    *5 = Friday*

    *6 = Saturday*

[^4]: **Display All Dates**

    *Cards view only - shows all recurring event dates instead of just the next upcoming*

[^5]: **Rolling Day Limit**

    \- attribute: `data-days`

    *Limits the widget to events within the next N days from today. Valid values: 1, 3, or 7*

    *When applied to Calendar view, the widget switches from a monthly grid to a rolling day-range view*