> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.fleetwire.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

1. In your Fleetwire dashboard, go to [Settings > Online Reservations](https://tenant.fleetwire.io/settings/online-reservations) to find your unique JavaScript snippet.
2. 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://tenant.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://tenant.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](https://storage.crisp.chat/users/helpdesk/website/361fe47cda222c00/8d6eb0cf-a389-4fc3-bc7f-bfb39a_4tdi0.png)

#### 2. Fleet Availability Calendar
Show a calendar of available rental dates for your fleet.

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

* **Result**:

![Fleet Availability](https://storage.crisp.chat/users/helpdesk/website/d85c74fa8dfdb000/2022-08-1012-48-09_19ah0go.png)

#### 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](https://storage.crisp.chat/users/helpdesk/website/d85c74fa8dfdb000/2022-08-1016-13-43_f1wfun.png)

#### 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](https://storage.crisp.chat/users/helpdesk/website/d85c74fa8dfdb000/2022-08-1012-53-15_1ifgs7f.png)

#### 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.

1. Load your website and check that the Fleetwire elements (e.g., buttons, cards, calendars) render properly.
2. Click a **Listing Button** to confirm it opens the booking flow (e.g., redirects to `testcompany.fleetwire.io` checkout).
3. Verify dynamic elements like titles and prices match the latest data from your Fleetwire dashboard.
4. 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](/en/article/customize-your-checkout-style-zweu59/).
* **Track Bookings:** Connect the Google Analytics or Meta Pixel app from the App Store.
* **Set Up Listings**: Manage your listings with [Creating and Managing Listings in Fleetwire](/en/article/how-to-create-and-manage-listings-7v55a/).
* **Need Help?** Contact us at [hi@fleetwire.io](mailto:hi@fleetwire.io) or via the in-app chat.

Happy embedding! 🌟