Add a popup window for scheduling
advertisement
Professional & Workgroup Editions
Add a popup window for scheduling appointments on your own web page using
HTML
Date: August 2, 2011
Page 1
Add a popup window for scheduling appointments to your own web page
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.
2.
3.
4.
Log in to your TimeTrade account
Click on the Home tab
Click on the Activities in the left pane
Click on the activity which you want to expose on your web page. Copy the link.
Page 2
Add a popup window for scheduling appointments to your own web page
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{
display: none;
position: absolute;
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 {
display: none;
Page 3
Add a popup window for scheduling appointments to your own web page
position: absolute;
top: 25%;
left: 25%;
width: 48%;
height: 68%;
padding: 16px;
border: none;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
For Professional Edition users not using the logo option:
<style>
.black_overlay{
display: none;
position: absolute;
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 {
display: none;
position: absolute;
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
Add a popup window for scheduling appointments to your own web page
<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 1In 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 2The 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
Add a popup window for scheduling appointments to your own web page
No changes are needed to this part
Part 3The 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.
II.
III.
Change the URL in this code to the URL that you copied from your TimeTrade account
in step 1.
Be sure to add ?sh=1 at the end of your URL
For Professional Edition users who do not use logo option: change the width of
the iFrame from “750” to “1012”
Page 6
Add a popup window for scheduling appointments to your own web page
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
Add a popup window for scheduling appointments to your own web page
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{
display: none;
position: absolute;
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 {
display: none;
position: absolute;
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
Add a popup window for scheduling appointments to your own web page
</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>&amp;</strong>
</span> <a href="#">Share Stories</a></li></ul>
Page 9
Add a popup window for scheduling appointments to your own web page
</h3>
</UL>
<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>
<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>
</UL>
<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 1123-456-7890</marquee></td>
</tr></table>
<hr/>
<H5 font color="#FFFAF0 "align="center">
<a
<a
<a
<a
<a
href="www.timetrade.com"
href="www.timetrade.com"
href="www.timetrade.com"
href="www.timetrade.com"
href="www.timetrade.com"
title="Health Guide">Health Guide </a>
title="Pro Health Terms of Use">Terms of Use
</a>
title="Pro Health Privacy Policy">Privacy Statement
title="Contact Pro Health">Contact Us</a>
title="Jobs">Jobs</a>
</a>
</H5>
<hr/>
<hr/>
<p><sub><H5
<p><H5 font
Health</A>
<p><H5 font
<p><H5 font
cconnor
</body>
</html>
font color="#FFFAF0 "ALIGN="center"> Copyright 2011
color="#FFFAF0 " ALIGN="center"><A HREF="http://www.timetrade.com">Pro
color="#FFFAF0 " ALIGN="center">Phone: (123) 456-7890
color="#FFFAF0 " ALIGN="center"> E-Mail: <A HREF="mailto:cconnor@anselm.edu">
Page 10
Add a popup window for scheduling appointments to your own web page
![[#PALLADIO-222] Automatically deriving the optimization problem](http://s3.studylib.net/store/data/007480371_1-e23cf3b38fdfe320514260fd192de951-300x300.png)
