Squarespace

Integrating the form into your Squarespace website shouldn't be too difficult, but it can be tricky. Squarespace doesn't officially offer support for getting third party libraries to work, so if you have any issues with it, please let us know and we'll do our best to get it back up and running for you.

How it Works

There are a few steps you'll need to take to get the library to work on your squarespace site: Page Header Code Injection (custom CSS, standard CSS, and the JavaScript library), and injecting some HTML code into a section of the site.

Page Header Code Injection

1. When you are on the page that you want to put the form on, along the left side you'll see the page (e.g. Home, Contact Us), with a Cog icon when you hover over the line.
2. Click on the cog to have the settings menu appear on the right, with 5 tabs along the top: Basic, SEO, Social, Media, and Advanced.
3. select the Advanced tab

You should see a page that has an title "PAGE HEADER CODE INJECTION" and an area to paste your code into

Open up a simple text-editor (if you are using a Mac, try "TextEdit", or if you are using a PC, try "Notepad"). You could also try using Microsoft Word or Apple Pages, but one of the text editors is less prone to errors.

Copy and paste the following into the text editor

<style>
    /**CUSTOM CSS*/
</style>

<style>
    ..."css/wave-ortho-inquiry-form.min.css"...
</style>

<script>
    ..."lib/wave-ortho-inquiry-form.min.js"...
</script>

Then, on the lines where there are ellipses, copy and paste the content from the file found at the path into the field, replacing the whole line with the copied and pasted content. There should be no ellipses in your final code.

Once you've pasted the CSS and JS files into the style and script tags above, copy and paste the contents of that file, into the field found on the Squarespace "PAGE HEADER CODE INJECTION" page. If there is already content in here, paste this at the bottom with a few spaces between the old code.

Adding custom HTML to a section of your site

The second part to this will be to add the HTML to your page that tells the library where you want the form to be located.

1. Find the place on your page that you want, as if you were adding a new section to your site, or a new content block (text, quote, image, video, slideshow, etc.)
2. Under the "MORE" section, click "Code"

When you've clicked "Code", a popup will appear that lets you enter your custom code. This is a simple part, and the one where you'll add your doctor ID and the ID of the element to tell the library that this is where we want the form to be shown. Copy and paste the following into the text area in the Squarespace site, replacing the data-doctor-id value of "test" with the ID assigned to you.

<div id="waveInquiryForm" data-doctor-id="test"></div>

click "Apply", and then "Save" in the top left to test out the form on your page.

Once you've saved your page, the form should appear. If it doesn't appear soon, try refreshing the whole page.

If it works, then save and ensure that it is appearing live on your site and works and looks as expected. Make sure to test it too, to ensure that the form submits and functions completely as you expect it to. Please reach out to us if you are running into problems, and we'd be happy to help out.

Ajax

What is Ajax and why is it useful?

Ajax is a method for loading dynamic content without reloading the whole page each time you change pages. This helps your website and each of your pages load more quickly. Here is more information about Ajax as it pertains to your Squarespace website.

So why can't we use it?

Because Ajax loads only the new content that is required each time the page changes, it doesn't load the WaveOrtho Inquiry Form library when a new page is loaded, but only the first time the website is loaded. When Ajax is disabled, the whole page will re-render and the library will be loaded only on the page where the inquiry form is intended to be and it will load the form each time the page is loaded.

How to Disable Ajax on Your Site

Take a look at this documentation page from Squarespace to learn how to disable Ajax on your template.

---

Additional Resources

Take a look at the following pages for more information, or return to the Getting Started Getting Started page.