# Squarespace - Embed Guide

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

<figure><img src="/files/w8LaKpI606sCrIRQHb05" alt=""><figcaption><p>The Embed Widget code provided in the CrowdWork Dashboard</p></figcaption></figure>

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

{% hint style="info" %}
**Quick Access:** Jump directly to your [**widget customization page**](https://www.crowdwork.com/dashboard/embeds) to get started immediately!
{% endhint %}

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

### 🚀 Adding Your Widget to Squarespace

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

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!

{% hint style="success" %}
**Good News!** CrowdWork widgets work with **any Squarespace plan** because they're standard HTML embed codes. You don't need to upgrade your plan to use our widgets!
{% endhint %}

{% hint style="info" %}
**Squarespace + CrowdWork Optimization:** While our widgets work great out of the box, different versions of Squarespace may occasionally need minor optimizations for the best experience. If you notice any display issues or have questions about your widget's performance, [reach out to our support team](/contacting-support.md) - we're experienced with Squarespace integrations and can help ensure everything works perfectly on your site!
{% endhint %}

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

{% hint style="info" %}
**Not working as expected?** Remember you can always get fresh widget code from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) if needed.
{% endhint %}

**Widget not showing up?**

* 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"
* Make sure you've saved and/or published your page changes

**Widget looks strange or has display issues?**

* 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

**Widget not loading properly in Squarespace editor preview?**

* This can occasionally happen when switching between desktop/mobile previews in the Squarespace editor
* The widget will work perfectly on your published site - this is just an editor preview quirk
* Try refreshing the editor or check your published site to confirm everything is working

**Getting an error message or widget functionality seems limited?**

* 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
* Verify you're using the complete, unmodified embed code from CrowdWork
* [Contact our support team](/contacting-support.md) - we have experience with Squarespace-specific optimizations and can help resolve any compatibility issues

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

{% hint style="info" %}
**Advanced Customization:** Our widget works perfectly as-is, but experienced users can add custom `<style>` tags after the widget code in the same code block to further customize the appearance (this works on any Squarespace plan). Adding custom JavaScript may require a Business plan or higher. Note that custom modifications are outside our standard support scope.
{% endhint %}

Need further assistance? [Reach out to our Support Team](/contacting-support.md) - we're always happy to help!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/squarespace-embed-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.