IFrame Configuration
Seanalee Greenough avatar
Written by Seanalee Greenough
Updated over a week ago

To begin or update your iFrame configuration navigate to Admin > Configuration > iFrame Configuration.

iFrame Embed Configuration

If you navigate to the iFrame Configuration screen for the first time, you will be presented with a field requesting your new Embed URL.

Setting up your iFrame Embed URL

  1. In your CMS, create a blank page with a page of your choosing. We recommend using 'Schedule', 'Reserve', or 'Studio'. This page will be the home of your embed. *Please Note: when you create this page- do not include this in your navigation.

  2. Once the page has been created, copy the URL.

  3. Paste that URL into the Embed URL option.

  4. Select Save.

Warning: Subsequent URL changes after the initial configuration can cause issues. We highly suggest against changing your Embed URL once created.

After you save the URL, zingfit will generate your URLs for your website based on your domain.

Configuration & Links

Embed URL: This is the URL added from your CMS.

Embed Code: This is the code that zingfit generated for your CMS. Copy this code and navigate to the hidden page you built in the previous step. This code is not editable. Once on the hidden page you created, create an HTML widget that is full width in the main content. Paste the copied embed code into this HTML widget. Ensure you save this page before navigating away from it. (edited)

Studio: A dropdown menu to dynamically change the URL based on location/site ID

Links: The Links generated will allow you to link to specific pages within the zingfit system.

General Styles

The general styles tab allows clients to apply different fonts and colors to your zingfit pages to match their brand.

Font Family: Below is the standard browser safe fonts that will universally work across all platforms:

Page Background, Links, Text, Disabled Text: These color selectors allow you to manually modify colors for each option. Use the manual color picker or paste in your HEX code to properly reflect your brand.

Pricing Page Layout: Decide between a list layout or grid layout for your buy page.

Schedule

Filters: Choose the layout for filter options displayed on your schedule page

Navigation: Decide which look and feel you want to display for navigation through weeks on your schedule

Class Description: When hovering over a class on the schedule, you can decide which hover over item appears

No matter what change you make in this setup, always remember to select 'Save' in order for your changes to apply.

Advanced CSS

If you wish for additional customization, you are more than welcome to add your own CSS to zingfit pages.

Please note: zingfit will not support Advanced CSS.

Site Preview

The Site Preview screen appears below your iframe configuration options. This window will provide you with a sneak peek of your options prior to going live with your customizations.

Did this answer your question?