Shift Framework · Automotive Dealer Platform

Embed ADP lookups and forms in your site

Custom elements that render Automotive Dealer Platform vehicle, part and service data on any page — no framework, no build step. Load one module, place the element, give it the base URL your platform operator issued, then call one method.

Quickstart Installation

Package
Latest version

Components

Grouped by the part of the platform they read from. Every element listed here ships in the package today — where a group has no demo page yet, it is the demo that is pending, not the code.

What the element does, and what you do

Ready-to-embed elements, not a toolkit. Each one is a finished piece of product: a VIN lookup that renders a whole service history, a part search across three sources, a form that raises a real ticket. You place it and hand it a base URL — it does the rest.

The element handles

You provide

That keeps the integration contract small: an element, a base URL, and the identifier you are asking about. The element owns the request, the response shape, the loading and error states, and the language. You own the base URL and the access it needs — and the element never retries, so a failed request stays failed until you ask again.

Where it sits

You call one package. It calls the ADP services over HTTPS, and everything behind that — data, rules, identity — stays the platform’s problem rather than your site’s.

Quickstart

A working embed in three steps. This is the whole integration.

Your base URL and the access that goes with it are issued by the platform operator — ask before you start, and allow-list the origins you will embed on. The VIN must be real: fetchVin verifies the ISO check digit and rejects an invented 17-character string.

Three hosts must be reachable from the browser, and they need two different Content-Security-Policy directives. In connect-src: your base URL, and the CDN, from which the element fetches its own translation files — including when you install from npm. In style-src and font-src: fonts.googleapis.com and fonts.gstatic.com, because the package appends a font stylesheet to your document head on load. Miss the first and the element renders with empty labels and no error; miss the second and it renders in the wrong typeface.

Install

Load the whole package from the CDN at @latest. It registers every element but downloads code only for the ones your page actually uses, when it uses them — so the recommended path is also the one you have to think about least.

Version

Using a bundler? npm install adp-web-components — then keep every import in the application on one version.

Versions and compatibility

Three rules. Breaking any of them fails at runtime, not at build time, and the symptom rarely points at the cause.

If one page genuinely cannot move to the same version as the rest, isolate it in an iframe. A separate document has its own element registry.

What you get

What the element handles, and what it needs from your page.

Next steps

More from ShiftSoftware

Calling the platform and reading what comes backIts own loading, empty and error statesFormatting and text direction in four languagesRendering inside a shadow root, so your CSS stays yoursFetching its own code the first time it appears on a pageA base URL, and the access issued with itOne line of markup where you want it to appearOne method call with a VIN or a part numberLoad the packageOne module tag. It registers every element and lazy-loads each one’s code the first time that element appears on the page.Place the elementGive it your base URL and the language the page is in. Keep the trailing slash — the element appends the identifier to it.Ask it a questionCall the element’s method with a VIN or a part number. It owns the request, the loading state and the error state from there.Framework-agnosticCustom elements, not React or Blazor components — the same element works in plain HTML, React, Angular, Vue and Blazor. Strings and booleans pass as attributes anywhere. Object properties and methods such as fetchVin need a DOM reference, and Blazor needs setBlazorRef before callbacks fire.Style-isolatedThe elements you embed render in a shadow root: your CSS cannot break them, and their CSS stays out of your stylesheet. One exception to plan for — the form elements mount their dropdowns and dialogs on document.body so they can escape a clipping container, and those do inherit your page styles.Right-to-left includedEnglish, Arabic, Kurdish and Russian. Set the language and the element re-renders, text direction included — the direction is read from the locale, not guessed.Fixed presentationThe lookup elements ship their own layout and type and reset inherited styles, so a host stylesheet cannot shift them — and cannot restyle them either. The form elements are the configurable ones: they expose named parts and take a theme class.Build before you have dataSet is-dev on a lookup element and it answers from sample data instead of the network. The container elements ship their own; a standalone element takes yours through setMockData. On the form elements is-dev means something different — it points the submission at the non-production endpoint.One version per documentA browser can register a custom element tag once and can never re-register it. If a page ends up holding two versions of this package, the second silently loses every tag it shares with the first — you get undefined rendered into the page, or a type error thrown while reading a form structure. In a single-page application every route shares one document, so they all move together.Do not mix loading stylesThe whole-package bundle and the per-element modules are two separate runtimes. Loading both in one document has exactly the same effect as loading two versions. Pick one and keep to it.Pin deliberatelyPinning an exact version freezes behaviour; @latest moves when we publish. Either is supported — what is not supported is different parts of one page disagreeing about which they use.Shift FrameworkShiftEntity, ShiftIdentity and TypeAuth — entities, identity and type-safe authorization, shared by every Shift product.ADP servicesLookup, synchronisation and domain models built on that foundation. They own the data and the rules.adp-web-componentsThis package. Custom elements that call those services and render what comes back.Your siteA module tag and an element.DocumentationComponent reference, integration guides and the form structure schema.Release historyPublished versions and what shipped in each, on the registry.Report a problemSend the package version, the element tag, the browser, and what the network tab shows for the failing request. Version and origin are what make a report reproducible.