Finance enquiry widget examples

(Last updated: 23/10/2015)

These examples have been customised to use the dealer ID provided to you by Classic & Sports Finance.
Dealer name: [not specified]
Dealer ID: [not specified]
These examples use an example dealer ID. You will need to substitute the dealer ID provided to you by Classic & Sports Finance.

View detailed documentation

Javascript integration

Each of the below integrations assume you are including the widget JavaScript somewhere in the page via one of these two methods:

Simple

This is the easiest method. It may also be better when the page already takes a long time to load.

Very long page times delay the enabling of the popup widget. Since the popup version of the form is better for retaining customers on the dealer site, it might sometimes be better to load the widget script a little sooner.

<script type="text/javascript" src="https://www.classicandsportsfinance.com/dealer-widget/widget.min.js"></script>

Asynchronous (recommended)

If your pages load very quickly and you’d like to keep things that way, this is the best way to proceed.

<script type="text/javascript"> 
(function(w, d, s) { 
  function go() { j = d.createElement(s); j.async =1; j.src = "https://www.classicandsportsfinance.com/dealer-widget/widget.min.js"; d.body.appendChild(j); } 
  if (w.addEventListener) { w.addEventListener("load", go, false); } 
  else if (w.attachEvent) { w.attachEvent("onload",go); } 
})(window, document, "script"); 
</script>

Simple HTML links

Perhaps styled up with CSS rules like this:

<style type="text/css">
/* finance button styles */
.csf-dealer-button {
 font-family: Helvetica, Arial, sans-serif; 
 text-decoration: none; 
 text-align: center; 
 display: inline-block; 
 padding: 1em; 
 background-color: #008CBA; 
 color: #FFF;
}

.csf-dealer-button:hover {
 text-decoration: none; 
}
</style>

A link with a properly-encoded query string parameters. Note HTML-safe use of & for & inside href attribute. Note: Make sure your code doesn’t line-wrap inside the href attribute.

<a class="csf-dealer-button" 
  href="https://www.classicandsportsfinance.com/finance-enquiry-form/?make-model=Porsche%20928&amp;price=%C2%A340%2C000&amp;dealer=5690">
FINANCE
</a>

A similar link, but using the JavaScript-based parameter passing method. This might be appropriate if your site is built using hand-coded techniques and you wish to avoid URL-encoding tools.

<a class="csf-dealer-button" 
  data-make-model="Porsche 928" data-price="£40,000" 
  href="https://www.classicandsportsfinance.com/finance-enquiry-form/?dealer=5690">
  FINANCE
</a>

The following example asssumes that you have fairly typical markup like this somewhere in your page:

<h1 class="vehicle_make_and_model">Porsche 928</h1>

<span class="vehicle_price">£40,000</span>

This example uses the data-extract- parameters. This technique would be useful if you wish to place the button in a static template part, or you do not have access to the make and model information at the point where the button is rendered.

Assuming your HTML markup remains consistent across all your vehicle stock pages, nothing in this button changes from vehicle to vehicle.

Note that this technique is only really viable if that there is only one vehicle per page.

<a class="csf-dealer-button" 
  data-extract-make-model="h1.vehicle_make_and_model" data-extract-price="span.vehicle_price" 
  href="https://www.classicandsportsfinance.com/finance-enquiry-form/?dealer=5690">
  FINANCE
</a>

PHP buttons

The PHP library provides methods to render a simple button and to include the script file.

The PHP examples below assume you have either pasted the code of the PHP library module into your template, or better still loaded it code like this (taking care to specify the correct path to the file):

<?php 
  require_once('/path/to/csfdealer.php'); 
?>

In order for the popup to work, the final page must include the JavaScript. The asynchronous script is loaded using this function:

<?php 
  echo CSFDealer::widgetScript(); 
?>

The function will only output the script the first time it is called; subsequent invocations return an empty string.

You can alternatively render the simple script tag.

<?php 
  CSFDealer::noScriptAsync();
  echo CSFDealer::widgetScript(); 
?>

Rendering buttons is very simple. By default the the PHP integration code renders a text link saying ‘FINANCE’, with a class of csf-dealer-button, so the CSS above might be suitable.

<?php 
  echo CSFDealer::button("Porsche 928", "£40,000", 5690); 
?>

If you wish to use a button image:

<?php 
  CSFDealer::chooseButtonImage('black_pp_grey_white_120');
  echo CSFDealer::button("Porsche 928", "£40,000", 5690); 
?>

To change the HTML of the button, you might use the following:

<?php 
  CSFDealer::setButtonClass('mybuttonclass');
  CSFDealer::buttonHTML('&ldquo;FINANCE&rdquo;');
  echo CSFDealer::button("Porsche 928", "£40,000", 5690); 
?>

If you only want to use the library to generate a correctly encoded URL, you can use code like this:

<?php 
  $finance_link = CSFDealer::enquiryFormURL("Porsche 928", "£40,000", 5690); 
?>

If you are rendering multiple buttons in the page, you can set the dealer ID with a single line of code, then omit the dealer ID parameter from other calls:

<?php 
  CSFDealer::setDealer(5690); 
?>

If you only want to use the library to generate a correctly encoded URL, you can use code like this:

<?php 
  $finance_link = CSFDealer::enquiryFormURL("Porsche 928", "£40,000", 5690); 
?>

Pure JS buttons

A simple image button.

<script type="CSF/Widget"
  data-make-model="Porsche 928" data-price="£40,000" 
  data-dealer="5690" data-image="black_pp_orange_grey_240"></script>

Magic JS buttons

Using the data-extract- parameters, this example will pull the vehicle content out of the page to prefill the form, using JavaScript. This example assumes the same data-extract parameters as the example above.

<script type="CSF/Widget" 
  data-extract-make-model="h1.vehicle_make_and_model" 
  data-extract-price="span.vehicle_price" 
  data-image="black_pp_orange_grey_240" 
  data-dealer="5690"></script>