Skip to main content

Embedding & Customizing Your Sawyer Widget

Learn how to embed your Sawyer widget on your website, customize it, and go live. Includes platform-specific instructions, customization options, and FAQs.

Written by Dana Browne

šŸ“ Overview

There are several ways to enable customers to register for your programs, and the most common way is by embedding the Sawyer widget on your website.

What is a Sawyer Widget?

Click the arrow to reveal the answer

The Sawyer widget is an embedded block on your website that displays your offerings in a list or calendar view. When you embed the widget using a piece of code, you're essentially taking your Live View and placing it directly on your webpage. This allows customers to browse your classes and activities without ever leaving your siteā€”they can seamlessly explore your offerings while staying within your website experience.

Why Embed a Widget?

Click the arrow to reveal the answer

Instead of directing customers away from your site to register, the embedded widget keeps them engaged on your website. Customers can view your schedule, filter by activity type or location, and register without friction.

When a customer clicks Register or Classes from your website menu, they land on a page where the widget is embedded. The widget displays your activities and allows customers to browse by category (drop-ins, semesters, camps, appointments, etc.), view details, and register.

šŸš€ Going Live

You're considered "live" on Sawyer when:

  • Your schedule is set up and published in Sawyer

  • Your widget is embedded on your website, OR a Register Button has been added to your site

  • You've added your bank information (required before going live to avoid payment delays)

Once you're live, your customers can see your offerings and register for programs directly from your website.

The Live View

Click here to learn more about the live view

Your Live View is a read-only version of your entire schedule that customers see. You can access it by clicking Live View in the lower left corner of your Sawyer accountā€”this opens your schedule in a new browser tab. The Live View URL is what gets embedded on your website as the widget.

If you want customers to view a single scheduled activity instead of your entire schedule, you can generate a specific link by going to Schedules > clicking the scheduled activity > clicking Get Customer Link.

šŸ› ļø Embedding your Widget

There are two ways to get your widget embedded on your website. Choose the option that works best for your situation.

Option 1: Self-Embed (Recommended)

You create and manage your widget embed code directly in your Sawyer account portal. You then add the code to your website yourself. This gives you full control and the ability to customize and update your widget anytime.

Who should use this: You're comfortable adding code to your website editor, or you have a developer/team member who can help. Detailed instructions are in the Creating Widget Embeds section below.

Option 2: Let Support Help

Grant Sawyer admin or contributor access to your website editor, and the Sawyer team will embed the widget for you. This is a great option if you'd prefer to have our team handle the technical setup.

Who should use this: You prefer hands-off setup, or your website platform is complex.

Granting Access for Website Builders:

To grant access, follow the instructions for your website platform below:

āš ļø Note on Website Builders: Some website builders (like Canva websites and certain WordPress.com plans) do not accept custom code, which means the Sawyer widget cannot be embedded. For these platforms, you can always link to your Live View using a Register Button or direct URL instead.

Click the arrow to show the list of website builders

Squarespace

Click the arrow to view how to grant access in Squarespace

  1. Log in to your Squarespace account and open your website editor

  2. Go to Settings

  3. Select Permissions

  4. Click Invite Contributor

  5. Input Name as Sawyer

  6. Input Email Address as [email protected]

  7. Turn on the Administrator toggle

  8. Click Invite button

Link to Squarespace help article

WordPress

Click the arrow to view how to grant access in WordPress

  1. Log into your WordPress account

  2. On the left menu bar, click Users

  3. Under Users, click Add New

  4. Type in the email address [email protected]

  5. Click Administrator

  6. Click Send Invitation

Link to WordPress help article

Wix

Click the arrow to view how to grant access in Wix

  1. Log into your Wix account and go to your Dashboard

  2. On the left menu bar, click Settings

  3. Select Roles & Permissions near the bottom

  4. Click the blue Invite Collaborators button

  5. Type in the email address [email protected]

  6. Check the Admin (Co-Owner) box

  7. Click Send Invite

