Integrating the Quotation page with your site

Size: px

Start display at page:

Download "Integrating the Quotation page with your site"

Tracey Benson
6 years ago
Views:

Integrating the with your site Introduction Until June 2014, for customers to obtain a quote for your service, it was necessary to redirect the customer to the Instant-Quote.co site.

1 Integrating the with your site Introduction Until June 2014, for customers to obtain a quote for your service, it was necessary to redirect the customer to the Instant-Quote.co site. This is no longer a requirement. Using cross-site JavaScript, customers with their own domain can now embed the quotation functionality within their own web pages giving the end customer a seamless experience when obtaining a quote. The items displayed on the form can be configured from the administrative interface. Security The system uses the security built into the IETF standards to identify your web site and return the appropriate data. Key features The web page displays available assets. Selecting a date from the calendar updates the asset list based on availability. Customised field titles and required fields are set form the quotation page interface (Under Configuration ). The map is centred on your organisation. Your duration configuration from your host configuration is displayed. The map is centred on the location of each asset as it is selected. Assets are filtered based on the geographic location of the pickup. The journey requested is checked and displayed on the map. (Google API key required.) Address entry uses Google Maps - Places autocomplete. Quotes are delivered by . Images can be viewed as a navigable gallery. Tooltips display further information regarding an item such a passenger capacity. The layout and style can be customised by your web designer. A datasheet for each item can be displayed. Note: The image size changes depending on the number of items returned. Small images are returned when over 6 items are available and medium images when 6 or fewer items are returned. Note: Only items with the same post / zip code can be quoted in a single quote. This is as a result of limitations imposed by the Google Maps API. Default implementation The quotation page can be embedded into any standard HTML page. All of the required code is contained in a single element (id="iqcontent" ) although even that can be customised should you wish however, although you may wish to reorganise the elements, they are all required. The entirety of the layout (where possible) is contained in the linked CSS file quotepage.css which can be omitted if you wish to customise colours and sizes.

2 To create the page The first step is to create a new page in the style of your site. Typically this would have a standard header and background and possibly footer. The second step is to add the following code to the head section, that s anywhere between <head> and </head> <title>instant-quote Quotation</title>  <meta name="description" content="instant Quote provides a real-time quotation and booking service for wedding transport companies."> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href=" type="text/css" media="screen" /> <link href=" rel="stylesheet" /> <link href=" rel="stylesheet" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" /> src=" src=" <script src="   src="    src=" <script src=" Note: Check there is not already a reference to common scripts such as jquery. We support jquery 1 & 2. Links to Google maps for five countries are provided. Use the link terminating with your region code for example GB for United Kingdom US for the USA, CA for Canada etc. Comment out or delete the others. The map can display a customer s chosen route but for that you will require a Google Maps API key. This can be obtained for free from Google. (Search for: get google maps api key.) The next step is to add the following code to the body section, that s anywhere between <body> and </body>. Where you place it will, of course, determine where it will appear on the page, so after your standard page header and before the standard footer if you have one would seem the most likely place.

3    <div id="iqcontent"> <div id="iqcalendar"> <form id="iqform" action="javascript:calcroute(event);" class=" iqform"> <div id="iqhelpline">help line: <hr style="clear:both;"/> <div lang="en-gb"> <h4>1 Select the event date</h4> Date: <input id="eventdate" type="text" class="datepicker" style="width:120px;" /> <p></p> <div style="float:left;"> <div id="lbltime"> Start <select id="cmbpickup" style=" padding: 4px; border-radius: 6px;"> <option value="00:00">00:00</option> <option value="00:30">00:30</option> <option value="01:00">01:00</option> <option value="01:30">01:30</option> <option value="02:00">02:00</option> <option value="02:30">02:30</option> <option value="03:00">03:00</option> <option value="03:30">03:30</option> <option value="04:00">04:00</option> <option value="04:30">04:30</option> <option value="05:00">05:00</option> <option value="05:30">05:30</option> <option value="06:00">06:00</option> <option value="06:30">06:30</option> <option value="07:00">07:00</option> <option value="07:30">07:30</option> <option value="08:00">08:00</option> <option value="08:30">08:30</option> <option value="09:00">09:00</option> <option value="09:30">09:30</option> <option value="10:00">10:00</option> <option value="10:30">10:30</option> <option selected value="11:00">11:00</option> <option value="11:30">11:30</option> <option value="12:00">12:00</option> <option value="12:30">12:30</option> <option value="13:00">13:00</option> <option value="13:30">13:30</option> <option value="14:00">14:00</option> <option value="14:30">14:30</option> <option value="15:00">15:00</option> <option value="15:30">15:30</option> <option value="16:00">16:00</option> <option value="16:30">16:30</option> <option value="17:00">17:00</option> <option value="17:30">17:30</option> <option value="18:00">18:00</option> <option value="18:30">18:30</option> <option value="19:00">19:00</option> <option value="19:30">19:30</option> <option value="20:00">20:00</option> <option value="20:30">20:30</option> <option value="21:00">21:00</option>

