Follow

Advanced Topic: How to Customize an Iframe for Embedding

Key Point

 

WARNING:  

When generating a custom URL, always make sure you are NOT logged in to the member connect site.  You must see the "Log In" message in the left hand sidebar in order to proceed.

login_warning.png  

If you fail to do this, you will cause a SERIOUS SECURITY RISK for your database & your customers.

 

You can embed your Zen Planner member connect site directly into your company website, which allows you to use all the functionality of member connect without redirecting your students to another website. This option provides your customers with a smooth, branded experience with you studio's name and design. 

To achieve this seamless experience for your students, you will use iframe codes to embed your member connect site.  Most website building platforms support the use of iframes (Wordpress.org, Wix, Squarespace for example) and their user friendly interfaces make adding them in quick & easy.

Iframes can be customized so you can present anything that is visible on your member connect site that doesn't have a pre-made iframe.  A few examples are if you want to embed a particular view of your calendar or direct people to a specific membership, event or retail item.

Before proceeding, check the pre-made iframe codes for the most frequently used embeds by going to Setup > Website > Sharing and Embedding Page in your database to prevent unnecessary work on your part.  

How to Customize an Iframe

Customizing an iframe to show specific content from your member connect site is very easy.  You need two things:  the URL (address) of the page in your Member Connect site and an empty iframe code to customize with this URL.

Generating the URL

SECOND WARNING!  Before proceeding, review the big bold warning above and make sure you are NOT logged in when accessing your Member Connect site to generate this URL.  

You will generate and capture this unique URL by going to your member connect site on your desktop and navigating to the content you need to embed.  The link to your member connect site is located in your database under Setup> Member Connect> Appearance at the top by Location.  

Once you are on your Member Connect site, make sure you see the "Log In" link in the left hand sidebar.  If you don't, you need to click on the "Log Out" link before proceeding any further.

Now that we're positive you aren't logged in, navigate to the page and content that you want to embed and further customize the view if available and desired.  For example, below is an online calendar on the member connect site, customized to show only a specific instructor's schedule at a specific location.  As the options on the page are selected,  Zen Planner updates the URL in the browser's location bar to identify this specific view.  When you are satisfied with how the page is presented, highlight & copy the URL in the location bar. 

custom_cal.png

Now that we have the unique URL, we are going to insert it into an empty iframe.  

Customizing the Iframe

Once you have generated the unique URL, you will copy & paste it into an empty iframe to create your very own customized iframe.  

First, copy the pre-formatted, empty iframe below into an html editor like http://htmledit.squarefree.com/.  Since this iframe code isn't customized yet, you will see the Zen Planner company website.  Don't worry, after you update it with the URL and make a few other tweaks, it will realign to the content you are embedding.   

<iframe src="https://XXXXX.zenplanner.com/zenplanner/portal" style="width:100%; height:500px;" frameborder="0" id="idZenPlannerFrame">
<noframes><a href="https://XXXXX.zenplanner.com/zenplanner/portal"></a></noframes> </iframe>
<script src="https://XXXXX.zenplanner.com/zenplanner/skin/js/resize.js"></script>

 

Follow the visual instructions below to finish customizing your iframe.

After you finish updating those three strings, you can make sure the customized iframe is correct in the html editor preview window before embedding it on your website.  The customized iframe code can be copied into a MS Word or other text document to be saved for embedding later.

iframe_preview.png

 

For additional help with embedding iframe code on your website consult the support site for your website building platform, or reach out to Zen Planner tech support.

  • Toll Free:  866-541-3570; 7a-4p MST
  • Email:  help@zenplanner.com
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk