This library is an Inquiry Form & Exam Scheduler built into one, allowing a patient to submit a simple message to your office, or schedule their first exam with very little hand-holding. This library is built with JavaScript, CSS, and HTML and is meant to be flexible enough to fit into most websites and platforms that host them.
This library is an Inquiry Form that allows a patient to submit a simple message to your office. This library is built with JavaScript, CSS, and HTML and is meant to be flexible enough to fit into most websites and platforms that host them.
Installing this form on your website requires a few steps:
A few things before you attempt to install the Inquiry Form & Exam Scheduler:
There are two ways to install the form on your website. The simplest way is to use our iframe. Alternatively, if you need to use any of our javascript methodsjavascript methods or replace our CSS library with your own custom CSS then you will need to follow the instructions here.
Simply include the following line (replacing "test" with your WaveOrtho Doctor ID) will generate a fully functioning form:
<iframe src="https://wave-wes.s3.us-west-1.amazonaws.com/v8/index.min.html?data-doctor-id=test" width="100%" height="1500px" frameborder="0"></iframe>You may need to adjust the height of the iframe by modifying its height attribute, depending on the iframe settings. For example, the iframe will need to be taller if the map is being displayed.
The following is an example of a very simple page that would load the Inquiry Form & Exam Scheduler (after you replace the "data-doctor-id" value with the ID given to you).
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us & Schedule Your Exam</title>
</head>
<body>
<iframe
src="https://wave-wes.s3.us-west-1.amazonaws.com/v8/index.min.html?data-doctor-id=test"
width="100%"
height="1500px"
frameborder="0"></iframe>
</body>
</html><!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us</title>
</head>
<body>
<iframe
src="https://wave-wes.s3.us-west-1.amazonaws.com/v8/index.min.html?data-doctor-id=test"
width="100%"
height="1500px"
frameborder="0"></iframe>
</body>
</html>First, you'll need to download the form from this link, unzip the contents, and move the files to the appropriate folders in your project. Another option for this library is to open the necessary files and copy and paste the contents into the appropriate HTML tags.
Once you've downloaded and unzipped the library, you'll need to add one line into your HTML:
<script src="lib/wave-ortho-inquiry-form.min.js"></script>You can also copy and paste the contents of the file above into a script tag.
<script>...</script>For simplicities sake, we'll recommend that you put the script tag into the head tag of your HTML tag.
You have the option of including the default form styling. Including this CSS will help the form look similar to the one on the demo page. If you want to include the default CSS file into your project, then you'll want to include this line in the head as well:
<link rel="stylesheet" href="css/wave-ortho-inquiry-form.min.css">When including links and references to files, you want to make sure that the src attribute for the script tag and the href attribute for the link tag are pointing to the correct file locations.
Again, you can also copy and paste the contents of the file above into a tag, but this time it will be a style tag:
<style>...</style>Depending on the quantity, and quality of the styles and themes used on your website, you may need additional explicit style declarations to override undesired appearances inherited and overwritten by the other themes. Your styles will need to be more specific than the styles inherited from other themes and to do this, you should inspect the elements, viewing the classes and IDs of certain elements to help you change their styles.
We recommend that your custom styles, whether overriding other themes or just changing the look, should be placed above the default CSS that you inserted above.
Simply including the following line (replacing "test" with your WaveOrtho Doctor ID) will generate a fully functioning form:
<div id="waveInquiryForm" data-doctor-id="test"></div>Upon loading, the library will search for a tag with the id: "waveInquiryForm" and if it's found, the form will auto-generate. The form can also be manually generated using the data-wait attribute and JavaScript, check the documentation page documentation page for more information.
The following is an example of a very simple page that would load the Inquiry Form & Exam Scheduler (after you replace the "data-doctor-id" value with the ID given to you and point the CSS and JavaScript file paths to the right place).
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
/*Custom CSS*/
</style>
<link rel="stylesheet" href="css/wave-ortho-inquiry-form.min.css"/>
<script src="lib/wave-ortho-inquiry-form.min.js"></script>
<title>Contact Us & Schedule Your Exam</title>
</head>
<body>
<div id="waveInquiryForm" data-doctor-id="test"></div>
</body>
</html>The WaveOrtho Inquiry Form & Exam Scheduler is highly customizable, so we recommend you take a look at a few more of the following resources to get a full understanding of what you would like the form to look like on your site.
Check out our sample layouts page for ideas on how the form can be changed to behave differently for different situations, needs, and drive certain behaviors.
Our documentation page is a comprehensive list of customization options that are used to change the behavior of the form.
The troubleshooting page helps you diagnose issues with the form, whether it's with loading or styling.
If you are using a wordpress site, this page can help you get it up and running.
If you are using a squarespace site, here is a guide that will help you get it working.