4 <option value="21:30">21:30</option> <option value="22:00">22:00</option> <option value="22:30">22:30</option> <option value="23:00">23:00</option> <option value="23:30">23:30</option> </select> <div style="float:left;"> <div id="lblduration"> Duration <select name="lstduration" id="lstduration" style="padding: 4px; border-radius: 6px;marginleft:4px;"></select> <div id="loader" style="display: none; max-width:225px;"> <p> <img src=" alt="loading wedding cars"> </p> <div lang="en-gb"><h4>2 Enter your details</h4> The address to send the quote: <input id=" address" type=" " title="we need your address to send the quote." class="iqlongtextbox" name=" " placeholder=" Address" required> <div id="span_same_as_ceremony" style="display:none;max-width:250px;"> <label id="noaddress3" for="chk_same_as_ceremony"></label> <input id="chk_same_as_ceremony" name="chk_same_as_ceremony" type="checkbox" onchange="javascript:hidereception(this);"> <div id="divfirstnamecont" style="display:none"> <div id="divfirstname"> <input id="first_name" type="text" autocomplete="on" title="please enter your First Name." name="firstname" maxlength="15" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" placeholder="first name"> <div id="divfamilynamecont" style="display:none"> <div id="divfamilyname"> <input id="family_name" type="text" autocomplete="on" title="please enter your Family Name." name="lastname" maxlength="20" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" placeholder="family Name"> <div id="divorgnamecont" style="display:none"> <div id="divorgname"> <input id="org_name" type="text" autocomplete="on" title="please enter your Company Name." name="company" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" placeholder="organisation Name"> <div id="pickuplocation" style="display:none"> <div id="addr_title_1">

5 <input id="address" type="text" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" title="this location is required." placeholder="enter a location" autocomplete="off"> <div id="ceremonylocation" style="display:none"> <div id="addr_title_2"> <input id="ceremony" type="text" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" title="this location is required." placeholder="enter a location" autocomplete="off" required> <div id="receptionlocation" style="display:none"> <div id="addr_title_3"> <input id="reception" type="text" title="if there is no third address, enter the address of the previous field." style="background-color: #FFFFCC; min-width: 80px; width: 80%;" placeholder="enter a location" autocomplete="off"> <div id="rtripdiv" style="display:none"> <div id="lblroundtrips"> <select name="lstroundtrips" id="lstroundtrips"><option value="0">0</option></select> <div id="packagespan"> <div id="diveventloc" style="display:none"> <div id="lbleventlocation">event Location: <div id="divlocationselect"> <div id="diveventtype" style="display:none"> for."></select> <div id="lbleventtype">event Type: <div id="diveventtypeselect"> <select id="eventtype" title="please select the type of event we are quoting <div id="divmarketing" style="display:none"> <div id="lblmarketing">where did you hear about us: <div id="divmarketingselect"> <select id="leadtype" title="please tell us where you heard about us."></select> <div id="divnotes" style="display:none"> <div id="lblnotes">notes: <textarea id="txtnotes" cols="28" rows="5" maxlength="120"> </textarea> <div id="divforwardlead" style="display:none"> <div id="lblforwardlead" style="max-width:250px;"> <input id="rbforwardyes" type="radio" name="forwardlead" value="1" title="if we cannot provide the service, we may be able to find the service you are looking for from one of our partners. Is it okay for us to do this?">yes <input id="rbforwardno" type="radio" name="forwardlead" value="0">no <div id="divcustom1" style="display:none"> <div id="lblcustom1">custom 1 <input id="custom1" type="text" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" autocomplete="off">

6 <div id="divcustom2" style="display:none"> <div id="lblcustom2">custom 2 <input id="custom2" type="text" style="background-color: #FFFFCC; min-width: 80px; width: 80%;" autocomplete="off"> <div id="divcustom3" style="display:none"> <div id="lblcustom3">custom 3 <input id="custom3" type="checkbox"> <div class="iqquotebuttondiv"> <div lang="en-gb"><h4>3 Make your choice</h4> <div lang="en-gb">choose the items we should quote for. <hr /> Your phone number: <input type="tel" autocomplete="on" name="phone" id="telephone" class="iqmediumtextbox"> <div class="iqalwaysvisible"> <input id="btnquote" type="submit" value="get Your Quote" class="iqquotebutton"> <hr style="clear:both" /> <div id="processing" style="display: none;"> <img src=" alt="loading Wedding cars."> Processing.... <div id="processinfo"> <div id="progress" style="color: red;"> <div id="progressinfo" class="iqprogress"> </form>  <div id="divfilter" class="iqdivfilter" style="display:none;z-index:10;"> /> <div id="iqtransport">  <img src=" alt="loading Wedding cars." /><br Loading Wedding Cars.... <a href=" by Instant-Quote.co</a>   <div id="map-canvas">  <div id="map_error"> <div style="display:none;"> <script src="  <script src="

7 <script src=" <script src=" /> <script src=" <br style="clear:both;" />  <div id="preselect" style="margin-top: 1280px; width: 300px;"> <div id="dialog" title="pickup Details" style="font-size: 85%;text-align:center;"> <div id ="addr4_div" style="text-align: center; display: none;"> <input id="datepicker-static" type="text" readonly="readonly" style="display:none;"> <div id="addr_title_4">address 1 <input id="pickup_clone" type="text" style="width: 228px;"> <select id="asset-type" style="display:none;"> <option value="-1" selected="selected">all</option> </select>   <div id="terms" style="width: 300px;display:none;"> <div id="termsdialog" title="terms & Conditions" style="font-size: 85%;">   <div id="aboutasset" style="margin-top:180px;display:none;"> <div id="assetinfo" title="fact Sheet" style="font-size: 85%;text-align:center;">  <img src=" alt="loading images." />  <div id="iqspinerdiv" class="iqloading"> <img id="bigspinner" src=" alt="loading images." />   Text such as The address or post code from where we will pick you up will be replaced in accordance with your QUOTATION PAGE configuration see Save and upload the file and give it a test. That should be it! Any problems, we are always willing to help.

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets