Skip to Content
Home

Lectrium EVDP integration documentation

Lectrium Digital Products Integration Guide

Version 1.2

Table of Contents

Introduction

This document provides integration guidelines for Lectrium’s digital products: the EV Savings Badge, Range Map, and CO2 Badge. It includes iframe implementation details, placement recommendations, API integration, and troubleshooting steps.

Roles and Responsibilities

RoleNameResponsibility
Implementation ManagerSarunas Domarkassarunas@lectrium.com
Technical EngineerArnas Puidokasarnas@lectrium.io
Chief Product OfficerZiggy Zabietazygimantas@lectrium.io

Implementation Overview

Lectrium’s digital tools are embedded on electric vehicle detail pages (VDP) using iframes. These tools dynamically display information related to electric vehicle savings, range estimation, and CO2 emissions. Proper placement of these iframes ensures an optimal user experience.

Product-Specific Implementation

EV Savings Badge

  • Default location on VDP:
    • Right side, under the pricing element
  • Width:
    • 100%
  • Height:
    • 760px
  • Typical iframe code structure:
    • https://ev-badge.lectrium.com/{CUSTOM_IFRAME_ID}?vin={VIN}
    • Each domain gets its unique custom iframe ID which is provided together with these guidelines in the email. If the iframe information is missing please contact: sarunas@lectrium.com
  • Alternative Placement:
    • If placed in the main container (under the image), the iframe should be set to horizontal, and it’s height needs to be adjusted:
      • Horizontal iframe code structure:
        • https://ev-badge.lectrium.com/{custom_iframe_ID}?vin={VIN}&horizontal=true
      • Height:
        • 410px
Example

Range Map

  • Default location on VDP for desktop:
    • Main container, under the image
  • Width:
    • 100%
  • Height:
    • 450px
  • Typical iframe code structure:
    • https://range-map.lectrium.com/{CUSTOM_IFRAME_ID}?vin={VIN}&horizontal=true
    • Each domain gets its unique custom iframe ID which is provided together with these guidelines in the email. If the iframe information is missing please contact: sarunas@lectrium.com
  • Default location for mobile and alternative placement:
    • for mobile, and for desktop, if placed on the right sidebar (under the pricing element), iframe should be set to vertical, and it’s height needs to be adjusted:
      • Vertical iframe code structure:
        • https://range-map.lectrium.com/{CUSTOM_IFRAME_ID}?vin={VIN}&horizontal=false
      • Height:
        • 680px
Example

CO2 Badge

  • Default location on VDP:
    • Right side, under the pricing element (below other Lectrium tools)
  • Width:
    • 100%
  • Height:
    • 620px
  • Typical iframe code structure:
    • https://co2-badge.vercel.app/{CUSTOM_IFRAME_ID}?vin={VIN}
    • Each domain gets its unique custom iframe ID which is provided together with these guidelines in the email. If the iframe information is missing please contact: sarunas@lectrium.com
  • Alternative Placement:
    • If placed in the main container (under the image), the iframe should be set to horizontal, and it’s height needs to be adjusted:
      • Horizontal iframe code structure:
        • https://co2-badge.vercel.app/{CUSTOM_IFRAME_ID}?vin={VIN}&horizontal=true
      • Height:
        • 320px
Example

Iframe Integration Guidelines

  • Ensure HTTPS is used to maintain security and avoid mixed content issues
  • Set the iframe width to 100% for responsive behavior.
  • Adjust height based on placement as mentioned in product-specific sections.
  • Avoid iframe border styling unless necessary for site design.
  • If present, remove the sticky right sidebar.
  • Mobile/Desktop Differences: Ensure the layout is optimized for different screen sizes.
  • Bundling products into one longer iframe is possible.
    • The Horizonal EVDP Bundle can be placed under the main container
    • The Vertical EVDP Bundle can be placed in the right-hand sidebar

API Setup for VIN Verification

Our iframes work only for electric vehicles and PHEV that we receive and process from dealership’s inventory feed providers. If the inventory feed file does not contain the VIN of a specific VDP, our iframes will not be able to generate complete product information.

We have built a script that prevents iframes being loaded on gas vehicles, mild hybrids, and vehicles that are not included to inventory feed that Lectrium has access to.

Please add the script provided together with the iframes to the VDP.

The typical code structure:

<script
  vin="{VIN}"
  src="https://d3rxnf6cqobkzz.cloudfront.net/{website_provider}"
/>

FAQs & Troubleshooting

  • Why is my iframe not loading?
    • Ensure the correct URL is being used.
    • Check if the site allows iframe embedding.
    • Verify the VIN parameter is properly passed.
  • Common Issues:
    • Incorrect Quotation Marks
      • If iframe attributes contain extra or incorrect quotation marks, update them as follows:
<iframe
  src="https://eligibility-badge.vercel.app/?vin={VIN}"
  width="100%"
  height="500"
  frameborder="0"
  title
></iframe>
  • Gas Car Compatibility
    • Ensure the iframe implementation is only triggered for EVs and plug-in hybrids.
  • Cookie Blocking Issues
    • If a cookie blocker appears, implement blocking map according to the cookie blocker provider documentation.
  • Why does the height of the iframe look incorrect?
    • Adjust the height parameter based on placement as mentioned in Section 4.
    • Make sure it is correctly set as horizontal or vertical

Contact Us

Last updated on