Add SOARR inventory to your website.

1. Add the inventory embed

1. Request the dealership’s integration snippet from SOARR.
2. Add it to the content area where inventory should appear on a test page.
3. Send the test-page URL and any design references to SOARR.

<div id="invapp"></div>
<script src="SOARR_PROVIDED_SCRIPT_URL"></script>

The example shows the basic structure. Replace SOARR_PROVIDED_SCRIPT_URL with the complete URL SOARR supplies. Script paths and filenames vary by dealership; do not construct a URL from the dealership name.

Keep your permanent website content outside #invapp, which is the inventory application’s container.

2. Who handles what

3. Create filtered inventory pages

Configured integrations can use data-params on the inventory container to prefilter inventory. The following is an example of a used-Peterbilt page; confirm these parameters are supported by the dealership’s script before using it.

<div id="invapp" data-params="{designation: 1, make: 'Peterbilt'}"></div>
<script src="SOARR_PROVIDED_SCRIPT_URL"></script>

Use only the parameters and values SOARR confirms. These examples do not define every available option or guarantee support across all script versions.

Confirm how combined filters behave in your integration. Discuss requirements for OR logic or more complex grouping with SOARR.

4. Coordinate clean URLs

The SPA supports hash routing and clean paths using the History API. Use the routing mode configured for your integration.

Hash:  /inventory/#/specs/123456/example-truck
Clean: /inventory/specs/123456/example-truck

Hash routing

The browser requests /inventory/. SOARR reads the route after # and displays the vehicle. No additional server rewrite is needed for the fragment.

Everything after # stays in the browser. Your server and Cloudflare never receive it, so a Cloudflare rule cannot match or rewrite that portion of the URL.

Clean paths

Clean paths require configuration on both sides:

1. SOARR: configure History API routing, the inventory base path, and supported listing and vehicle-detail routes.
2. Website developer: internally rewrite those routes to the page containing the inventory embed. Return HTTP 200 and keep the requested URL unchanged.

Requested URL: /inventory/specs/123456/example-truck
Serve content: /inventory/
Browser URL:   /inventory/specs/123456/example-truck

Use a rewrite, not a redirect. Preserve query parameters. Limit the rewrite to agreed application routes; exclude static assets, API requests, and unrelated pages.

Cloudflare

When Cloudflare proxies the website, a URL Rewrite Rule can provide the host-side rewrite to the inventory page. Your website administrator configures the rule for the actual domain and routes; SOARR configures the matching application routing.

If Cloudflare only manages DNS, configure routing at the host. Cloudflare Pages and Workers have their own routing options; a site-wide SPA fallback may serve the wrong page when inventory is only one section of a larger website.

Other platforms

WordPress, IIS, Vercel, and Netlify require platform-specific configuration. Use the routing facilities available in the existing website stack; changing hosting is not a requirement.

WordPress: clean paths require additional integration to render the inventory page at vehicle URLs and handle WordPress redirects and SEO settings. This is not a page-builder setting. Confirm the implementation with SOARR before changing existing links.

Host-side rewrite examples

Choose the tab for your hosting setup. These are starting examples for Chris to review, not validated SOARR deployment recipes. They cover the illustrated vehicle-detail pattern only; add listing/filter routes only after SOARR confirms them.

// Example: GET/HEAD vehicle-detail routes only.
// Confirm these routes and /inventory/ with SOARR.
export default {
  async fetch(request) {
    const url = new URL(request.url);
    const isDetail = /^\/inventory\/specs\/[0-9]+(?:\/[^/.]+)?\/?$/.test(url.pathname);
    const isRead = ["GET", "HEAD"].includes(request.method);

    if (isRead && isDetail) {
      url.pathname = "/inventory/";
      // url.search is retained; browser URL stays unchanged.
      return fetch(new Request(url.toString(), request));
    }

    return fetch(request);
  }
};

# Match expression (replace the example hostname):
(http.host eq "www.example.com"
 and http.request.method in {"GET" "HEAD"}
 and http.request.uri.path matches "^/inventory/specs/[0-9]+(/[^/.]+)?/?$")

# URL Rewrite Rule action:
Path:         Rewrite to → Static → /inventory/
Query string: Preserve

# This is a URL Rewrite / Transform Rule, not a Redirect Rule.
# The matches operator requires a plan with regex support.

# Inside the existing server block, before broader rewrites.
# Vehicle-detail routes only; keep other routes unchanged.
if ($request_method ~ ^(GET|HEAD)$) {
    rewrite ^/inventory/specs/[0-9]+(/[^/.]+)?/?$ /inventory/ last;
}

# The existing /inventory/ handler must serve the embed page.
# Existing query arguments are preserved.
# Validate configuration with: nginx -t

# In the website-root .htaccess, before the CMS catch-all.
# Requires mod_rewrite and permission to use rewrite rules.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} ^(GET|HEAD)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^inventory/specs/[0-9]+(/[^/.]+)?/?$ /inventory/ [L]

# No R flag: this is an internal rewrite, not a redirect.
# Existing query arguments are preserved.
# For WordPress, additional routing/SEO handling may be needed.

All examples: SOARR must enable matching History API routing. Use absolute asset paths, check CMS canonical redirects and canonical tags, and test direct links, refresh, and Back/Forward. Rewriting the host request does not enable SPA routing or per-vehicle SEO by itself.

Verify

Open a vehicle URL directly in a new tab. Test refresh, filters, and browser Back/Forward. For clean paths, confirm the document returns HTTP 200 without redirecting to the inventory landing page.

5. Customize the inventory presentation

The basic installation does not require a custom application build. For deeper customization, SOARR can coordinate separate inventory-list and vehicle-detail templates using Handlebars, custom route patterns, route-level SEO settings, and callbacks after startup or route changes.

SOARR can provide the relevant template examples and supported helpers for an agreed implementation. Establish who will edit and host the templates before making changes. Use the configuration supplied for the dealership rather than copying another customer’s initialization file.

The inventory application shares the website’s styling environment. Review layout and CSS interactions on the real test page; send SOARR specific screenshots or design references for adjustments.

For strict Content Security Policy requirements, share the existing policy and browser violations with SOARR so the required resources can be confirmed for the integration.

6. Test before launch

• Correct dealership inventory and intended filters appear.
• Listings, photos, vehicle details and pagination work.
• Mobile layouts and website CSS do not obscure inventory controls.
• Inquiry forms, phone links and other configured calls to action work.
• Direct vehicle links, page refresh and browser Back/Forward work.
• For clean routing, agreed listing and detail URLs load with HTTP 200 and retain the requested address.
• Page titles, descriptions, canonical tags and inventory links have been reviewed for the agreed setup.
• SOARR has reviewed the test URL and coordinated any script or configuration changes for launch.

Include the dealership name, test-page URL, website platform, and the issue or change requested.