An iframe is a simple option to embed content including your branded Schedule, Login, Sign-up, My Account, etc directly onto your website.
For legacy customers, please note: The zingfit iframe is the new integration solution, replacing our Standard Integration and Full Integrations. If you are an existing customer reading this article please read more about transitioning here. And please note, the iframe places all your zingfit-powered content directly on your website, with no 3rd party hosted pages—meaning you have complete control of your brand's digital presence.
Embedding the iframe on your website.
We have really helpful guides for embedding the zingfit iframe on your website. Have a read of the below FAQs and when you're ready to learn more about the embedding, take a look at the iframe embed guide. An example of how to embed your iframe on WordPress can be found here .
What are the benefits of the iframe?
There are three key benefits
1) Digital branding and design
The iframe provides all the great branding and seamless customer experience you have become accustomed to with easy to use templates that are desktop and mobile optimized. The colors, fonts, design styling are all configurable within the zingfit iframe Tool. And, you can do even more work styling your iframe using our CSS Editor Tool.
Check out these examples of brands using the zingfit iframe, navigate from their homepage to their schedule, book a spot, grab a spot, etc. Also, check out their buy pages and sign-in/sign-up pages, to see how the iframe feels like it's part of your website and brand:
http://underdogboxn.com - CMS = WordPress
https://flykick.co.uk - CMS = Squarespace
https://lovecyclingstudio.com - CMS = Spacecraft
https://precisionrun.com - Custom Website / CMS
2) Digital tracking
Thanks to this sophisticated communication between your website and the iframe, the iframe creates "addressable links" e.g.
etc.
Visitors to your iframe powered pages will appear in your Google Analytics account—allowing you to track and analyze your website traffic from the homepage to booking. You can also use these links in your digital communications.
If you have a digital marketing agency, team member, etc. you might be interested to learn more about the customer journey tracking capabilities here.
3) Existing zingfit clients save time and money
Once you are on the iframe, you will no longer need to ask zingfit to make changes to your zingfit powered pages. This will save you time and money but still give all the elegant control of branding you have come to know and love about zingfit.
How do I customize the iframe?
When you have been given access to the iframe Configurator, you will see three tools for customization:
1) General Styles e.g. colors, fonts, etc.
2) Schedule and Buy page templates
3) CSS Editor Tool for additional customization
The General Styles section: Is where you will customize your font and color arrangement for all of your iframe pages. You can type in your desired font and type in color hex codes for each category—page background, links, text, disabled text.
The Schedule and Buy Page templates section: is where you can apply built-in design options to your Schedule and Buy page. There are three different Schedule layouts to choose from and two layouts for the Buy Page, plus design options for Navigation Buttons, Filter Buttons, and the Class Description (hover state).
The CSS Editor Tool : Is where you can implement a more advanced design with your iframe design.
You or your web developer can input CSS to create virtually any stylistic elements/effects you'd like to apply to your iframe pages. For example, if you:
Have a custom font
Would like to add an image to the background of your iframe pages
Add a unique color effect for hover states
Create very unique designs for your Schedule or Buy page e.g. https://www.precisionrun.com/reserve#/pricing/site/1
Through targeting objects in your CSS, the iframe has many customization options.
Can I see examples of the zingfit iframe?
Yes, here are 3 examples of the iframe in action. These are examples of brands that have used our Configurator Tool and done some CSS work with a developer:
Flykick (Squarespace): http://flykick.co.uk and iframe embedded https://flykick.co.uk/reserve#/schedule/site/1
Underdog Boxing (WordPress): http://underdogboxn.com and iframe embedded http://underdogboxn.com/book-a-class/#/schedule/site/1/wk/1
LoveCycling (SpaceCraft): https://lovecyclingstudio.com/ and iframe embedded https://lovecyclingstudio.com/schedule#/schedule
In addition to these brands, zingfit clients who have a digital agency and/or technical team are also using the iframe, examples include:
Precision Run: https://precisionrun.com and iframe embedded https://www.precisionrun.com/reserve#/schedule/site/1
What CMSs support the iframe?
Squarespace
WordPress
Boldgrid
Weebly
Spacecraft
Shopify
Silverstripe
Unfortunately, Wix and GoDaddy do not support zingfit's iframes
zingfit clients have also built custom websites, for example, using Ruby. Take a look at HIITRebel: https://hiitrebel.com/ and iframe embedded https://hiitrebel.com/schedules#/schedule/site/1
Can I change the design of my iframe design later on?
Yes, you can. Once you are live on the iframe integration, you will be able to update your CSS, choose a new template, font, etc from the Configurator Tool, update your CSS Editor.
More Information for Existing Clients who need to transition to the iframe (new clients ignore):
How do I transition to the iframe?
Please read this article about transitioning.
I am on a Full Integration, can I transition to the iframe?
Yes, you can but you will need to host your new website yourself.
If you are on a Full Integration, this means zingfit is currently hosting your entire website and you use the zingfit CMS for making website changes.
For Full Integration clients, a good time to change to the iframe is when you are redesigning/rebuilding your digital brand and website. After you transition to the iframe, you will no longer need to pay zingfit for CMS hosting, website changes, design requests, etc.
If you want to find a new CMS platform that includes a professional services team to help you with design and hosting, check out Spacecraft. If you are working with a local developer/designer, they will be able to advise you on the best CMS and hosting, etc.
Why can't I see the zingfit iframe Configurator Tool in my zingfit Admin?
The iframe Configurator Tool only appears after a client has requested it. And initially, we only add it to your Staging Admin, so you can test the configuration and test embedding it into your website (on unpublished pages).
This allows you to maintain your existing zingfit Schedule, Buy Page, etc. on your current website (Standard Integration or Full Integration). Once you have completed your iframe dev work in zingfit Staging, you will be able to move it over to your zingfit Production and publish it on your website. We agree upon a go-live date with you for the switch from Staging to Production.
How long will it take to transition to the iframe?
We can turn the iframe Configurator on for you immediately (in your Staging environment) almost immediately. We just need your formal request so we can assign you a Project Manager.
The length of time it takes for you to implement it will depend on the type of integration (Standard or Full Integration) you currently use. And will depend on your internal design/developer resources for implementing the iframe on your website.
To start the process of converting your current zingfit Integration to an IFrame Integration, please go here to make the request. Select the change request called, IFrame Conversion.
And please don't forget to read this very helpful article too.