Link to Wix help article

GoDaddy

Click the arrow to view how to grant access in GoDaddy

āš ļø Only complete this if your website editor is GoDaddy, not if GoDaddy only hosts your domain

  1. Log in to your GoDaddy account

  2. Go to Delegate Access at https://sso.godaddy.com/access

  3. Under People Who Can Access My Account, click Invite to Access

  4. Add name as Sawyer and email address [email protected]

  5. For Access Level, select Products, Domains & Purchase

  6. Click Invite

Link to GoDaddy help article

Shopify

Click the arrow to view how to grant access in Shopify

  1. Log in to your Shopify account

  2. Click Settings at the bottom of the left menu

  3. Click Users & Permissions

  4. Click Add Staff

  5. Add name as Sawyer and email address [email protected]

  6. Select all permissions

  7. Click Send Invite

Link to Shopify help article

Weebly

Click the arrow to view how to grant access in Weebly

  1. Log in to your Weebly account

  2. Go to Settings

  3. Click Editors

  4. Click the blue +Add Editor button

  5. Input Email Address as [email protected]

  6. Leave permissions level as Admin

  7. Click the green Save Editor button

  8. Once complete, copy the invitation link from the Editors page and email it to [email protected] (Note: The invitation link won't work for you, but it will work for our team!)

Link to Weebly help article

Google Sites

Click the arrow to view how to grant access in Google Sites

  1. Open your Google Sites editor

  2. Click Share in the upper right corner

  3. Under "Invite people," enter [email protected]

  4. Click Send

Link to Google Sites help article

šŸ“Œ Register Button

Instead of embedding a full widget, you can add a simple Register Button that links directly to your Live View or to a specific scheduled activity.

Use Our Button Template

Click here to learn how to use the button template

  1. Email [email protected] and request our Register Button template image

  2. We'll send you a button image

  3. In your website editor, add the image to a page and link it to your Live View URL

Create Your Own Button

Click here to learn how to create your own button

  1. In Sawyer, click Live View to open your schedule

  2. Copy the URL from the address bar

  3. In your website editor, add a button and link it to that URL

šŸ“‹ Creating Widget Embeds (Self-Service)

If you chose Option 1: Self-Embed above, follow these steps to create and manage your widget embed code in your Sawyer account.

šŸ“ How to Access Widget Embeds

  1. Log into your Sawyer account

  2. Click the profile icon in the upper right corner

  3. Select Widget Embeds from the dropdown menu

šŸ’” Note: Only Owner and Admin users can access Widget Embeds.

If you have no embeds yet, you'll see an onboarding screen with a button to create a new embed.

If you have existing embeds, you'll see a list of all your embeds. Each embed shows:

  • Embed Name ā€” How you identify the embed

  • Updated On ā€” Date the embed was last saved

  • Status Label ā€” Shows "Hidden" if the embed is inactive

  • Icons ā€” Get code, preview link, delete, and download options

You can also sort your embeds (Most Recent, Oldest, Aā€“Z, Zā€“A) and use cmd+f to search for a specific embed name.

āž• How to Create a New Embed

  1. Click New Embed

  2. Fill out the following fields:

Widget Name (required)

  • This is how you'll identify your embed in the list

  • Use something descriptive so you remember which page it goes on and what it's for

  • Example: "Homepage Classes Widget" or "Summer Camps 2025"

Default Tab

  • This is the first tab customers will see when they land on your widget

  • Choose from: All Activities, Drop-Ins, Semesters, Camps/Events, Appointments, Class Packs, Memberships, Online Classes, Parties, Gift Cards

Default View

  • Choose List View or Calendar View

  • This is what customers see first (though they can switch between views)

Widget Tags (optional)

  • Select any widget tags you've created to filter activities by tag

  • Example: If you've tagged some classes as "Summer" and others as "Fall," you can create separate embeds for each season

  • Widget tags are created in your schedule building flow, not here

  • If you haven't created any tags yet, you can skip this field

Filter by Location (optional)

  • Narrow down which locations appear on this widget

  • By default, all locations will show

  • Use this only if you want to feature a specific location

Notes (internal only)

  • Add reminders about where this widget goes, what season it's for, or when to update it

  • Only you and your team will see these notes

Active / Hidden

  • Active ā€” The widget will appear on your website (once you add the code and publish)

  • Hidden ā€” The code won't display, even if it's embedded. Use this to pause a widget temporarily

  • You can switch between Active and Hidden anytime

  1. Click Save

Once you save, you'll see a Get Code modal. Copy your embed code hereā€”this is what you'll paste into your website editor.

[SCREENSHOT NEEDED: Modal showing embed code with Copy button and Live Link button]

šŸ—‘ļø Additional Actions

Getting Your Code Later

  • Click the </> icon next to any embed to view the code again

  • You can copy the code or preview the widget using the Live Link button

Live Link

  • Opens your widget in a new browser tab

  • This URL is sharable and always active, even if the embed is set to Hidden

  • Useful for previewing before adding to your website

Deleting an Embed

  • Click the trash icon next to an embed

  • Confirm your decision

  • Once deleted, the embed will no longer render on your website and cannot be restored

Downloading Embeds as CSV

  • Click the download icon to export a list of all your embeds

  • Includes: Embed Name, Default Tab, Display Type, Widget Tags, Locations, Override URL, Notes, Status, Embed Code, URL, Created Date, Last Updated

šŸŒ Embedding on Your Website

Once you have your embed code, it's time to add it to your website. Here are the general steps, followed by platform-specific instructions.

āš” Quick Steps (General)

  1. Get your embed code from Sawyer (see section above)

  2. Log into your website editor

  3. Navigate to the page where you want the widget

  4. Add an HTML block (also called Custom HTML, Code block, Raw Code, Embed, or Widgetā€”naming varies by platform)

  5. Paste your embed code into the HTML block

  6. Save and publish your changes

Things to Note:

  • In many website editors, the widget won't render in the editor view. Save your changes to preview it on the live site.

  • The widget usually auto-sizes to fit your page. If it doesn't, you may need to adjust the height in the HTML block settings or resize the block itself.

  • Make sure there are no extra spaces before or after your code when pasting.

šŸ–„ļø Platform-Specific Instructions

Click the arrow to see detailed steps for your platform:

<details> <summary><strong>Squarespace</strong></summary>

  1. Create your embed code in Sawyer (see Creating Widget Embeds section above)

  2. Copy the embed code

  3. Open your Squarespace website editor

  4. Click Pages and select the page where you want to embed

  5. Click Edit in the area where you want the widget

  6. Click Add Block

  7. Select Embed, then Code Snippet, then click Embed data

[SCREENSHOT NEEDED: Squarespace Add Block menu with Embed option highlighted]

  1. Paste your widget code into the code field

  2. Click Save

Note: The widget won't render in the editor. Save your changes and visit the live site to see the widget.

For additional help: Squarespace Custom Code Guide

</details>

<details> <summary><strong>Wix</strong></summary>

Wix is uniqueā€”you can embed your widget using your Live View URL without needing a special embed code from Sawyer.

  1. Log into your Sawyer account and copy your Live View Link (find it in the lower left corner of your account)

  2. Go to your Wix website editor

  3. Open Menus & Pages on the left sidebar and select or create the page you want

  4. Click the Add (+) button in the sidebar

  5. Scroll to Embed and select Embed a Site

  6. Click Website Address

  7. Paste your Live View URL

  8. Click Update

  9. Resize the widget block by clicking and dragging the corners. We recommend making it large enough so there's no scroll bar within the widget itself

[SCREENSHOT NEEDED: Wix Embed a Site panel with URL field filled in]

  1. Go to Mobile view in the editor and adjust the widget size for mobile devices

[SCREENSHOT NEEDED: Wix mobile view with widget resized]

Notes:

  • If you use Wix ADI (Artificial Design Intelligence), follow the same steps but set the widget height to 100%

  • Make sure there are no spaces at the beginning or end of the URL and that it starts with "https://"

  • If you want to use a widget tag to filter activities, edit your Live View URL according to the Widget Tags guide, then paste the modified URL here

For additional help: Email [email protected]

</details>

<details> <summary><strong>WordPress</strong></summary>

  1. Create your embed code in Sawyer

  2. Copy the embed code

  3. Log into your WordPress account

  4. Navigate to the page where you want to add the widget

  5. Click Edit

  6. Add a Custom HTML Block to the page

  7. Paste your embed code into the block

  8. Publish your changes

Note: The widget won't render in the WordPress editor. Publish and view the live page to see it.

For additional help: WordPress Custom HTML Block Guide

</details>

<details> <summary><strong>GoDaddy</strong></summary>

  1. Create your embed code in Sawyer

  2. Copy the embed code

  3. Log into your GoDaddy website editor

  4. Navigate to the page where you want to add the widget

  5. Click Add Element or Add Block

  6. Search for or select HTML or Custom Code

  7. Paste your embed code

  8. Save your changes

For additional help: GoDaddy Custom Code Guide

</details>

<details> <summary><strong>Shopify</strong></summary>

  1. Create your embed code in Sawyer

  2. Copy the embed code

  3. Log into your Shopify admin

  4. Go to Sales Channels and select your online store

  5. Click Pages

  6. Select or create a page

  7. In the page editor, click the + icon to add content

  8. Select HTML or Custom HTML

  9. Paste your embed code

  10. Save and publish

For additional help: Shopify Rich Text Editor Guide

</details>

<details> <summary><strong>Weebly</strong></summary>

  1. Create your embed code in Sawyer

  2. Copy the embed code

  3. Log into your Weebly account

  4. Navigate to the page where you want to add the widget

  5. Click Insert Element or the + icon

  6. Select Embed Code or Custom HTML

  7. Paste your embed code

  8. Save your changes

For additional help: Weebly Embed Code Guide

</details>

<details> <summary><strong>Google Sites</strong></summary>

  1. Instead of an embed code, use your Live View URL from Sawyer

  2. Open your Google Sites editor

  3. Click where you want to add the widget

  4. Click the Insert icon and select Embed

  5. Paste your Live View URL

  6. Click Embed

  7. Resize the widget as needed

  8. Publish your changes

For additional help: Google Sites Embed Guide

</details>

āš ļø Troubleshooting:

  • Widget not showing? Make sure you've saved and published your website. Also check that there are no extra spaces in the code or URL.

  • Widget not sizing correctly? Try adjusting the height in your HTML block settings or contact support.

  • Need help? Email [email protected] and let us know your platform and what you've tried.

āš™ļø Widget Customization

Once your widget is embedded, you can customize it to match your business and offerings.

šŸ“Œ Tab Names & Options

Your widget displays tabs that allow customers to filter activities by type. Here's what each tab shows and the naming options available.

All Activities (New!)

  • What it shows: Combines drop-ins, semesters, camps/events, and online activities

  • Alternative names: Activity Schedule

Drop-Ins

  • What it shows: Everything with a drop-in price, organized by activity day

  • Alternative names: By The Day, Open Play, Workshops

Semesters

  • What it shows: Anything scheduled on the Semesters page in Sawyer

  • Alternative names: Sessions, Classes, After School, Open Play, Multi Session, Online Semesters

Camps/Events

  • What it shows: Anything scheduled on the Camps/Events page

  • Alternative names: Camps, Events, By The Week, Single Session, Pop Ups, Summer & Holidays, Camp/Workshops, Programs, Online Camps

Appointments

  • What it shows: Available appointment slots

  • Alternative names: Private Lessons, One on One Classes, Tutoring, Private Appointments, Private Classes

Class Packs

  • What it shows: Available class pack options

  • Alternative names: Punch Pass

Memberships

  • What it shows: Available membership plans

  • Alternative names: (Noneā€”this tab name is fixed)

Online Classes

  • What it shows: Any scheduled activities marked as "This is an online class" in your activity setup

  • Alternative names: (Noneā€”this tab name is fixed)

Parties

  • What it shows: Party packages

  • Alternative names: Private Events, Field Trips, Inquiries

Gift Cards

  • What it shows: Gift card options

  • Alternative names: (Noneā€”this tab name is fixed)

Hiding Tabs You can hide any tab you don't offer. For example, if you don't have appointments, you can hide that tab so customers won't see an empty section.

  • The Appointments and Gift Cards tabs can be hidden directly in your Sawyer account (Settings > Gift Cards or under Appointments)

  • For all other tabs, contact [email protected] to request changes

Requesting Changes To change tab names or hide tabs, email [email protected] with your preferences. Let us know which tabs you want renamed or hidden and what names you'd like to use instead.

šŸ‘ļø Default View

When customers first land on your widget, they'll see either a List View or Calendar Viewā€”your choice.

List View

  • Displays activities in a scrollable list

  • Good if you have many activities or want to emphasize filters

Calendar View

  • Displays activities in a calendar grid

  • Loads to the month with the next available activity

  • Shows: Activity name, start/end times, age range, and location

  • Customers can hover over activities for quick details

  • Good for visual browsing

You choose the default view when you create your widget embed. Customers can always switch between views themselves using the toggle on the widget.

[SCREENSHOT NEEDED: Calendar view showing activity details on hover]

šŸ·ļø Widget Tags

What are Widget Tags?

Widget tags let you group activities together by assigning them a shared label. You can then create separate widgets for different tags, and display them on different pages of your website.

Example: You offer both "Summer Classes" and "After School Classes." You'd tag summer activities with the tag "Summer" and after-school activities with "After School." Then you create two widgetsā€”one filtered to show only Summer activities, one filtered to show only After School activities. You embed the Summer widget on your Summer page and the After School widget on your Activities page.

How to Create Widget Tags:

  • Widget tags are created in your schedule building flow when you set up activities, not in the Widget Embeds section

  • Once created, they'll appear in the Widget Tags dropdown when you create a new embed

How to Use Tags in an Embed:

  • When creating a widget embed, select the tags you want that widget to display

  • You can select multiple tags (the widget will show all activities with any of the selected tags)

  • Leave this field blank if you want the widget to show all activities

Note: All widgets on your site have the same global settingsā€”you can't have one widget showing "Semesters" called "Classes" and another calling it "Sessions." However, widget tags let you show different subsets of activities on different pages.

āš ļø Current Limitations

Custom Colors / White Labeling We don't yet support custom colors or white labeling for widgets. Your widget will use our standard styling. Let us know if this is important for your siteā€”we're always developing new features!

Global Widget Settings All widget settings apply globally across your site. If you change a tab name from "Classes" to "Sessions," that change applies to every widget on your site. However, you can use widget tags to show different subsets of activities on different pages.

šŸ”§ Advanced Options

šŸ’” Widget Embed Override URL

If you need your widget to default to a specific schedule, activity, or filter (beyond what the standard embed allows), we can create a custom override URL for you.

These specialized embeds are identified with a blue label and are managed by the Sawyer support team. They can't be edited through the self-service feature, but the code and URL remain accessible and can be deleted.

Example use cases:

  • Default to a specific semester or session

  • Show only activities from one location

  • Filter to a specific age group or activity type

If you're interested in a custom embed, contact [email protected] with details about what you'd like the widget to show.

šŸŽ Gift Cards

To display gift cards on your widget:

  1. In your Sawyer account, go to Settings > Gift Cards

  2. Enable gift cards

  3. Set up your gift card options

The Gift Cards tab will then automatically appear on your widget.

For detailed instructions, see our Gift Card FAQ.

ā“ Frequently Asked Questions

Find answers to common questions about widgets and embedding.

Can I hide tabs from my widget?

Click the arrow to view the answer

Yes, all tabs can be hidden. The Appointments and Gift Cards tabs can be hidden directly in your Sawyer account. For other tabs, contact [email protected] to request changes.

Hidden tabs can still be accessed by direct link, but they won't appear in the widget menu for customers browsing.

What tabs show by default?

Click the arrow to view the answer

By default, your widget displays:

  • Drop-Ins

  • Semesters

  • Camps/Events

All other tabs (Class Packs, Memberships, Online Classes, Parties, Gift Cards) appear automatically only when you've added offerings in those categories in Sawyer.

Can I change the names of widget tabs?

Click the arrow to view the answer

Yes! Most tabs have alternative naming options (see the Tab Names & Options section above). For example, "Semesters" can be called "Classes," "Sessions," or "After School."

To request tab name changes, email [email protected] and let us know which tabs you want renamed and what names you'd prefer.

Can I embed multiple widgets on my website?

Click the arrow to view the answer

Absolutely! You can create multiple widget embeds and place them on different pages. For example, you might have one widget on your homepage showing all activities and another on a dedicated "Summer Camps" page showing only summer offerings.

Use widget tags to filter which activities appear on each widget, then create separate embeds for each tag combination.

What happens if I hide my widget?

Click the arrow to view the answer

If you set a widget embed to "Hidden" in your account, the code won't render on your website even though it's embedded. This is useful if you want to temporarily pause a widget without deleting it.

The Live Link for a hidden widget remains active, so you can still preview it.

Are widget settings global?

Click the arrow to view the answer

Yes. All widget settings apply across your entire site. If you change a tab name from "Classes" to "Sessions," that change applies to every widget on your site.

However, you can use widget tags to show different subsets of activities on different pages, giving you flexibility without changing global settings.

The widget isn't showing on my website. What should I do?

Click the arrow to view the answer

Try these troubleshooting steps:

  1. Make sure you saved and published. In many website editors, widgets don't preview in edit mode. Save your changes and visit the live site.

  2. Check for extra spaces. Make sure there are no spaces before or after your embed code when you paste it.

  3. Verify the HTML block type. Look for an HTML block, Custom HTML block, Code block, or Embed option in your website editor.

  4. Check your widget status. Make sure the widget is set to "Active" in Sawyer, not "Hidden."

  5. Contact support. If none of these work, email [email protected] with details about your platform and what you've tried.

Can I customize the colors or styling of my widget?

Click the arrow to view the answer

Custom colors and white labeling are not yet available. Your widget uses our standard styling. We're working on additional customization optionsā€”let us know if this is important for your site!

What if my website platform doesn't accept custom code?

Click the arrow to view the answer

Some website builders (like Canva websites and certain WordPress.com plans) don't support custom code. In these cases, you can use your Live View URL to create a direct link or button instead:

  1. Copy your Live View URL from Sawyer

  2. Create a button on your website that links to that URL

  3. Customers can click the button to register

Alternatively, contact [email protected] to discuss other options.

Can I use my widget on multiple websites?

Click the arrow to view the answer

Yes! You can create separate widget embeds for different websites or even the same website multiple times. Each embed is independent, so you can customize them differently if needed.

Just create a new embed in Sawyer for each instance and add the code where needed.

How do I know if the widget is working correctly?

Click the arrow to view the answer

  1. Save and publish your changes

  2. Visit the live site (the widget won't show in edit mode)

  3. Check that activities appear in the list or calendar view

  4. Test the Register button to make sure it works

  5. Verify filters and tabs respond to clicks

If anything looks off, contact [email protected] with screenshots and details.

Related Articles
Embedding the Sawyer Widget
Adding Sawyer as a contributing admin
How to Embed a Widget on Wix
Sawyer Booking Fee
Sawyer Website Builder
Did this answer your question?