Standard Widget Scripts
To add an availability search box and priced results with links to online booking or enquiry to your website we provide two widgets: a search box widget and a results widget. You can put the search box widget on as many pages as you like. The results widget is usually put on a single results page.
We recommend before putting the widgets live that you implement these on a test page for review as we may need to adjust some styles to make them fit well in your website. We are happy to review the widgets on a test page to ensure the correct styles are applied prior to go live.
Creating the ‘Search Results’ page
Step 1 – create a separate search results page
Create a separate search results page on your website. This is typically something like http://www.yourwebsitehere.co.uk/search-results.
Step 2 – add the header script
The following script reference must be added at the head (just before the head close tag):
<script src="https://bookings.gemapark.co.uk/javascript/gemapark_5_0_s.js?cid=xxx "></script>
You will need to set:
cid = Company ID
NOTE: do not lazyload this script.
Step 3 – add the search box
This is the code for the search box widget.
The parameter link in red in the code below will need to be replaced with your website URL and the (new) search results page URL. This is the page you will create to hold the search results.
<div class="gemawidgetcontainer">
<iframe class="gemaSearch skip-lazy" border="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="No" src="https://bookings.gemapark.co.uk/Park/searchbox.aspx?cid=xxx&pid=xxxx&o=h&curid=1&cul=en-GB&lnk=https%3a%2f%2fwww.yourwebsitehere.co.uk%2fsearch-results" style="width:100%;border:none" width="100%"></iframe>
</div>
You will need to set:
cid = Company ID
pid = Park ID (leave this parameter off if multi-park)
You must remember to amend the code (in red) with the URL of your search results page (URL encoded)
NOTE: Multi-park, if you are using a multi-park widget, leave the pid= parameter, in blue above, off the search as the park will set by a dropdown in the search widget.
Step 4 – add the results widget
Add the following widget code where you want the results content to appear.
The parameter link in red in the code below will need to be replaced with your website URL and the search results page URL that you have just created to hold the search results.
Search Results Script
<iframe id="ifrResults" class="gemaResults" height="1300px" width="100%" style="width:100%;border:none" border="0" marginwidth="0" marginheight="0" frameborder="0" source="https://bookings.gemapark.co.uk/park/searchresults.aspx?cid=xxx&curid=1&cul=en-GB&ifr=ifrResults&url=https%3a%2f%2fwww.yourwebsitehere.co.uk%2fsearch-results.html"></iframe>
You will need to set:
cid = Company ID
You must remember to amend the code (in red) with the details of your search results page.
This URL needs to be URL encoded as in the above example!
Adding the ‘Search widget’ to a page
Step 1 – add the header script
The following script reference must be added at the head (just before the head close tag):
<script src="https://bookings.gemapark.co.uk/javascript/gemapark_5_0_s.js?cid= xxx "></script>
You will need to set:
cid = Company ID
NOTE: Do not lazyload this script.
Step 2 – add the search box
This is the code for the search box widget.
The parameter link in red in the code below will need to be replaced with your website URL and the (new) search results page URL. This is the page you will create to hold the search results.
<div class="gemawidgetcontainer">
<iframe class="gemaSearch" border="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="No" src="https://bookings.gemapark.co.uk/Park/searchbox.aspx? cid=xxx&pid=xxxx&o=h&curid=1&cul=en-GB&lnk=https%3a%2f%2fwww.yourwebsitehere.co.uk%2fsearch-results" style="width:100%;border:none" width="100%"></iframe>
</div>
You will need to set:
cid = Company ID
pid = Park ID (leave this parameter off if multi-park)
You must remember to amend the code (in red) with the URL of your search results page (URL encoded), otherwise the results will not be returned.
NOTE: Multi-park, if you are using a multi-park widget, leave the pid= parameter, in blue above, off the search as the park will set by a dropdown in the search widget.
Test the widgets
Once you have completed the above you will now have a page with a search widget on and a search results page set up. You should test that the widgets work as expected and link to your correct search results page.
You may need us to change the height of the div or alter some of the widget styles like fonts and buttons etc. If you send us the link to your test page we can work with you to ensure they respond to the screen size nicely and are ready to go live when added to the website.
