Embedding Recess onto your website is fast and easy and creates a fully integrated and seamless experience for your clients.
Covered in this Article
Step 1 - Setting up your iFrame
To create your iFrame, go to the Growth Suite section on the left-hand menu bar and select iFrame
Add your website URL
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.
Select a page: In-person, Packages, etc.
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
Choose display options
Note: Tags is an option for you VOD collection and is recommended if you are organizing your library with tags
Show Header
Only use this option if you do not have dedicated pages on your website for your schedule, pricing, etc.
Tips on the embed code
You can edit things directly in the code to improve how things display. Note, the text is case sensitive
List vs gallery: change the gallery view to list view by changing this part: displayClassIrl=list
Display Days
The iFrame will show all upcoming classes on any given day and days in the future
To limit how many future days are shown in the list, add this to the very end of the URL string before the last quotation mark
&displayDays=3
3 is an example, you can put any number there
Filter the Schedule for an Instructor
Instructor: &displayInstructorIds=
You can find the IDs of the instructors in the URL on their profile page
Filter the Schedule for Specific classes/events
If want to create special iFrames for an events or workshop page, please reach out to support as they will need to give you some of the IDs you'd add to the code.
Events/Workshops: &displayFormatIds=
Step 3 - Embedding the iFrame onto your Website
You can preview how it will look before embedding it
Click the "Copy" button
Follow the instructions for your web builder to paste the embed code onto your website
Note: If you change any of the option after you embed the code, you must re-embed the code again with the new options.