Squarespace - Embed Guide

This page gives instructions for embedding CrowdWork widgets on a Squarespace website.

Ready to showcase your shows and classes directly on your Squarespace website? You're in the right place! This guide will walk you through the simple process of embedding CrowdWork widgets on your Squarespace site.

✅ What You'll Need

Before you begin, make sure you have:

• An active CrowdWork account

• A Squarespace website you can edit

• Your widget embed code from CrowdWork Dashboard (keep reading if not)

• About 5 minutes of your time (seriously, it's that quick!)

The Embed Widget code provided in the CrowdWork Dashboard

👾 Getting Your Widget Code

First, let's grab your widget code from CrowdWork:

1. Log in to your CrowdWork Dashboard

2. Navigate to Theatre > Embeds in the left menu

3. Choose the widget type (Shows or Classes)

4. Select your preferred view (Calendar or Cards)

5. Customize any settings (tag filtering, start date, etc.)

6. Copy the code snippet provided in the box

Quick Access: Jump directly to your widget customization page to get started immediately!

Pro Tip! Not sure which widget type to use? Calendar views work great for comprehensive schedules, while Cards are perfect for highlighting featured events on your homepage!

🚀 Adding Your Widget to Squarespace

Now for the fun part - adding it to your Squarespace site:

Method 1: Using a Code Block (Recommended)

This is the easiest and most reliable method for most users:

1. Open your Squarespace editor

   • Log in to your Squarespace account and open your site editor

2. Navigate to the page where you want to add your widget

   • Click on the page you want to edit

3. Add a Code Block

   • While editing a page, hover over a section and click the "+ Add Block" button

   • OR click an insert point (the "+" button) between sections

4. Find and select the Code Block

   • Scroll down in the block menu until you find "Code"

   • Click on it to add the code block to your page

5. Enter your widget code

   • Click the pencil icon on the code block to edit it

   • In the code editor, paste your CrowdWork widget code

   • Make sure the Type dropdown is set to "HTML" (this is usually the default)

6. Save your changes

   • Click outside the code block or click "Apply" to save

   • Preview your page to see your widget in action!

Important Notes:

• Code blocks require a Business plan or higher if your widget uses JavaScript

• On Basic plans, you can still embed HTML-only widgets

• Make sure to keep the Type set to "HTML" for your CrowdWork widget to work properly

Method 2: Using Code Injection (Site-Wide)

If you want your widget to appear on multiple pages or in your site's header/footer:

1. Access Code Injection

   • Go to Settings in your site's main menu

   • Navigate to Advanced > Code Injection

2. Choose the right injection area

   • Header: Code loads early, good for scripts that need to be available site-wide

   • Footer: Code loads after content, good for widgets and analytics

3. Paste your code

   • Add your CrowdWork widget code to the appropriate field

   • Click Save

Code Injection Requirements:

• Requires a Business plan or higher

• Best for site-wide widgets (appears on all pages)

• Advanced feature - test carefully before going live

💄 Making Your Widget Look Amazing

Your widget will automatically inherit some styling from both CrowdWork and your Squarespace site, but here are some tips to make it look its best:

• Give it breathing room: Place the widget in a section with ample padding

• Consider width: Calendar widgets look best in full-width sections

• Check mobile: Preview how your widget looks on mobile devices using Squarespace's mobile preview

• Height matters: Calendar views need more vertical space than card views

🔧 Troubleshooting

Not working as expected? Remember you can always get fresh widget code from your Theatre > Embeds Dashboard if needed.

Widget not showing up?

• Make sure you're on a Business plan or higher for JavaScript-enabled widgets

• Double-check that you pasted the entire code snippet without modifications

• Try refreshing your browser cache

• Ensure the code block Type is set to "HTML"

Widget looks strange?

• Try placing the widget in a full-width section

• Check that there's enough vertical space for calendar views

• Preview your site in both desktop and mobile views

• Some styling may not appear correctly until you publish your changes

Getting an error message?

• Verify your Squarespace plan supports the features you're trying to use

• Make sure your CrowdWork account is active and the widget code is current

• Try creating a new code block if the existing one seems corrupted

🎯 Pro Tips for Squarespace + CrowdWork

Take your integration to the next level:

• Homepage Feature: Add a card widget to your homepage to showcase upcoming events

• Dedicated Events Page: Create a full page with a calendar widget for all your shows

• Class Categories: Use filtered widgets to show specific types of classes

• Multiple Widgets: You can add multiple widgets to the same page - try combining shows and classes!

🔄 Automatic Updates

Once your widget is embedded, it will automatically stay in sync with your CrowdWork account. Any changes you make to your shows or classes in CrowdWork will instantly appear on your Squarespace site without any additional work!

Ready to take it further? Check out our Widget Styling Guide for advanced customization and CSS tips to make your widgets perfectly match your Squarespace site design.

Need further assistance? Reach out to our Support Team - we're always happy to help!