4
Quick Start Guide 1 rev. 10.10.16 Installing the Online Credit Application Embedding your Online Credit Application URL 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. These steps will walk you through to add an “iframe” code within your site so when customers visit your website, they will see the Digital Retail form in the location that you placed this iframe. Replace the URL-GOES-HERE text with your Digital Retail Services Online Credit Application URL within the framework of the iframe code below to generate your HTML code. <iframe src="URL-GOES-HERE" style="height:1200px;width:100%;" frameborder="0"></iframe> Recommendations: o 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. o 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. o 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. Paste your iFrame code into the HTML section of the desired webpage that you wish to add the microsite to. Test to verify the online credit application so that it is showing correctly before and after publishing in production on your website. If the results are incorrect, please check with your web developer. o Test to see if your changes are successful before moving your changes into production. In other words, if you are using a web site tool that allows for you to preview your changes before saving/publishing. o Test after publishing to verify that your recent changes are not only working in your test-area but also in your production area. Example of complete iframe code If your product URL is https://www.routeone.net/XRD/xrdStart.do?dealerId=ABCDE&locale=en_US The URL-GOES-HERE will be replaced with that url/link. The result looks like this: <iframe src="https://www.routeone.net/XRD/xrdStart.do?dealerId=ABCDE&locale=en_US" style="height:1200px;width:100%;" frameborder="0"></iframe> Reminder: You will be using your own URL from your account, with your own dealer ID. Example of an embedded online credit application Other sites may vary depending on the dealer site style.

Installing the Online Credit Application - RouteOne the Online Credit Application ... These steps will walk you through to add an iframe _ code within your site so when customers visit

Embed Size (px)

Citation preview

Page 1: Installing the Online Credit Application - RouteOne the Online Credit Application ... These steps will walk you through to add an iframe _ code within your site so when customers visit

Quick Start Guide

1 rev. 10.10.16

Installing the Online Credit Application

Embedding your Online Credit Application URL 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.

These steps will walk you through to add an “iframe” code within your site so when customers visit your website,

they will see the Digital Retail form in the location that you placed this iframe.

Replace the URL-GOES-HERE text with your Digital Retail Services Online Credit Application URL within the

framework of the iframe code below to generate your HTML code.

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

Recommendations:

o 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.

o 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.

o 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.

Paste your iFrame code into the HTML section of the desired webpage that you wish to add the microsite to.

Test to verify the online credit application so that it is showing correctly before and after publishing in production

on your website. If the results are incorrect, please check with your web developer.

o Test to see if your changes are successful before moving your changes into production. In other words, if

you are using a web site tool that allows for you to preview your changes before saving/publishing.

o Test after publishing to verify that your recent changes are not only working in your test-area but also in

your production area.

Example of complete iframe code

If your product URL is https://www.routeone.net/XRD/xrdStart.do?dealerId=ABCDE&locale=en_US

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

<iframe src="https://www.routeone.net/XRD/xrdStart.do?dealerId=ABCDE&locale=en_US"

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

Reminder: You will be using your own URL from your account, with your own dealer ID.

Example of an embedded online credit application

Other sites may vary depending on the dealer site style.

Page 2: Installing the Online Credit Application - RouteOne the Online Credit Application ... These steps will walk you through to add an iframe _ code within your site so when customers visit

Quick Start Guide

2 rev. 10.10.16

Installing the Online Credit Application

Locating Your Digital Retail Online Credit Application URL To locate your Digital Retail Online Credit Application URL, follow the instructions below:

A RouteOne Dealer System Administrator (DSA) must gather the URL within the RouteOne system by clicking on

the ‘Premium Services’ option within the ‘Admin’ tab.

Within the ‘Premium Services’ page, open the ‘Digital Retail’ section.

Within the ‘Online Credit Application Configuration’ section, 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.

Page 3: Installing the Online Credit Application - RouteOne the Online Credit Application ... These steps will walk you through to add an iframe _ code within your site so when customers visit

Quick Start Guide

3 rev. 10.10.16

Installing the Online Credit Application

You can also access this URL in your configuration settings by clicking ‘Edit Configuration’, and navigating to the top-right corner of the section to click the ‘Show Active Web Site Details’ button to access to all the product URLs that you are subscribed to.

Using the Microsite Option If you have subscribed to Digital Retail Standard or Premium, you have the option to use a microsite format to provide

your online credit application to customers instead of embedding it. The microsite has additional features and

functionality, such as a business application option and video linking.

Please follow the same embedding instructions in “Embedding your Online Credit Application" to associate the online

credit application microsite to your web site, however you must first turn the Microsite option on first.

To turn this feature on:

Navigate to the Digital Retail section, within the ‘Premium Services’ page.

Within the Online Credit Application Configuration section, click the ‘Edit Configuration’ button.

In the Global Settings, select the ‘Layout’ tab on the left side of the screen. Click the image of the standalone microsite, and select one of the save options to apply.

Example of a microsite

Linking to your Digital Retail Product If you are using the standalone version or you do not want your Digital Retail product embedded, you can use the URLs

collected above like other standard URLs by pasting them into an email, bookmarking them, pasting them into a post on

social media, a blog, or a comment.

Page 4: Installing the Online Credit Application - RouteOne the Online Credit Application ... These steps will walk you through to add an iframe _ code within your site so when customers visit

Quick Start Guide

4 rev. 10.10.16

Installing the Online Credit Application

Additional RouteOne training guides are available through the ‘News/Info’ tab within RouteOne. Dealers may also join complimentary RouteOne System Training Sessions from the ‘News/Info’ tab, or by clicking here. For additional information

on the RouteOne system, contact RouteOne Support at 866.768.8301, email [email protected]

But if you want to place a link into your website’s HTML, you can use your URL inside an HTML “anchor” tag,

which will link to your Digital Retail product. For example:

<a href="https://www.routeone.net/XRD/xrdStart.do?dealerId=A&locale=en_US">Apply For Credit</a>

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

<a href="https://www.routeone.net/XRD/xrdStart.do?dealerId=A&locale=en_US" target="_blank">Apply For Credit</a>

To the user of your website, this link will appear as “Apply For Credit”

TIPS: In this document’s examples of code, straight quotation marks are used. Ensure that you are using this type of

quote and not the curved quotation mark that Microsoft Word uses. 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.

o Correct start and end quote: ""

o Incorrect start and end quote: “”