Installing the Online Credit Application (OCA)

Overview

 In this Digital Retail installation guide you will receive instruction on:

• How to copy and embed your Online Credit Application (OCA) URL(s) into your dealership website.
• How to embed language-specific URLs to support Spanish and/or French on your website. 
  (Standard and Premium subscription levels only)

Basic subscribers have a single online credit application URL, known as the primary URL.

• In addition to this primary URL, Standard and Premium subscribers have the option to add additional URLs to support their lead management. These URLs can be embedded in different places on your website or shared in social media and may be visible to all dealership users. When credit applications are submitted from different Digital Retail URLs, they are labelled in CAS with a lead identifier that you have created, allowing you to know which URL was used.

For further instruction on how to add additional URLs and create lead identifiers, refer to the ‘Customizing the Online Credit Application’ guide    

Copying Your OCA URL(s)

The instructions in this section show you how to copy your online credit application URL(s). When an application is loaded and displayed to your customers using this URL, it will use the default language from your settings.

At the Basic-subscription level, only English is provided.

Log in to RouteOne.net with your dealer account: https://www.routeone.net

Dealer Users

Non-DSA Users in dealerships subscribed to digital retail can access links and QR codes from the link icon at the top right of the screen.

Clicking the icon will bring you to the Online Credit Application Links and QR codes page, where the URLs, QR codes, and printed instructions for each lead source can be viewed and copied.

For more information on customizing lead identifiers, click here.

Dealer System Administrator (DSA) Users

Click ‘Admin’ from the top navigation and select ‘Premium Services.’ If you do not see this option, it may mean that you do not have adequate permissions. You will need to contact your Dealer System Administrator (DSA) for assistance.

In Premium Services, scroll down to Digital Retail and click to expand this section:

Scroll down to the Online Credit Application Configuration area.

A URL will be displayed for your online credit application.

You can copy your online credit application URL by using the ‘Copy Product Link’ button or by highlighting and copying the text link to share or embed it.

To learn how to place the URL on your dealership website, see the next section of this guide, ‘Embedding Your Online Credit Application URL(s).’ 

Standard and Premium subscribers have the ability to add additional active URLs to their Digital Retail product.

This setting is accessed by clicking ‘Edit Configuration’ in the Online Credit Application Configuration, going to the ‘Global Settings’ tab, and clicking the ‘Lead Management’ tab.

Use your cursor to highlight additional URLs. To copy, you can right-click or use the  buttons.

To learn more about how to create additional URLs,  visit the ‘Credit Application Lead Tracking’ section.

You can also click ‘Show Active Website Details’ in the top-right corner of the page to see all the primary product URLs that you are subscribed to, which may include French and Spanish-language URLs.

It will not include any URLs added in Lead Management.

 

 

Embedding Your OCA URL(s)

When embedding Digital Retail’s online credit application, an ‘iframe’ with the correct link will be placed into your site. When customers visit your website, they will see the Digital Retail form in the location that you placed this iframe.

If you are not a web developer and are unfamiliar with HTML, it is advised that you find someone who can assist you with this task.

Example of an embedded online credit application. Remember this is just an example; other sites may vary depending on the dealer site style.

Important Note About Quotation Marks: In this document’s examples of code, straight quotation marks are used

• Correct start and end quote: ""

Ensure that you are using this type of quote and not the curved quotation mark that Microsoft Word uses

• Incorrect start and end quote: “”

You must use the straight quotation marks in attributes on your HTML elements, such as the src attribute on an iframe or the href attribute on your anchor tag.

Steps to embed your OCA

Copy the following text into your website:

<iframe frameborder="0" src="URL-GOES-HERE" style="height:1200px; width:100%;"></iframe>

Height and width should be styled in a way that is appropriate to your site. The above HTML may be modified accordingly by adjusting these parameters.

Replace all of "URL-GOES-HERE" with your Digital Services Online Credit Application URL. The URL(s) was either shared with you by your dealership’s Digital Retail administrator or it was copied. If you have not copied the URL(s), you may go to the first section of this guide, 'Copying Your Online Credit Application URL(s),' for instructions.

Example: If your product URL is: https://www.routeone.net/digital-retail-ui/?dealerId=ABCDE&locale=en_US

The URL-GOES-HERE will be replaced with that url/link. The result looks like this:

<iframe frameborder="0" src="https://www.routeone.net/digital-retail-ui/?dealerId=ABCDE&locale=en_US" style="height:1200px; width:100%;" </iframe>

