Webflow - Embed Guide

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

Ready to showcase your shows and classes directly on your beautiful Webflow website? You're in the perfect place! Webflow's powerful design capabilities combined with CrowdWork widgets create an amazing experience for promoting your events.

✅ What You'll Need

Before you begin, make sure you have:

  • An active CrowdWork account

  • A Webflow website you can edit (with Designer or Editor access)

  • Your widget embed code from CrowdWork Dashboard

  • About 5 minutes of your time

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!

🚀 Adding Your Widget to Webflow

Webflow offers several flexible ways to add custom code. Choose the method that works best for your needs:

Method 1: Using Code Embed Element (Recommended)

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

Webflow Tip: Have your widget code from the Theatre > Embeds Dashboard ready to paste before starting.

  1. Open Webflow Designer

    • Log in to your Webflow account and open your project

    • Navigate to the page where you want to add your widget

  2. Add a Code Embed element

    • Open the Add Panel (+ icon) on the left

    • Drag a Code Embed element to your desired location on the page

    • The element will appear as a placeholder on the canvas

  3. Add your widget code

    • Double-click the Code Embed element or click the gear icon

    • Paste your CrowdWork widget code into the code editor

    • Make sure you don't include <html>, <body>, or <head> tags

    • Click Save & Close

  4. Style and position

    • Resize the Code Embed element as needed

    • Use Webflow's styling options to add padding, margins, etc.

    • Calendar widgets typically need more height than card widgets

  5. Publish your site

    • Click Publish to make your widget live

    • The widget will only show on the published site, not in the Designer

Method 2: Site-Wide Code Injection

For widgets that should appear on multiple pages:

  1. Access Project Settings

    • Click the gear icon in the top left of the Designer

    • Go to Custom Code in the left sidebar

  2. Choose injection location

    • Head Code: For CSS or scripts that need to load early

    • Footer Code: For widgets and tracking scripts (recommended)

  3. Add your widget code

    • Paste your CrowdWork widget code in the appropriate section

    • This will add the widget to every page of your site

  4. Publish to see changes

    • Click Publish to make the code live

Method 3: Page-Specific Code Injection

For widgets on specific pages only:

  1. Access Page Settings

    • Select the page in the Pages Panel

    • Scroll down to the Custom Code section

  2. Choose code placement

    • Head Code: For page-specific CSS or early-loading scripts

    • Footer Code: For widgets (recommended)

  3. Add your widget code

    • Paste your CrowdWork widget code in the appropriate field

    • This will only affect the selected page

  4. Publish your changes

    • Click Publish to make the widget live

💄 Making Your Widget Look Amazing

Webflow's design flexibility means you can make your widget look perfect:

Styling the Code Embed Element

  • Size and spacing: Use Webflow's sizing controls to set width and height

  • Responsive design: Set different sizes for desktop, tablet, and mobile

  • Layout integration: Use Flexbox or Grid to position perfectly

  • Visual hierarchy: Add shadows, borders, or background colors

Design Best Practices

  • Container width: Calendar widgets look best in full-width containers

  • Vertical space: Calendar views need adequate height (recommend 400px minimum)

  • Mobile optimization: Test thoroughly on mobile breakpoints

  • Brand consistency: Use Webflow's styling to match your site's design

🔧 Troubleshooting

Quick Fix: Most issues can be resolved by getting fresh widget code from your Theatre > Embeds Dashboard and re-embedding it.

Widget not displaying?

  • Remember widgets only show on the published site, not in the Designer

  • Check that you've published your site after adding the widget

  • Verify you pasted the complete code snippet without modifications

  • Ensure you didn't include <html>, <body>, or <head> tags

Widget appears cut off or too small?

  • Increase the height of your Code Embed element

  • For calendar widgets, try setting a minimum height of 400-500px

  • Check responsive settings on different breakpoints

  • Ensure the parent container has adequate space

Code injection not working?

  • Make sure you're on a paid Webflow plan (required for custom code)

  • Verify your site is published, not just saved

  • Check that you placed the code in the correct section (Head vs Footer)

  • Try clearing your browser cache

Styling conflicts?

  • Use Webflow's custom CSS in Project Settings to override conflicts

  • Wrap your widget in a div with specific classes for targeted styling

  • Check for conflicting jQuery versions (Webflow includes jQuery 3.5.1)

🎯 Advanced Webflow Integration

Take your integration to the next level:

Dynamic Content Integration

  • CMS Integration: Use Webflow's CMS to create event detail pages

  • Collection filtering: Combine CMS collections with widget filtering

  • Template pages: Add widgets to CMS template pages for consistent display

Responsive Design Optimization

  • Breakpoint customization: Adjust widget size for each Webflow breakpoint

  • Mobile-first approach: Design widgets to work perfectly on mobile first

  • Touch optimization: Ensure interactive elements work well on touch devices

Custom Interactions

  • Scroll animations: Add Webflow interactions to animate widget appearance

  • Hover effects: Use interactions to enhance widget presentation

  • Loading states: Create smooth loading experiences with Webflow animations

💡 Creative Uses for Webflow + CrowdWork

Leverage Webflow's design power:

  • Hero sections: Feature upcoming events prominently with custom styling

  • Portfolio integration: Show performance schedules alongside past work

  • Team pages: Add teacher-specific class schedules to instructor bios

  • Landing pages: Create event-specific pages with integrated booking

  • Blog integration: Embed relevant show schedules in blog posts

🔄 Automatic Updates

Once embedded, your widget automatically syncs with your CrowdWork account. Any changes you make to shows or classes will appear immediately on your Webflow site without any additional work!

📱 Mobile & Responsive Considerations

Webflow's responsive design tools work perfectly with CrowdWork widgets:

  • Automatic adaptation: Widgets automatically adjust to Webflow's breakpoints

  • Custom responsive behavior: Use Webflow's responsive settings to fine-tune appearance

  • Touch-friendly: All widget interactions work smoothly on mobile devices

⚡ Performance Optimization

Keep your Webflow site fast:

  • Code placement: Use Footer Code injection for better loading performance

  • Widget quantity: Limit widgets per page for optimal speed

  • Webflow optimization: Let Webflow's built-in optimization handle the rest

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

PreviousWix - Embed GuideNextContacting Support

Last updated

Was this helpful?