2. Add CarStory Inline Market Report to VDPs

Used CarStory before?

If your website has used any CarStory Market Report product in the past, it is important to remove all existing CarStory code on the VDP. Please ensure no CarStory code exists on the VDP page before implementing the new Inline Market Report.

Embed CarStory VDP Code Snippet

Step 1:

Include the CarStory ILMR <div> in the VDP page code where you’d like the widget to be displayed.

<div class="inline-report" data-carstory-vin="PUT VIN HERE" style="height: 100%"></div>

Please note that "PUT VIN HERE" needs to be replaced with actual VIN.

Step 2:

Add this script block toward the bottom of the VDP page, before the closing tag:

<script async type="text/javascript" src="//widget.carstory.com/v1.0/inline.js"></script>
<script>
window.CarStoryConfig = {
referrer: "PLACE_REFERRER_HERE",
lazy: false
};
</script>

Important note: If you would like the widget to be loaded once it is visible in the viewport of the page (i.e lazyload) please use lazy: true. If this is not needed on your website, this parameter can be omitted.

Step 3:

You've finished VDP implantation! The next step is to add the CarStory Badges to your SRP.

Click here to continue to the SRP Badge implementation guide

"Referrer" Use:

During the inventory on-boarding process, your dealership may have been assigned a "Referrer ID" to use in your CarStory code. It is critical this ID be utilized (if assigned). This value, a word, goes inside the quotation marks. You can leave the quotation marks and simply replace the text PLACE_REFERRER_HERE.

Installation Notes:

• The CarStory Inline Market Report is 100% responsive and will adapt to any size container you place it in.
• Placing this script (from Step 2) at the bottom of the page will allow faster page load time and ensure that all CarStory Market Report styles have been downloaded before loading the widget HTML.
• If you don’t have a responsive site, please remember to add this code to your mobile site template.