Remember, you will be using your own URL from your account, with your own dealer ID.

Important Note About Scroll Bar: It is strongly advised that you do not add the attribute "scrolling='no'" to your iframe. Digital Retail requires the scroll bar option, and is not meant to be embedded without one. Some developers want to remove the scrolling attribute because they like the look of having no scroll bar.

For the same reason, it is strongly advised that you do not add "overflow:hidden" to the iframe’s style attribute.

The online credit application is designed to be responsive for mobile-friendly websites. If your website is configured to be responsive, you will want to ensure that the container div that surrounds the iframe has responsive attributes such as percentage widths or media queries with defined width break-points.

It is recommended that you test to see if your changes are successful before moving your changes into production. In other words, if you are using a website tool that allows for you to preview your changes before saving/publishing, do so now. If the results are incorrect, please review/double-check that you have followed the instructions correctly.

We also recommend testing after publishing to verify that your recent changes are not only working in your test area but also in your production area.

Embedding Your Iframe With Dynamic Resizing

If you are embedding the OCA within your own website, you can implement this in a way that will have the iframe resize dynamically as its content changes size. We recommend this solution for the best user experience because it causes the entire OCA page to be visible on your site. This means the user does not need to interact with a second scroll bar created by the iframe.

Here is how you implement the solution:

Have an id on the Digital Retail iframe that is not null:   

<iframe ...="" frameborder="none" id="digitalRetail" scrolling="auto" width="100%"></iframe>

Embed the iframe resizer library on their site:

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

 Somewhere in the HTML, below the script tag in step #2, place another script that initiates the iframe resizing library on the iframe using its new id from step #1.

<script>iFrameResize({ log:false }, "#digitalRetail")</script>

iOS Scrolling and Installing Digital Retail Integration Script

When using the iframe, Digital Retail’s OCA resides within the parent frame, which is typically your dealership website. 

When the user clicks the ‘Next’ or ‘Go Back’ buttons located at the bottom of the OCA, the user should see the top of the next page of the OCA. Since the Online Credit Application is in an iframe, this means that the parent frame must scroll up so that the top of the OCA is shown to the user after they go to the next step.

Modern browsers will not allow JavaScript from an iframe to directly interact with the parent frame when each frame is hosted on a different domain. In the past, this could be accommodated by using the "focus" functionality, which would automatically scroll the viewport to an element at the top of the OCA. However, this solution is no longer supported by iOS 10 or above.

RouteOne does not control external operating systems or browsers, and the scenario below may be invalidated by future iOS or browser updates.

iOS 10+ changed its implementation of the "focus" functionality, which prevents it from properly scrolling up, potentially confusing the user and requiring the user to manually scroll to the top. Digital Retail provides a redirect link to the OCA upon detection of a device using iOS 10 or above, opening the OCA in a new window/tab, bypassing the issue of the parent frame not scrolling.

This section describes an alternative "postMessage" functionality solution that your dealership may choose to implement to avoid a redirect. "PostMessage" lets two frames communicate even when they are hosted on different domains. This allows the OCA iframe to tell the parent frame to scroll up to the top of the OCA whenever it needs to do that.

• This can be implemented using a script that your dealership can retrieve and place within your webpage alongside the OCA.

• This script listens for and responds to messages sent by the OCA iframe. It will listen for a message to tell the parent frame to scroll to the top of the OCA's iframe.

• RouteOne will host the most up-to-date version of the script. When the script is loaded and initialized, the OCA will show normally instead of showing the redirect link.

To install the “PostMessage” 

Load integration script:

• In order to enable automatic page scrolling on iOS 10+, removing the need for a redirect link, the Digital Retail integration script must be imported by loading a script into the same webpage that contains the OCA iframe.
• This will initialize your dealership’s webpage to listen specifically for the scroll command from Digital Retail OCA’s iframe when the customer clicks the ‘Next’ or ‘Go Back’ buttons. This line of code must be executed only after the script from Step 1 above has been loaded.

Add class to iframe:

• In order for the automatic page scrolling to work, a class with the name "xrd-iframe" must be inserted into the iframe tag used to contain the OCA within the dealer’s web page. 

Configure host domains (optional):

• This step is for dealers who want to ensure that the postMessages are only sent to their website’s frame and no other frames. Using the Digital Retail Configuration Wizard in RouteOne’s CAS application, you may enter the full host names of all sites you are embedding the OCA within.
    

  

Additional Language Options for Your Embedded OCA

Standard and Premium subscription levels only

When you subscribe to Digital Retail, your language default is set to English. If you have subscribed to Standard or Premium, you have the option to change your default language to French or Spanish.

This setting can be reviewed or modified by going to ‘Premium Services,’ selecting ‘Digital Retail,’ and clicking the ‘Edit Configuration’ button for the online credit application. The language options are located on the top ‘Global Settings’ tab, in the ‘Language Support’ tab.

For every language that is enabled with a checkmark in your ‘Language Support’ settings, Digital Retail supplies a URL that will force the credit app to begin with that language when it loads.

To find these language-specific URLs, navigate to your Online Credit Application Configuration and click on the button near the top of the window that says ‘Show Active Website Details’ to expand the section.

Here, you will find URLs you can use to force your Digital Retail credit application to begin with specific parameters, such as language.

You may use more than one URL. These URLs can be associated with your dealer website’s language selectors to display the online credit application in those languages.

Only the language links for the primary online credit application will display in the Active Website Details drop down. If you want to dynamically choose the language for the URL, you can place a “locale” query-string parameter in your URL as shown in the language-specific URLs. Your country must be either the United States or Canada, and it must match the country of your RouteOne account of your Digital Retail subscription. Your language must be one of the supported languages. Digital Retail supports English (en), Spanish (es), and French (fr) for Digital Retail online credit applications.

For the United States, the options you have are:

• locale=en_US
• locale=es_US
• locale=fr_US

In Canada, it is the same, but US should be replaced by CA. You can dynamically choose the language for your primary URL or any additional URLs that you guild.

If you have a Google Translate plugin on your site, it will not translate the credit application. This is because it will not apply translations to the iframe containing the Digital Retail credit application. iframes keep things separate to keep them secure. Use the URLs mentioned above to give language options to your users.

Using the Analytics Option

Standard and Premium subscription levels only: 

• If you have subscribed to Digital Retail Standard or Premium, you have the option to gather Google Analytics data about your dealership Online Credit Application usage. 

• These instructions assume that you have already completed the iframe embedding for Digital Retail.  

To be performed by an Administrator of the Dealer Website which is embedding the RouteOne Online Credit Application.

1. If the page does not already include the digitalRetailIntegration script, include the below within the <head></head> tags of the parent page. 

<script type='text/javascript' src='https://www.routeone.net/XRD/digitalRetailIntegration.do'></script>

2. If the page does not already utilize the iOS10Scrolling script, immediately after the script from step 1 and within the <head></head> tags of the parent page, initialize the DigitalRetail script by adding the following <script>. Otherwise, just add 'dealerGoogleAnalytics' to the function arguments.

<script>DigitalRetail.init('iOS10Scrolling', 'dealerGoogleAnalytics');</script>

To avoid double-loading the iframe, do not explicitly declare the source (src) attribute for the iframe that embeds Digital Retail. 

Add an id attribute value to that iframe. If an id already exists, make note of it for use below.  You will need to add the JavaScript function below after the iframe declaration. 

Use the below snippet. On line 2 of this snippet, replace “iframeId” with your iframe id value including the surrounding single quotes. On the same line, replace “digitalRetailUrl” with your Digital Retail URL (e.g. https://www.routeone.net/digital-retail-ui/?dealerId=YK8XY) including the surrounding single quotes (this was the iframe src value if you've previously declared it explicitly).

<script type="text/javascript"> 

    window.onload = routeoneDigitalRetailInit('iframeId', 'digitalRetailUrl'); 

  

    function routeoneDigitalRetailInit(iframeId, url) { 

        if(document.getElementById(iframeId)) { 

            document.getElementById(iframeId).src = url + (document.referrer ? "&pageReferrer=" + encodeURI(document.referrer) : ""); 

        } else { 

       throw "Could not find iframe with id: " + iframeId 

+ ". Please set the id to an iframe used for digital retail."; 

        } 

    } 

</script> 

Generating a Google Analytics (Universal Analytics) Tracking Code

These steps are subject to change based on updates to the Google user interface. 

Sign in to Google Analytics.  

On the bottom left, click ‘Admin.’

In the middle column, click ‘Create Property.’ 

Enter the property name and indicate the Time Zone you will report against for your website. Select 'Next' when available.

Enter optional information about your dealership, select 'Create' when ready to proceed.

Select 'Web' from the platform choices.

Identify the Website URL and assign a name for the Stream. Select 'Create Stream' when available.

Dismiss installation instructions if presented. The Measurement ID has now been created for your property.

A property is a website, mobile application, or blog, etc., that is associated with a unique measurement ID. A Google Analytics account can contain one or more properties. 

Accessing Existing Tracking Codes

You can view the tracking code under Admin → Property → Data Streams → Select Web Data Stream.

Select the Data Stream row of interest.

Enabling Analytics through RouteOne OCA Configurations

If the security domain(s) in the Digital Retail - Online Credit Application (OCA) Configuration page has not been specified yet, log in to RouteOne CAS and go to the Global Settings panel. Click on the Security tab and add the domain of the embedding website (Follow the example as shown).  As described within the screen instructions, if you are embedding the OCA in https://used.cars.com/inventory/page1, for example, then you would enter https://used.cars.com. Multiple domains may be entered with comma separators. Be sure to save your changes using the button at the bottom of the page.

Make sure that Analytics is enabled, and a G-prefixed measurement ID is saved to the Analytics page. See above for information about the measurement ID.

The Universal Analytics (UA-) prefix may also be specified, but will be eliminated by Google beginning in July 2023.

If the dealer already has gtag initialized in the parent that hosts the Digital Retail OCA iframe, please ensure that you have entered the same UA tracking code that it uses. 

Google Analytics Tracking Events & Flow

Depending on the configuration of the OCA, up to fifteen events may be made available. The Error page is not an event and can be triggered at any point in the flow.

Each page view in the workflow is tracked via an Event (asc_pageview) with a parameter.

event_owner = RouteOne Digital Retail.  The page_type parameter is used to describe the step in the user flow.

In order, the page_types with associated page are:

Lead Capture Landing Page (OCA Start Page)

Name of Event Tracked: leadCapture

Required User-Submitted Content:

• First & Last Name 

• E-mail 

• Phone 

• Privacy Notice Acknowledgement 

Personal Info page

Name of Event Tracked: personalInformation

Required User-Submitted Content: 

• First & Last Name 

• E-mail 

• Phone 

• Date of Birth 

Residential Info Page 

Name of Event Tracked: residentialInformation

Required User-Submitted Content: 

• Address 

• City 

• State 

• ZIP 

• Residence Type 

• Time at Address 

Income Info Page 

Name of Event Tracked: incomeAndEmployment

Required User-Submitted Content: 

• Employment Status

• Employee Name 

• Employee Phone 

• Time at Job 

• Income Interval 

• Gross Income 

• SSN 

Vehicle Info Page 

Name of Event Tracked: paymentEstimateR or paymentEstimateL

R indicates the App was started as Retail (the typical default) 

L indicates the App was started as Lease

Required User-Submitted Content: 

• N/A

Review Page 

Name of Event Tracked: reviewApplication/detail

Required User-Submitted Content: 

• N/A 

Consent and Disclosure Page

Name of Event Tracked: reviewApplication/consent

Required User-Submitted Content:

• User Acknowledgement

Dealer Privacy Notice Page

Name of Event Tracked: createDealJacket

Required User-Submitted Content:

• User Acknowledgement

Deal Jacket Created

Name of Event Tracked: reviewApplication/dealerPrivacyNotice

Required User-Submitted Content:

• N/A

Credit Application Form Page

Name of Event Tracked: creditApplicationForm

Required User-Submitted Content: 

• User Signature 

Identification Verification Page 

Name of Event Tracked: idv

Required User-Submitted Content: 

• Answers to IDV Questions 

Credit Score Disclosure Notice 

Name of Event Tracked: csdn

Required User-Submitted Content: 

• User Acknowledgement

Congratulations Page

Name of Event Tracked: noRetrieval

Required User-Submitted Content: 

• N/A 

Error Page 

Name of Event Tracked: error

Required User-Submitted Content: 

• N/A 

Linking to your Digital Retail Product

The URL for your digital retail website can be accessed by consumers directly like other standard URLs, without having to go through your dealer site. 

You can use these links like any other links and:

• Paste them into an email
• Paste them into a post on social media, blogs, comment-sections, etc.
• Bookmark them

<a href="https://www.routeone.net/digital-retail-ui/?dealerId=ABCDE">
Apply For Credit
</a>

To make your link open in a new tab, use: target="_blank"

<a href="https://www.routeone.net/digital-retail-ui/?dealerId=ABCDE" target="_blank">
Apply For Credit 
</a>

To the user of your website, this link will appear as ‘Apply For Credit.'

How to customize the Online Credit Application

FAQs