Weebly - Embed Guide

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

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

✅ What You'll Need

Before you begin, make sure you have:

• An active CrowdWork account

• A Weebly 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 Weebly

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

Use the Embed or Custom Element

Weebly Tip: Make sure you have your widget code from the Theatre > Embeds Dashboard ready to paste before starting.

1. Log in to your Weebly account and open your site editor

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

3. From the Weebly elements panel, find and drag the Embed Code or Embed HTML element (usually found under the Basic section of the Build tab)

   • It usually this icon </> and might look similar to one of these:

     

     
4. Once the element is placed, click inside the Embed Code element and select Edit Custom HTML

5. Paste your CrowdWork widget code into this box

6. Click outside of the element or click Save or Done (depending on your Weebly theme)

7. Publish your site to see the changes live

Important Note: Various Weebly versions and themes might label things differently – for example, as "Custom HTML" or "Embed Code" or something similar - they should all work nearly the same way!

💄 Making Your Widget Look Amazing

Your widget will automatically inherit some styling from CrowdWork and your Weebly 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

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

Want more tips? Check out our full Embedding a Widget guide for more details on widget customization.

❓ Troubleshooting

Quick Fix: If something isn't working right, try getting fresh widget code from your Theatre > Embeds Dashboard and re-embedding it.

Once embedded, your widget will automatically stay in sync with everything on your CrowdWork account! It should "just work!" But if you run into any trouble, try the following...

Widget not showing up?

• Some versions of Weebly themes, may not display correctly in the editor preview

• Double-check that you published your Weebly site after adding the widget

• Verify you pasted the entire code snippet without modifications

• Try clearing your browser cache and refreshing

Widget looks strange?

• Sometimes things won't look quite right until you've saved and published your changes

• Try placing the widget on a line all by itself where it has the full width of the page

• Try adjusting the section width or padding in your Weebly editor as some Weebly themes might need additional space for the widget

• For calendar views, ensure you've allocated enough vertical & horizontal space

🚀 Ready to Go Beyond Basic Widgets?

Once you've mastered the basics, try these advanced techniques:

• Create multiple widgets filtered by different tags

• Embed widgets on multiple pages for different purposes

• Use custom CSS in Weebly to match your widget perfectly to your brand

Ready for advanced styling? Check out our Widget Styling Guide for custom CSS examples and tips to make your widgets perfectly match your Weebly site design.

You've got this! Your Weebly site is about to become your theatre's perfect promotional partner.

Need more help? Reach out to our support team - we're always happy to help get your wascally Weebly widgets working wonderfully!