Add Fleetwire to Any Website

🌐 Add Fleetwire to Any Website!

Want to bring your Fleetwire rental business to your own website? You can seamlessly embed Fleetwire listings, buttons, and availability calendars into any site with just a few snippets of code! Whether you’re using WordPress, a custom site, or a platform like Squarespace, this guide will help you add Fleetwire elements to showcase your rental listings and drive bookings. Let’s get started!

🎯 Why Embed Fleetwire on Your Website?

Adding Fleetwire to your website helps you:

Showcase Listings: Display rental listings, prices, and availability directly on your site.
Simplify Updates: Automatically sync changes (e.g., price or title updates) from Fleetwire to your site—no manual edits needed.
Drive Bookings: Make it easy for customers to book rentals without leaving your website.

Note: You’ll need to grab your unique JavaScript snippet from your Fleetwire dashboard to get started.

🛠 How to Add Fleetwire to Your Website

Follow these steps to embed Fleetwire on your website using a JavaScript snippet and HTML elements, then customize and test the integration.

Step 1: Add the JavaScript Snippet

Embed the Fleetwire JavaScript snippet on every page where you want to display listings or booking features.

In your Fleetwire dashboard, go to Settings > Online Reservations to find your unique JavaScript snippet.
Copy the snippet and paste it as high as possible in the <head> section of your website’s HTML. This can be done via:
- A header template file (e.g., header.php in WordPress).
- Google Tag Manager.
- Any script inclusion method your site supports.

Here’s an example snippet (replace EXAMPLE with your company’s unique ID from the dashboard):

JavaScript Version:

<script>
    var fleetwireOptions = { company: "EXAMPLE" };
</script>
<script src="https://fleetwire.io/tenant/v2/fleetwire.js"></script>

TypeScript Version (Optional):

If your site uses TypeScript, you can define the options with types for better safety:

<script>
    interface FleetwireOptions {
        company: string;
    }
    const fleetwireOptions: FleetwireOptions = { company: "EXAMPLE" };
</script>
<script src="https://fleetwire.io/tenant/v2/fleetwire.js"></script>

Pro Tip: Place the snippet high in the <head> to ensure Fleetwire elements load quickly and without flickering.

Step 2: Embed Fleetwire Elements on Your Pages

Add HTML snippets to display Fleetwire buttons, availability calendars, listing cards, or detailed info like titles and prices.

1. Listing Button

Add a button for a specific listing to let customers book directly.

<!-- Listing Button -->
<div class="fleetwire-listing-button" data-id="EXAMPLE"></div>

- Customization: Add your own CSS classes or styles to match your site’s design.
- Result:

Listing Button

2. Fleet Availability Calendar

Show a calendar of available rental dates for your fleet.

<div class="fleetwire-search"></div>

- Result:

3. Single Listing Card

Display a card for a specific listing with details like price and image.

<div class="fleetwire-listing-card" data-id="EXAMPLE" data-showPrice="true" data-currency="$"></div>

- Options:
- data-showPrice="true": Show the listing price.
- data-currency="$": Set the currency symbol.
- Result:

Single Listing Card

4. Fleet Listing List

Show a list of all your listings with their details.

<div class="fleetwire-listing-list" data-showprice="true"></div>

- Options:
- data-showprice="true": Show prices for each listing.
- Result:

Fleet Listing List

5. Miscellaneous Elements

Add specific listing details like title, price, or images to your pages.

- Title:

<span class="fleetwire-listing-title" data-id="EXAMPLE"></span>

- Price:

<span class="fleetwire-listing-price" data-id="EXAMPLE"></span>

- Image:

<div class="fleetwire-listing-image" data-id="EXAMPLE"></div>

- Door Count:

<span class="fleetwire-listing-doors"></span>

- Seat Count:

<span class="fleetwire-listing-seats"></span>

- Example Usage:

<p>Rent the new <span class="fleetwire-listing-title" data-id="EXAMPLE"></span> for ONLY <span class="fleetwire-listing-price" data-id="EXAMPLE"></span> a day!</p>

- Result: Rent the new Tesla Model X for ONLY $169 a day!

Pro Tip: Use these elements to dynamically update your site—changes to titles or prices in Fleetwire automatically reflect on your website!

Step 3: Test Your Fleetwire Integration

Ensure all elements display correctly and function as expected on your website.

Load your website and check that the Fleetwire elements (e.g., buttons, cards, calendars) render properly.
Click a Listing Button to confirm it opens the booking flow (e.g., redirects to testcompany.fleetwire.io checkout).
Verify dynamic elements like titles and prices match the latest data from your Fleetwire dashboard.
Test on mobile to ensure responsiveness—Fleetwire elements should adapt to different screen sizes.

Quick Tip: If an element doesn’t load, double-check the data-id matches a valid listing ID from your Fleetwire dashboard.

🌟 Fleetwire Added, Website Enhanced!

You’ve successfully added Fleetwire to your website! Your rental listings, availability, and booking buttons are now live, making it easy for customers to book directly from your site. Test a booking today to see your integration in action.

🚀 Next Steps

Enhance your website integration with these tips:

Customize Checkout: Add styling with Customizing Your Checkout Store with CSS in Fleetwire.
Add Custom Scripts: Enhance functionality with Adding Custom Scripts to Your Checkout Page in Fleetwire.
Set Up Listings: Manage your listings with Creating and Managing Listings in Fleetwire.
Need Help? Contact us at hi@fleetwire.io or via the in-app chat.

Happy embedding! 🌟

Updated on: 15/05/2025

Was this article helpful?

Thank you!