Professional & Workgroup Editions

(1)

Page 1

Add a popup window for scheduling appointments to your own web page

Professional & Workgroup Editions

Add a popup window for scheduling appointments on your own web page using

HTML

(2)

Page 2

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

(3)

Page 3

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:

(4)

Page 4

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:

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>

(5)

Page 5

<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>

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>

(6)

Page 6

No changes are needed to this part

Part 3-

The following inserts the iframe in the popup window

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”

(7)

Page 7

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.

(8)

Page 8

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>

<--Creates the background for the popup-->

<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-->

<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>

(9)

Page 9

</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-->

<h1 style="color:#FFFAF0 " align="center">Food Guide</h1>

<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>

<li><a href="#">Learn More</a><br /></li>

<li class="vids"><a href="#">Watch Success Videos</a></li> </h3>

</ul> </UL>

<h1 style="color:#FFFAF0 " align="center">Member Testimonials</h1>

<p><h3 style="color:#FFFAF0 ">Read the <a href="#">Success Stories</a> of Pro Health Members</p>

<a href="#"> Pro Health Stories</a>

<li><a href="#">View Stories</a> <span class="blueColor"> <strong>&</strong> </span> <a href="#">Share Stories</a></li></ul>

(10)

Page 10

</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-->

<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>

</tr></table> <hr/>

<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>

</H5> <hr/> <hr/>

<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

cconnor

</body> </html>