Website Embed and iFrames (Dash 2.0)

Embedding Recess onto your website is fast and easy and creates a fully integrated and seamless experience for your clients.

Covered in this Article

• Setting up your iFrame
• Choosing your display options
• Embedding the iFrame onto your website
• Video tutorial

Step 1 - Setting up your iFrame

1. To create your iFrame, go to the Growth Suite section on the left-hand menu bar and select iFrame

2. Add your website URL

3. Add your brand colors

Step 2 - Choosing Your Display Options

We always recommend building out the navigation bar on your website with dedicated pages for your schedule, pricing, etc.

iFrame Setup Overview

1. Select a page to Integrate: Such as In-person, virtual or packages, etc.

   
   
   • If you select appointments, a few additional details will appear. Appointments:
     • Level: Choose Studio Level
     • Location: If you are a single-location studio, we recommend choosing the 1 location
     • Appointment Category: We recommend leaving this empty

2. Choose display options

• Tags are available for your VOD collection and are recommended if you organize your library using tags.

3. Show Header

• Only enable this option if you do not have dedicated pages on your website for schedule, pricing, or similar content.

Tips for Editing the Embed Code

• You can edit the embed code directly to adjust how it displays. Note that the text is case sensitive.

List vs Gallery view

• To switch from gallery view to list view, update the code to:

  displayClassIrl=list

Display days

• The iFrame shows all upcoming classes starting from the current day.

• To limit how many future days appear, add the following to the end of the URL before the final quotation mark:

  &displayDays=3

• You can replace 3  with any number.

Filter by instructor

• Use the following parameter:

  &displayInstructorIds=

• Instructor IDs can be found in the URL on each instructor’s profile page.

Filter specific classes or events

• For creating iFrames for specific events or workshops, please contact support. We can provide the required IDs.

• Parameter used:

  &displayFormatIds=

Step 3 – Embedding the iFrame onto your website

1. You can preview how it will look before embedding it

   • 

2. Click the "Copy" button

3. Follow the instructions for your web builder to paste the embed code onto your website

   1. Wix

   2. Squarespace

   3. Wordpress

   4. GoDaddy

Note: If you change any of the option after you embed the code, you must re-embed the code again with the new options.

Video Tutorial