Embedding registration onto your website

Http vs Https considerations for embedding

An embedded registration gives a very nice and professional look to your site, but there are a few issues that may need to be addressed. This is accomplished by adding an resizable iframe to your site and putting your Vantora registration into that frame. It is important to note that the Vantora code is all secured on https pages.

Internet users have been trained to have more trust for https pages and make sure they are secure before putting in credit card, or other sensitive data, on a web page. If you do not receive payments, this may not be a concern. If only taking PayPal, the PayPal code automatically breaks out of iframes and starts a new browser window when the customer is transferred to them to make a payment. But either way, depending on your customers’ browser and browser settings, and any anti-phishing, anti-virus software they might be using, your customer may get a message that some of the information is not secure, and might even see a warning.

Secure Web Page for embedding

securing your website

Securing your website

This is even worse if you are using Authorize.net to get credit card information. Instead of kicking out to a new page, it asks for the secure info on a secure frame on a nonsecure page – making browsers, and sometimes customers, not happy.

The ultimate solution to this is to secure your website. Most hosting companies can set your site to be secure in a matter of an hour or so. They just apply for a secure certificate and apply it. It might be free if included in your hosting, or the company might charge a fee of $50 a year or so. You will be fine with a shared secure certificate and don’t need to spend hundreds a year on your certificate.

After you have your secure certificate, you want to make sure the page you are sending people to do their reservations is https://www.yourpage.com/registration etc.

If using WordPress, after you install your security certificate, there is a free plugins you can download called Really Simple SSL that will turn your entire site into https pages without any other changes or coding on your part. Search engines will update very quickly, and any legacy links that are pointing to a page like http://www.yoursite/this_page will automatically switch to https://www.yoursite/this_page.

Ready to embed

When you are ready to test an embedded page, you need to copy and paste the following lines and make sure they are in between your end tags on the page where you are going to embed your registration.

<!– JavaScript for resizing iFrames –>

<script type=’text/javascript’
src=”https://code.jquery.com/jquery-3.3.1.min.js”
integrity=”sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=”
crossorigin=”anonymous”></script>

<script type=’text/javascript’
src=”https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.16/iframeResizer.js”
integrity=”sha384-EOBIY32SK8HiSV13WhWwedbApBXxWghFSI061UObhrGa9vD2AwdAGkJMYp+P8GJq”
crossorigin=”anonymous”></script>

<script type=’text/javascript’
src=”https://www.vantora.com/e/jettydive/content/js/embedded.js”></script>

Note: in the bottom line above you see the line with “https://www.vantora.com/e/jettydive/content/js/embedded.js”

You will modify this to match your field code,  so the e/jettydive/  might become something like  paintball/gat/ etc.

If using WordPress

Without knowing any programming, it is still easy to accomplish the above with a WordPress page, thanks to a plugin that writes to the header for you without you having to edit PHP pages. They can also write the code to a particular page(s), instead of writing to all of the pages.  One example is a plugin called Header Footer Code Manager. Go to your plugins, choose add new, and search for “header footer code manager” in the search bar. Look for the icon as pictured to the right. Then, install the plug in.

After it is installed, go to the settings, click on Header Footer and in the top left box for header, paste in the code from above. When done, it should look like the following (except for your Vantora id instead of Gatsplat).

Next, on the page where you want to have your booking, insert the following code – again changing the e/jettydive/ to whatever your vantora code is.

<iframe id=”frame-Name” style=”border: none; width: 100%;” src=”https://www.vantora.com/e/jettydive/registration/embedded.asp” width=”300″ height=”150″ scrolling=”no”></iframe>
<script>iFrameResize({heightCalculationMethod: ‘taggedElement’, checkOrigin: false}, ‘#frame-Name‘)</script>

Using Variables

If you have been using variables on our links to specify referral source, quantity of players, packages, etc, you still can! If you read over the page on Variables, the rules are basically all the same. Review This Page.

The only real difference is you will add the variables to the URL of the link to the page where your registration is embedded. Let’s look at an example:

Assume that the page where you have your registration is https://www.mysite.com/bookings/. If you want to run a link to a particular package, let’s assume pid=21 and quantity of 8 and you are running this from a google ad, and want the referred to be GA1 (google ad 1), your complete link would look like:

https://www.mysite.com/bookings/?pid=21&qty=8&ref=GA1

Or, if using a page that ends with .htm, or .asp, or .php, etc, your link would look like:

https://www.mysite.com/bookings.htm?pid=21&qty=8&ref=GA1