Integrations we do have

ClassFit integrates with Zoom, Mailchimp and Stripe, and you can sync your classes to your Google, Apple or Outlook calendar.

Where to find it
Go to Classes in the left side menu, then My classes. Click Sync Calendar at the top right. The Calendar Integration window opens with three options: Google Calendar, iCal Calendar and Outlook Calendar. Each one shows whether it is connected, with a Connect button next to it.

Google Calendar and Outlook Calendar
Click Connect next to the one you use and sign in to that account when you are asked to. Once it is done, the status changes to Connected and your classes appear in that calendar.

Apple Calendar
Apple Calendar uses the iCal Calendar option. Click Connect next to iCal Calendar, then copy the iCal Calendar URL it gives you. Add that URL to Apple Calendar as a subscribed calendar. On a Mac, open the Calendar app and choose File, then New Calendar Subscription, and paste the URL in. On an iPhone or iPad, go to Settings, then Calendar, Accounts, Add Account, Other, and choose Add Subscribed Calendar. The exact wording can vary between versions of iOS.

Good to know
You can come back to the same Sync Calendar window at any time to disconnect a calendar. If you see a message saying the sync has expired, connect it again from here.

If you need any further help with this, please email hello@classfit.com.

Getting Started

On the Integrations page, find Mailchimp and click on the toggle button.

Log in to your ClassFit account, go to the left side menu. Click on Tools > Integrations.

At this point, you’ll have to grant access to ClassFit. You can create a new account here, although we recommend doing this beforehand. You’ll need to confirm this access.

Once you’ve logged in you’ll need to authorize ClassFit to connect with your Mailchimp account.

Almost there! Once redirected back to ClassFit, the final step is to pick the list you’d like your clients to join. Please note you can only select one list.

From the dropdown menu, pick a list and click Save – you’re all set! Your client list will automatically sync.

1. The client synchronization operates ONLY IN ONE DIRECTION.

Whenever a new client is registered on ClassFit or a client’s email address gets updated, they’re added to your Mailchimp account. However, if a client is REMOVED from ClassFit, they won’t be removed from Mailchimp. Likewise, altering their email address in Mailchimp WON’T change their email in ClassFit, and adding a new subscriber to Mailchimp WON’T add them to ClassFit.

2. Syncing can’t be selective, and you can’t ‘force’ a sync.

ClassFit synchronizes all active (not archived) clients with an email address. The first sync happens right after you integrate. Due to the one-way syncing nature, there’s no ‘undo’.

Only the client’s name, email address, and phone number are synchronized. No other data gets synced.

4. Archived clients are not included in the synchronization.

Nonetheless, archiving an active client won’t remove them from your Mailchimp list.

5. Clients are added to your list as ‘subscribed’.

This means they WON’T receive any double opt-in notification, regardless of your settings.

If you need any further help with this, please email hello@classfit.com.

• Wix
• Squarespace
• Weebly
• GoDaddy
• Shopify
• Other website builders

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all customer facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right. You can rename the tabs on your calendar and choose which tabs will appear on your website.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar to your WordPress website

Log in to your WordPress account and navigate to the page that you’d like to add your calendar to and select the “text” tab.

Now copy the first line of code from ClassFit.

Then paste the code into your web page in the position you would like it to appear.

Once complete, return to ClassFit and copy the second line of code.

Now paste this line of code at the very bottom of the page, after all the other text.

Finally, click update on your WordPress page.

Now your new customized ClassFit calendar should be appearing perfectly on your website.

If you need any further help with this, please email hello@classfit.com.

• Wix
• WordPress
• Squarespace
• Weebly
• GoDaddy
• Shopify
• Other website builders

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all client-facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar to your website (other website builders)

Log in to your website builder account and navigate to the page that you’d like to add your calendar to. On most website builders there is an option to add HTML code into an iframe. This might be called an iframe, code block, add HTML, or something similar.

Then copy each line of code from the ClassFit into the box that appears.

Also make sure that “code” is selected. Then click the Update button.

The calendar should now appear within the editor, however on some website builders it may only appear on your live site once published. If this is the case we recommend you test this on a webpage that isn’t easily found by your clients, but that you can access with a direct link.

If you need any further help with this, please email hello@classfit.com.

• Wix
• WordPress
• Squarespace
• Weebly
• GoDaddy
• Shopify
• Other website builders

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all customer facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right. You can rename the tabs on your calendar and choose which tabs will appear on your website.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar to your GoDaddy website

Log in to GoDaddy and click Manage to open GoCentral. Click Edit Site. Navigate to the page you would like to add the calendar to and Add Section.

Scroll to the bottom of the Add Section panel and click HTML. Then click the Add button next to Embed custom code on the page.

