Professional & Workgroup Editions Add a popup window for scheduling appointments on your own web page using HTML Date: August 2, 2011 Page 1
Overview This document describes how to insert a popup window of the TimeTrade appointment widget while keeping your own web page shaded in the background. Using this popup widget approach allows your visitors to book an appointment while your web page remains running. It is assumed that the reader of this document is proficient with the use of HTML embed code to add widgets to existing web pages. Step 1: Get the activity URL 1. Log in to your TimeTrade account 2. Click on the Home tab 3. Click on the Activities in the left pane 4. Click on the activity which you want to expose on your web page. Copy the link. Page 2
Step 2: Save the button to your computer 1. Right click the image below and save it in the folder which your HTML document is in Step 3: Insert the style code 1. Open your HTML web page editor 2. In the <head> section of your code, copy and paste the following code: For Workgroup and Professional Edition with logo option: <style>.black_overlay{ top: 0%; left: 0%; width: 100%; height: 200%; background-color: #595454; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);.white_content { Page 3
</style> top: 25%; left: 25%; width: 48%; height: 68%; padding: 16px; border: none; background-color: white; z-index:1002; overflow: auto; For Professional Edition users not using the logo option: <style>.black_overlay{ top: 0%; left: 0%; width: 100%; height: 200%; background-color: #595454; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);.white_content { top: 25%; left: 25%; width: 65%; height: 68%; padding: 16px; border: none; background-color: white; z-index:1002; overflow: auto; </style> Step 4: Insert the popup window 1. In the <body> section of your code, copy and paste the following code: <p><center><a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='block';document.getelementbyid('fade').style.display='block'"> <img src="link.png"></a></center></p> Page 4
<div id="light" class="white_content"><h3 align="right"><a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='none';document.getelementbyid('fade').style.display='none'"> <h3 align="right">close</h3> <iframe src=https://my.timedriver.com/ktn42?sh=1 scrolling="no" align="center" frameborder="0" width="750" height="530">you do no support iframe</iframe></a></div> <div id="fade" class="black_overlay"></div> 2. To help show the areas which need to be changed, the code has been broken down into three parts. Each part will show the necessary changes that will allow you to customize the code to your web page. Part 1- In our example, the following code will display the Click to Schedule image on your web page <p><center><a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='block'; document.getelementbyid('fade').style.display='block'"><img src="link.png"></a></center></p> Changes: I. Change img src= link.png to the appropriate name that you saved the picture as in step two. Part 2- The following code opens the popup while fading the background and also inserts the close button on the top right corner <div id="light" class="white_content"><h3 align="right"><a href = "javascript:void(0)" onclick= "document.getelementbyid('light').style.display='none';document.getelementbyid('fade').style.dis play='none'"><h3 align="right">close</h3> Page 5
No changes are needed to this part Part 3- The following inserts the iframe in the popup window <iframe src=https://my.timedriver.com/ktn42?sh=1 scrolling="no" align="center" width="750" height="530">you do not support iframe</iframe></a></div> frameborder="0" Changes: I. Change the URL in this code to the URL that you copied from your TimeTrade account in step 1. II. Be sure to add?sh=1 at the end of your URL III. For Professional Edition users who do not use logo option: change the width of the iframe from 750 to 1012 Page 6
There are no further changes required. Save your web page Congratulations! Your page is now ready for use. Note: By adding the?sh=1 to the end of the URL you will be eliminating the logo on the top left of the page. If you wish for that logo to appear, remove the?sh=1. You may need to adjust the height of the iframe, depending on the size of the logo, to eliminate the scroll. **On the next page is an example code of a web page in which uses this popup approach Page 7
Example Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>pro Health</title> <link href="dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" /> <--Creates the background for the popup--> <style>.black_overlay{ top: 0%; left: 0%; width: 100%; height: 200%; background-color: #595454; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);.white_content { top: 25%; left: 25%; width: 48%; height: 68%; padding: 16px; border: none; background-color: white; z-index:1002; overflow: auto; </style> </head> <body bgcolor=#000033> <h1 style="color:#fffaf0 " align="center">pro Health Gym</h1> <h4 style="color:#fffaf0 " align="center"> Your road to success</h4> <br> <--Creates the menu--> <ul id="navigation" class="nav-main"> <li><a href="#">home</a></li> <li><a href="#">schedule an Evaluation</a></li> <li class="list"><a href="#">pro Health Services</a> <ul class="nav-sub"> <li><a href="#">marathon Training</a></li> <li><a href="#">weight Loss</a></li> <li><a href="#">body Building</a></li> Page 8
</ul> </li> <li><a href="#">memberships</a> <ul class="nav-sub"> <li><a href="#">current Promotion</a></li> <li><a href="#">guest Membership</a></li> <li><a href="#">pricing</a></li> </ul> </li> <li><a href="#">personal Training</a></li> <li><a href="#">group Exercise</a></li> <li><a href="#">about your First Visit</a></li> <li><a href="#">pro Health Locations</a> <ul class="nav-sub"> <li><a href="#">massachusetts</a></li> <li><a href="#">new York</a></li> <li><a href="#">connecticut</a></li> </ul> </li> <li><a href="#">about Pro Health</a></li> <li><a href="#">contact Us</a></li> </ul> <br /> <h2 style="color:#fffaf0 " align="center">welcome to Pro Health Gym - MA, CT, NY</h2> <h3 style="color:#fffaf0 " align="center">we are dedicated to providing our members with the finest level of service in the fitness community. We emphasize top-level health and fitness from all aspects including education, nutrition, equipment, classes, programs and much more. Membership to our state-of-the-art fitness centers and health clubs are more than a keytag... it is the foundation towards a better you! Check us out today.</h3> <br /> <--Separates the webpage into three parts--> <UL style="width:500px; border:0px solid gray; padding:20px 20px 20px 20px; float:left;"> <h1 style="color:#fffaf0 " align="center">food Guide</h1> <center><img alt="" src="food.jpg"height="200" WIDTH="200" BORDER="0" /></center> <p><h3 style="color:#fffaf0 ">Do you find yourself looking at the calories on everything you eat? Do you want an easy place to find all the information you need about a healthy diet? Then this Food Guide section is for you! Find hundreds of easy-to-read articles here.</p> <ul style="width:500px; border:0px solid gray; padding:20px 20px 20px 20px; float:left;"> <li><a href="#">learn More</a><br /></li> <li class="vids"><a href="#">watch Success Videos</a></li> </h3> </ul> </UL> <UL style="width:500px; border:0px solid gray; padding:20px 20px 20px 20px; float:left;"> <h1 style="color:#fffaf0 " align="center">member Testimonials</h1> <center><img alt="" src="testimonials.jpg" HEIGHT="200" WIDTH="200" BORDER="0"/></center> <p><h3 style="color:#fffaf0 ">Read the <a href="#">success Stories</a> of Pro Health Members</p> <a href="#"> Pro Health Stories</a> <ul style="width:500px; border:0px solid gray; padding:20px 20px 20px 20px; float:left;"> <li><a href="#">view Stories</a> <span class="bluecolor"> <strong>&</strong> </span> <a href="#">share Stories</a></li></ul> Page 9
</UL> </h3> <UL style="width:500px; border:0px solid gray; padding:20px 20px 20px 20px; float:left;"> <h2 style="color:#fffaf0 " align="center">do you know your current health age? Schedule your free personal training appointment today to find out!</h2> <--Inserts the picture link to an iframe--> <p><center><a href = "javascript:void(0)" onclick = "document.getelementbyid('light'). style.display='block';document.getelementbyid('fade').style.display='block'"><img src="link.png"></a></center></p> <div id="light" class="white_content"><h3 align="right"><a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='none'; document.getelementbyid('fade').style.display='none'"><h3 align="right">close</h3> </UL> <iframe src=https://my.timedriver.com/ktn42?sh=1 scrolling="no" align="center" frameborder="0" width="750" height="530">you do no support iframe</iframe></a></div> <div id="fade" class="black_overlay"></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <img src="facebook.gif"> <br><br><br> <table bgcolor="##696969 " border="1" width="100%"><tr> <td><font color="#ffff00" align="center"><marquee behavior="scroll" direction="left">call us at 1-123-456-7890</marquee></td> </tr></table> <hr/> <H5 font color="#fffaf0 "align="center"> <a href="www.timetrade.com" title="health Guide">Health Guide </a> <a href="www.timetrade.com" title="pro Health Terms of Use">Terms of Use </a> <a href="www.timetrade.com" title="pro Health Privacy Policy">Privacy Statement </a> <a href="www.timetrade.com" title="contact Pro Health">Contact Us</a> <a href="www.timetrade.com" title="jobs">jobs</a> </H5> <hr/> <hr/> <p><sub><h5 font color="#fffaf0 "ALIGN="center"> Copyright 2011 <p><h5 font color="#fffaf0 " ALIGN="center"><A HREF="http://www.timetrade.com">Pro Health</A> <p><h5 font color="#fffaf0 " ALIGN="center">Phone: (123) 456-7890 <p><h5 font color="#fffaf0 " ALIGN="center"> E-Mail: <A HREF="mailto:cconnor@anselm.edu"> cconnor </body> </html> Page 10