PREPARATION: Remove old DriveItNow code

  • Before starting your install, please remove all former Drive-It-Now Scripts, Pages, and Banners.

    Remove any scripts referencing driveitnow.com, for example:

    <script async src="https://www.driveitnow.com/javascript/driveitnow.sbp.js.php?DealerID="></script>

    <script type="text/javascript" src="www.driveitnow.com/javascript/din_lightwindow.inc.js"></script>

    <script id="tru-script" async src="https://www.driveitnow.com/api/api.js?v=2.1&dealer-key="></script>

    Note that these are simply examples; there might be slight differences in the Drive-It-Now scripts found on the site. Please find and remove ANY scripts referencing driveitnow.com, not just the examples shown above.

Pre-Integration Notes
Step 1: Install truPayments Javascript

  • Place the truPayments javascript code once on every page of the website. This installation is similar to that of chat products, or other products that appear on every page of the website. Our script can be placed either in the document or at the end of the document.

    <!-- truPayments Javascript --><script id="tru-script" async src="https://client.trupayments.com/api.js?v=1&dealer-key="></script>

    If the mobile website is a different codebase and implementation, append the following query parameter to the Javascript URL site-id=mobile

    <!-- truPayments Javascript --><script id="tru-script" async src="https://client.trupayments.com/api.js?v=1&dealer-key=&site-id=mobile"></script>
Step - CTAs (SRP Banner)

  • Place a Quick Pre-qualify Banner on the SRP page as shown on the right. Use the following code for the banner image:

    <div tru-cms="srp-banner"> </div>

    Banner image will look like:

Step - CTAs (Home Rotator)

  • Place Quick Pre-qualify banner in the home page rotator. Use the following code for the banner image:

    <div tru-cms="home-banner"> </div>

    Rotator image will look like:

Step 4 - Prequalify Buttons SRP and VDP

  • This is the basic integration for prequalify buttons on your SRP and VDP. This will be used for buttons showing a best case payment and/or that say "Drive it Now", "Pre-qualify instantly", or some other variation.

    <div href="#" tru-vehicle vin="INSERT VIN HERE" dealer-key="" button-mode="SRP"> </div>

    An example of our link with a VIN populated:

    <div href="#" tru-vehicle vin="" dealer-key="" button-mode="SRP"> </div>

    A prequalify buttons link should be placed in the page once for every individual vehicle displayed on a Search Results Page or Vehicle Details Page, inserting the correct VIN per vehicle using the appropriate templating syntax from your vehicle data.

    Search Results Page (SRP) buttons vs Vehicle Detail Page (VDP) buttons

    prequalify buttons displayed on the SRP may need to have different margins or layout from a button displayed on the VDP. In order to differentiate between the two page types, the prequalify buttons link should include an additional attribute button-mode with a value of either:

    button-mode="SRP" -or- button-mode="VDP"

    prequalify buttons should look like the following:

    SRP:
    VDP:
    Please Note The anchor tag must be empty as it will be automatically populated with a prequalify buttons. The specific button rendered is configured externally to this API

  • SRP Prequalify Buttons Placement

    Place SRP prequalify buttons under the Vehicle listed as indicated in example image. Example show detail list view, for Grid view placement see example below.

    For the SRP grid view, place SRP prequalify buttons under the Vehicle listed as indicated in example image..

    SRP List View

    SRP Grid View

  • VDP Prequalify Buttons Placement

    Place VDP prequalify buttons under the Vehicle listed as indicated in the example image.

  • Mobile Prequalify Buttons Placement

    Place prequalify buttons as indicated in the example images.

    SRP

    VDP

Direct Product Modal Link Examples:

To link directly to the truPayment product modal and not to a product page use the following links: