SOARR Inventory SPA
Developer Integration Guide

One inventory source. Your dealership's website.

The SOARR Inventory SPA is a configurable inventory presentation layer for dealership websites. Available units, details and photos remain managed through SOARR while the website presents inventory in a style suited to your dealership and buyers.

This guide describes the recommended integration process. The exact production script, account configuration, approved inventory endpoint and any authorization requirements are supplied by SOARR during implementation.

Choose a presentation that fits the dealership.

The final experience depends on the dealership's approved SOARR configuration and the website's supported integration method.

Before you begin

• Identify the dealership's SOARR account and the approved website host/domain.
• Request the current integration package and configuration instructions from SOARR.
• Confirm which unit types, locations and inventory statuses should appear publicly.
• Choose the page structure and whether inventory listings require crawlable detail URLs.
• Agree on who owns the site's navigation, analytics, conversion tracking and design customization.

Embed code and placement

SOARR provides the approved script and configuration for each dealership. The website developer creates an inventory page and mounts the application where buyers should see it.

Example Truck Center — page template

<!-- Normal website header and editable introduction appear above -->
<section class="soarr-inventory-page">
  <h1>Commercial Trucks for Sale</h1>
  <div id="invapp"></div>
</section>

<!-- Replace this placeholder with the URL SOARR supplies. -->
<script src="SOARR_PROVIDED_SCRIPT_URL"></script>

1. Page template: Put the unique id="invapp" mount element in the main content area, outside the normal header and footer.
2. Script placement: Load the approved JavaScript once, after the mount exists, or via a supported page-specific footer/script slot.
3. Script restrictions: Check Content Security Policy, script sanitization, caching and whether the platform allows custom JavaScript on published pages.
4. Launch: Confirm the approved domain, dealer account, route behavior, lead destination, mobile view and inventory refresh with SOARR.

CMS and website-platform setup

The site CMS owns the page shell; SOARR supplies the inventory component. The integration point differs by platform.

Custom dealership CMS / agency-managed platform

Have the website developer add a route-specific template region or supported custom component for #invapp and register the approved SOARR script as a page-level asset. A platform's built-in inventory block is not necessarily an HTML/JavaScript embed slot. Confirm that its rendering and script-loading architecture supports the SPA before assuming a drag-and-drop placement will work.

WordPress / Elementor

Use a Custom HTML block or HTML widget for the mount. Place the script in the page's approved custom-code or footer mechanism if scripts are stripped from content blocks. Avoid duplicate script injection through optimization plugins.

HubSpot CMS

Use a developer-managed template region or custom HTML module. Site copy and marketing CTAs can remain editable HubSpot modules; place the script in a page-scoped footer/template location.

Webflow, Squarespace, Wix and other builders

Use their permitted embed/code mechanism only where custom JavaScript runs on the published site. If the platform isolates code inside an iframe, coordinate routing, height and styling with SOARR.

Questions for the web developer

• Where does the custom component mount after the page is rendered?
• Which system owns vehicle-detail paths, browser history, canonical tags, SEO metadata and sitemaps?
• Does the website's native inventory widget or lead form conflict with the SOARR experience?
• Can editable copy, FAQs and promotional blocks surround the inventory application without being overwritten?

Editing content around SOARR

Use regular CMS fields for content outside #invapp. Do not hard-code individual truck details into the CMS or put permanent copy inside the mount element. Update unit information in SOARR.

CSS and responsive styling

Style the website-owned wrapper and nearby CMS content through the site's normal stylesheet. Keep selectors scoped and avoid assuming the SPA's internal class names are stable.

/* Safe, outer-page example */
.soarr-inventory-page { width: 100%; margin: 0 auto; }
.soarr-inventory-page #invapp { width: 100%; min-height: 420px; }
@media (max-width: 768px) {
  .soarr-inventory-page { padding: 0 16px; }
}

• Do not apply fixed narrow widths or overflow:hidden to the inventory wrapper.
• Use CMS theme controls for fonts, colors and buttons outside the application.
• Coordinate internal filters, cards and spec sheet styling with SOARR instead of overriding undocumented classes.
• If an iframe is required, parent-page CSS cannot directly style its cross-origin contents.

SEO: make inventory discoverable

A fast interactive shopping interface is useful for buyers, but a client-rendered inventory screen alone does not guarantee discoverable detail pages.

• Provide stable, indexable unit detail URLs where supported.
• Ensure important vehicle details and meaningful page metadata can be rendered or exposed in an indexable form.
• Maintain canonical URLs and avoid unintentional duplicate inventory paths.
• Include appropriate structured data only when the content and page type support it.
• Generate and maintain an inventory XML sitemap when the site's architecture supports crawlable unit URLs.
• Check actual rendered output and Google Search Console indexing rather than assuming JavaScript pages are indexed.

Validation & troubleshooting

Acceptance checks

• Desktop and mobile layouts work without filter-panel overlap or horizontal scrolling.
• Search, filters and sorting behave consistently.
• Listing photos, details and inquiry links resolve correctly.
• Newly published and archived inventory updates behave as expected.
• Critical detail URLs are crawlable where an SEO implementation is required.
• No account keys, private endpoints or unrelated dealer names appear in publicly served source.

Common trouble spots

If inventory is blank, first confirm the provisioned account and host configuration. If filters behave unexpectedly, check for script duplication, caching and incompatible theme JavaScript. If indexed pages are missing, inspect the server-rendered page and sitemap strategy.