🗓️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.

Note to existing users of CrowdWork (formerly Fourth Wall Tickets)

Embed codes created before January 2025 will continue working without any changes required.

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 and classes, letting you choose the best format for each page on your site.

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

Calendar View - Full Width

Calendar View - Mobile/Responsive

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

Card View - Full Width

Card View - Mobile/Responsive

Default Widget Code

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.

Widget Embed Codes in the Dashboard

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

Creative Uses for Custom Widgets

Here are some great ways theatres use 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. Here's a breakdown of the configuration options:

Basic Structure

<div><script 
 id="fw_script" 
 src="https://crowdwork.com/embed.js?v=6"          // Widget version
 data-theatre="yourtheatre"                        // Your theatre's subdomain
 data-type="shows"                                 // "shows" or "classes"
 data-view="calendar"                              // "calendar" or "cards"
 data-category="YourTagName"                       // Optional: Filter by 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

You can filter widgets to display only events with a specific tag:

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

For calendar views, you can customize:

  1. Starting Month: Set which month the calendar initially displays 

<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 (0 = Sunday, 1 = Monday, etc.)

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

Combined Customization

You can combine multiple customization options:

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

Before you start...

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

  • If you make edits by hand, remember that tag names are case-sensitive and must match exactly

Nerd knowledge...

  • Keep your widgets up-to-date! Match the v=X number in your code with the version shown in the code examples from your Dashboard to ensure you have the latest widget features.

  • Code Formatting: You can format the widget code however you like - putting it all on one line (as shown in your Dashboard) or splitting it across multiple lines (as shown on this page); however, we always recommend copying it directly from your Dashboard

Need help implementing these widgets? Contact us for assistance.

PreviousCustomizing Your Theatre Settings NextTags

Last updated

Was this helpful?