Embed SOARR inventory into your dealership website.

1. Before you start

1. Ask SOARR for the integration script URL configured for this dealership. Different dealers may have different scripts or account settings.
2. Confirm which domain and staging domain will host the integration. SOARR may need to permit those hostnames.
3. Choose the inventory page where visitors should see the listing application, for example /inventory/ or /used-trucks/.
4. Confirm whether the site's CMS supports custom JavaScript in the page body. Many visual content blocks remove <script> tags.

2. Where to place the embed code

Place the SOARR container in the main content area where inventory should appear, ideally below the site's regular header and page introduction and before the footer. Put the SOARR script after the container, as shown.

Example page — Example Truck Center

<main>
  <section class="soarr-inventory-shell" aria-label="Truck inventory">
    <div class="inventory-intro">
      <h1>Trucks for Sale</h1>
      <p>Browse available new and used commercial trucks.</p>
    </div>

    <div id="invapp"></div>
  </section>
</main>

<!-- Replace the placeholder with the dealership's actual SOARR script URL. -->
<script src="SOARR_PROVIDED_SCRIPT_URL"></script>

• The element ID must be invapp, with no second element using that ID on the page.
• Load the script only once. Do not separately add the same script to both the site header and this page.
• Do not move the script to an async loader or alter its initialization order unless SOARR confirms that setup is supported.
• Do not place the application inside a hidden tab or modal without verifying it initializes correctly there.

3. CMS and website-platform implementation

The inventory embed is a website integration, not a replacement for your CMS. Use your CMS for ordinary page content and site-wide layout. For an agency-managed, purpose-built dealership platform, the developer may need to integrate the script in the site's page template or application code rather than through a visual editor.

These are implementation patterns, not a guarantee that every plan or CMS permission level supports external scripts. Validate the final rendered page.

Implementation questions for a website agency

1. Can a dedicated inventory page render a stable, unique <div id="invapp"> within the main content area?
2. Can the approved JavaScript be loaded once, after that element exists, without being blocked by Content Security Policy or script sanitization?
3. Does the platform control inventory detail paths, browser history, canonical tags, structured data and XML sitemaps? How will those coexist with the SOARR SPA router?
4. Can the CMS team edit copy, FAQ, financing, location and contact content around the inventory element independently of SOARR inventory data?
5. Will native inventory widgets or lead forms duplicate SOARR content or interfere with its inquiry flow? Agree on one source and one buyer journey for each page.

4. What content can the website developer edit?

Safe content placement

<header>... your normal website navigation ...</header>
<section class="dealer-hero">... editable CMS headline ...</section>
<section class="soarr-inventory-shell">
  <div id="invapp"></div>
</section>
<section class="dealer-finance">... CMS financing content ...</section>
<footer>... your normal website footer ...</footer>

Do not place permanent CMS content inside #invapp. The SOARR application may replace that element's contents when it renders or changes routes.

5. CSS customization

Keep page-level styles scoped to a wrapper so the inventory integration does not unintentionally change your other pages. Start with the outer container; style SOARR's generated classes only after reviewing the actual markup and coordinating supported customizations.

Safe starting CSS

/* Your page's wrapper: typography, spacing, width and surface */
.soarr-inventory-shell {
  --soarr-brand: #7f3049;
  color: #233a4b;
  font-family: Arial, sans-serif;
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: 24px;
}

.soarr-inventory-shell .inventory-intro {
  margin-bottom: 24px;
}

.soarr-inventory-shell #invapp {
  min-height: 360px;
}

@media (max-width: 767px) {
  .soarr-inventory-shell { padding: 12px; }
  .soarr-inventory-shell .inventory-intro h1 {
    font-size: 28px;
    line-height: 1.15;
  }
}

Application-level colors, cards and filters

The CSS above styles only the website-owned wrapper and introduction. If you need to change the SPA's internal buttons, filters, cards or spec sheet, coordinate the supported theme and configuration options with SOARR. Internal class names are not a stable customization contract. Avoid global div, img, and .card overrides that could break either the site's own components or the inventory application.

6. URLs, SEO and deep links

• Give the main inventory landing page a descriptive, permanent path such as /used-trucks/ or /trucks-for-sale/.
• SOARR's existing application may use fragment routes such as #/specs/16479042/.... Preserve them if the live integration uses that router.
• Fragment URLs alone do not guarantee individual truck pages will be indexed. For dealer production SEO, coordinate server-rendered or prerendered per-unit pages, stable descriptive paths, canonical tags, vehicle metadata, and a sitemap with SOARR.
• Only mark vehicles available when live SOARR data confirms it. Do not expose snapshot demo records as current inventory.
• Use vehicle type, year, make, model, and actual SOARR-reported unit location where verified. Do not infer a truck's location from a dealer's headquarters.

7. Pre-launch checklist

• Inventory loads with real SOARR records on the final public domain and staging domain as authorized.
• Filters, searches, photos and full spec sheets work.
• Inventory and detail navigation work with browser Back/Forward, refresh and shared deep links.
• Desktop, tablet and mobile breakpoints have no horizontal overflow or hidden controls.
• Any displayed 0-mile reading remains 0 miles; a zero asking price is handled as Call for Price where supported by the configured integration.
• Contact, financing, map and dealer-location links lead to approved destinations.
• Page performance, cache behavior, CSP rules and script loading have been tested on the actual CMS output.

8. Integration help

For a dealer-specific script, account configuration, allowed domains, production URL strategy, or assistance with CMS placement, coordinate directly with SOARR.