How to set up your iFrame

iFrames let you bring Recess content - your schedule, packages, on-demand videos, and more onto your own website. Set your colors once, then generate embed codes or direct links for whatever you want to add.


Watch the video below for a full walkthrough, or follow the steps underneath.

You'll find everything under Tools > iFrames, split across four tabs: Appearance, Embed Builder, Links, and Custom Pages.

Appearance

This is where you set the colors your embeds and links will use.

  1. Set your Background Color and Primary Color.


  1. Check the Readability panel. It shows a contrast score and a pass/fail for Body Text, Buttons & Controls, and Large Headings, alongside a live preview of a Book Now button in your colors.

Note: If your colors don't meet the minimum contrast clients need to read your buttons, you won't be able to save them. Recess will suggest a close alternative, or you can pick a deeper primary color yourself.

  1. Click Save Colors.
  2. Under Your Website, enter your Website URL - this is where your embeds live, and Recess uses it to send clients back to your site after they book.

  1. Click Save Website.

Embed Builder

This is where you generate the actual embed code or direct link for a specific page - your schedule, packages, on-demand library, and so on.

Note: The Display Options and Integration settings only change the code shown below them. That code doesn't save on refresh, so if you reload the page, you'll need to reselect your options.


  1. Under Select Page to Integrate, choose what you want to embed - for example, Virtual, In-Person, or VOD.
  2. Set the display options for that page type. These change depending on what you picked:
    • Virtual/In-Person Display Options: Choose List or Gallery (Gallery shows classes as image blocks, List shows them in a list).


      • Category: Narrow the embed to just one category. Leave this blank to show all categories.
      • Display Days: How many days of classes to show. Leave this blank for infinite scroll.
    • VOD Display Options: Choose how on-demand content is grouped, such as by Tag.
      • Default Content Location: Which studio location's content shows by default.

      • Let Clients Switch Location (VOD): Lets clients change location from within the embed itself.
      • Show Collections (VOD): Shows your on-demand collections alongside individual videos.


  1. Toggle Show Header on or off, depending on whether you want the Recess navigation bar to appear inside the embed.
  2. Copy what you need:
    • Embed Code: Paste this into your website to embed the content directly on a page.
    • Direct Link: A standalone link that opens the same content as a normal webpage. Since it's not embedded, you can text or email it to a client without touching your website at all.

  1. Use the Preview section to check how it looks on Desktop, Tablet, or Phone before you publish.

This tab gives you ready-made links for common destinations - handy for texting or emailing a client directly, without needing to build anything.


Send a Client Straight In:

  • Sign In: Opens the sign-in screen in your colors, then sends the client wherever you choose. Set the destination under After Signing In, Send Them To, then copy the Sign-In Link.

Your App

  • Client App: Opens in any browser and installs to the client's phone home screen. This is the full app, not a single page, so it's best shared as a link rather than embedded.

Schedule & Product Links:

Pre-built links ready to text or email: In-Person Schedule, Virtual Schedule, Packages, and Appointments. Each opens as a list, defaulted to today, with no header - the header reappears once a client taps into a class, so they can still check out from there.


Custom Pages

Build your own page with text and media, then embed it or send it as a link - useful for anything that doesn't fit one of the standard page types.

  1. Click into Custom Pages to see your existing pages, or create a new one.
  2. In the page editor, click + Add to add a block. You can choose from:
    • Common: Text, Button, Spacer, Media.
    • Classes: Classes, VOD, Puzzle, Subbing Requests (Open, Pending, or Closed).
    • Products: Package, Retail Product, Gift Card.

  1. Toggle Make Page Public to control visibility, or Hide Page Behind Paywall if it should only be visible to clients with an active membership.

  1. Click Save, then Publish when you're ready to go live.

Each page gets its own Direct Link and Embed Code, plus View, Edit, and Preview buttons from the Custom Pages list.

Adding the Code to Your Website

Once you've copied an Embed Code, you'll need to add it to your website so it actually shows up for clients.

  • Embed Code: Paste this into an HTML or embed block on your website. The exact steps depend on which website platform you're using - most page builders (Wix, Squarespace, WordPress, etc.) have a block or element called something like "Embed," "Custom HTML," or "HTML iframe" that you can drop the code into. Check your website platform's own help docs if you're not sure where to find it.
  • Direct Link: Nothing to embed here. You can paste this straight into a button, menu link, text message, or email - anywhere you'd normally use a URL.

Note: This part happens outside of Recess, so the steps will look a little different depending on where your website is built. If you run into trouble, your website platform's support team will be able to point you to the right place to add embed code.

Need Help? If something on your profile doesn't look right, contact your studio or our support team at support@recess.tv.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us