Installing Customer Quote - Digital Retail Services

Learn how to configure Customer Quote to create a customized user experience.

Step 2: Building the Customer Quote URL for Each Vehicle

Customer Quote is a web page that is loaded with a URL. Because dynamic vehicle information must be included in the Customer Quote URL, it must be built specifically for your dealership using certain query-string parameters. The host portion of the URL is https://www.routeone.net, and the path portion of the URL should be /XRD/loadQuoteApp.do. 

The URL requires certain data as query-string parameters (after the “?” symbol). Unless specified, these parameters are required:

RouteOne Dealer ID

If you do not know your Dealer ID, log into RouteOne with your username and password. The Dealer ID is the five digit code next to your dealership’s name in the top left corner of the RouteOne system.

Vehicle Information

• Vehicle Make
• Vehicle Model
• Vehicle Price
• Vehicle Sales Class (usually: ‘new’ or ‘used’)
• Vehicle Style (also known as ‘Trim’)
• Vehicle Year
• VIN (optional)

Example Customer Quote Vehicle URL: 

www.routeone.net/XRD/loadQuoteApp.do?dealerId=YO4WL&vehicleYear=2013&vehicleMake=Ford&vehicleModel=Focus&vehicleStyle=4d+Sedan+S&vehicleSalesClass=Used&vehiclePrice=10000

Query-string data must be encoded. For example: space “ ” becomes “+” or “%20”

Option #1: Browser-side

Create the browser-side URL for Customer Quote by using the JavaScript function below: 

function buildUrlForCustomerQuote(params, host) {

  host = (host || "https://www.routeone.net").replace(/\/*$/, "");

  var path = "/XRD/loadQuoteApp.do";

   var querystring = Object.keys(params).map(function(key) {

        return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);

    }).join("&");

    return host + path + "?" + querystring;

}

When passed the correct data, the JavaScript function will return a properly constructed URL. If you decide to use this function, you must place it into the correct JS script on your site, call it with the correct data, and then place the resulting URL-string in the correct spot (like the iframe src attribute).

To build your URL string, call the function with a JavaScript object literal containing your Dealer ID and vehicle information, like so:

var url = buildUrlForCustomerQuote({

    dealerId : "ABC99",

    vehicleYear : "2013",

    vehicleMake : "Ford",

    vehicleModel : "Focus",

    vehicleStyle : "4d Sedan S",

    vehicleSalesClass : "Used",

    vehiclePrice : 10000,

    vin: "123-456-789-ABCD"    //vin is optional

});

Important: Because this URL will be different for every set of vehicle information, it should be built dynamically at run-time. Other than Dealer ID, none of the strings in the example should be hard-coded.

The function takes in two arguments. The first is the set of data that will be placed into the URL’s query-string parameters. The second is for the case when you want to override the link to use in a test environment. Dealers using this tool in the real world should omit the second argument when calling the function, just like the example above.

For numerical entries like vehicleYear and vehiclePrice, it does not matter if you use a string or an integer data type, since they all become a URL query-string eventually.

• The JS function above will handle URL encoding for you so your parameter-object can have strings that contains spaces, such as "4d Sedan S".

Option 2: Server-side

• The second option is to generate the URL and place it on your iframe on the “server-side” using Java, C#, Ruby, Python, etc.

Step 3: Embedding Customer Quote on your website

To embed Customer Quote into your website, you need to put an iframe element on it. The iframe requires a URL with query-string parameters as discussed above. 

There are multiple ways to use Customer Quote with your website. Embedding option 1, dynamic resizing, is recommended because it will provide the best user experience.

It is up to you and your web host developers to decide how exactly to implement the solution you select. Your implementation depends on the way your website already functions. 

• For example, some websites will do better with an implementation that makes use of server-side page rendering, while other sites will do better with an implementation that relies on browser-side JavaScript.

There are three options to embed your Customer Quote on your website
 

Option 1: Embed Customer Quote with dynamic resizing and no scroll bar on iframe

Advantage: User will use the normal scroll bar on your site. This will provide the best user experience.

Disadvantage: Slightly more complicated to implement.

Customer Quote, like many dynamic web pages, will change its height depending on the content that it needs to render. This option allows the actual iframe height (on your website) to dynamically change depending on the content. This means that when the iframe’s content grows, the user can scroll down as if the content is part of your normal website. This creates a smoother user experience.

• For example, the first step of Customer Quote only has a small amount of content to show the user. The second step has more content. Normally, when an iframe’s content increases, the iframe will still stay the same size and the user will have to scroll down within the iframe to view the content below. This adds a second scroll bar to your app, which can be less user friendly.

This embedding solution requires:

• An iframe whose ‘src’ attribute is the URL discussed above, but with the scrolling turned off, using an attribute: scrolling="no" .
  • The border styling of the iframe is up to you.
• A JavaScript library loaded onto the page called “iframeResizer,” which will coordinate the dynamic height resizing.
  • A dealer can load this script from where RouteOne hosts it, like the example shows, or they can host it themselves if they really want to. It can be found online here.
• A JavaScript script, (located below wherever the iframeResizer library is loaded) that will tell the library to begin dynamically resizing the customer quote iframe. See example below:

The styling of the boarder can be changed to match the desires of your dealership.

<script src="https://www.routeone.net/XRD/common/js/xrd/iframeResizer.min.js"></script>

<iframe id="&lt;em">"customerQuoteIframe1" style='width:2000px;' src="…" scrolling="no"&gt;</iframe>

<script>iframeResize({ log:<strong>false </strong>}, "#customerQuoteIframe1")</script>

Option 2: Embed Customer Quote with fixed size and scroll bar on iframe

Advantage: Simplest solution to implement.

Disadvantage: User has to scroll down using iframe’s scroll bar.

Build the URL and place an iframe on your page with height and width. The height should be a static amount, such as 550px, as shown in the example below:

<iframe src="" style="height:550px;width:100%;" frameborder="0"></iframe>

The ‘src’ attribute of the iframe should have the URL that you built in the previous step.

The border styling of the iframe is up to you.

The height is hard-coded in the style element of the iframe. If you use this solution, do not put an attribute “scrolling=’no’” in your iframe. You should also not add “overflow:hidden;” to the iframe’s styling.

Important: We warn about this because these changes would disable the scroll bar. The scroll bar is required and must not be disabled for this embedding option to work properly.

Option 3: Open Customer Quote in separate tab without embedding (no iframe)

Advantage: You do not have to worry about iframe resizing.

Disadvantage: The Customer Quote tool will load as a separate web page, without being embedded, meaning your customer will not be able to see the vehicle beside the CQ tool, etc.

To implement this solution, you have different options. You can open the URL for Customer Quote in a new tab, using a the target="_blank" attribute on an anchor (“a”) tag, or you can use JavaScript’s “window.open(url)” or any other solution that will open the Customer Quote url in a new tab.