Then copy each line of code from the ClassFit into the box that appears

And paste each line of code into the “Custom Code box.

Click Done at the top of the HTML panel. Click Preview to see the results and when you’re happy with everything click Publish. Your widget should look similar to the picture below.

If you need any further help with this, please email hello@classfit.com.

• Wix
• WordPress
• Weebly
• GoDaddy
• Shopify
• Other website builders

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all client-facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar to your Squarespace website

Log in to your Squarespace account and navigate to the page that you’d like to add your calendar to. Then click on the + icon on the top right.

Now type “code” into the search bar and click on the code icon.

Alternatively, if the “+” button is not visible, click on the insert point on the page as highlighted below.

Then select “Code” as pictured below.

Then copy each line of code from the ClassFit into the box that appears

Also make sure that display source is left unchecked and HTML is selected in the dropdown. Then click the Apply button.

The calendar will not show while you are editing the page. If you click on the “Preview in safe mode” button you will see the loading icon, which is an indicator that this has worked.

To see the calendar properly, you will need to view the live web page as a visitor, rather than in editor mode. Once you do you should see your live calendar in all its glory as below.

Pro Tip: In some Squarespace website templates the calendar has a plugin which may block this calendar. If you find yourself with this issue please:

• Go to the Home Menu, click Design, and then click Site Styles.
• Scroll down to Site: Loading.
• Uncheck Enable Ajax Loading.
• Click Save at the top of the panel to apply your changes.

If you need any further help with this, please see Squarespace’s guidance on inserting HTML code into their websites here, or email hello@classfit.com.

• Wix
• WordPress
• Squarespace
• GoDaddy
• Shopify
• Other website builders

Customizing your calendar

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all client-facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar to your Weebly website

Log in to Weebly and click Edit Website. Navigate to the page you would like to add the calendar to and click Build. Then, under the Basic section, drag and drop the Embed Code box to where you would like the calendar to appear.

Click “Click to set custom HTML” to open the custom HTML editor.

Then copy each line of code from the ClassFit into the box that appears.

And paste each line of code into Weebly’s custom HTML box.

Click outside the HTML box to save your changes. The widget should load a few moments later. Then click Publish to save your changes.

Note. Sometimes the Weebly editor can be buggy when previewing the calendar. This will not reflect on the published page. We advise that you publish the page and preview the live version to confirm this.

If you need any further help with this, please email hello@classfit.com.

]]> https://classfit.com/knowledge-base/adding-your-calendar-to-your-wix-website/ Mon, 15 Apr 2024 11:13:50 +0000 https://classfit.com/?post_type=epkb_post_type_1&p=24665 If you have a website, you might want to add a custom branded calendar to it. The ClassFit calendar will allow your clients to book and pay for all classes from within your website. And you can custom brand it so its colors will perfectly match your business branding. This tutorial will show you how to integrate your calendar on a Wix website. If you have a different type of website, please choose from our other tutorials below.

• WordPress
• Squarespace
• Weebly
• GoDaddy
• Shopify
• Other website builders

Customizing your calendar

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all client-facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity and clicked Save and reload, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colors until it is just right.

Once you’re happy with your calendar branding, you can add it to your website. Scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type.

Adding your calendar to your Wix website

Log in to your Wix account and navigate to the page that you’d like to add your calendar to. Then click on the + icon, then “more”. Then drag the “HTML iframe” logo to the place you want your calendar to appear on your page.

Then copy each line of code from the ClassFit into the box that appears

Also make sure that “code” is selected. Then click the Update button.

The calendar should now appear within the Wix editor, however it may not depending on your settings within Wix.

To see the calendar properly, you will need to view the live web page as a visitor, rather than in editor mode. Once you do you should see your live calendar in full working order.

Note – If you see a scrollbar on the calendar, and wish to remove this, you will need to increase the height of the iframe on your Wix website to account for the full height of the iframe.

If you need any further help with this, please email hello@classfit.com.

• WordPress
• Wix
• Squarespace
• Weebly
• GoDaddy
• Other website builders

Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.

On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all customer facing emails that relate to your business, and create your custom branded calendar.

After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colours until it is just right.

Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.

Adding your calendar through Shopify to your website

1. From your Online Store, go to Pages.

2. Click on the name of the page that you would like to embed the widget on. Or, create a new page by clicking the Add page button.

3. In the Rich Text Editor, click on the HTML button.

4. Now copy the two lines of codes from ClassFit.

5. Then paste the code into the HTML box.

6. Save your changes.

Now your new customized ClassFit calendar should be appearing perfectly on your Shopify account.

If you need any further help with this, please email hello@classfit.com.