Embedding RV Listings

There are two ways to display your RV listings on your website: using our embed widget or accessing the API directly. Each approach has its own advantages and trade-offs.

Option 1: Embed Widget (Recommended)

The quickest way to add RV listings to your site is using our embed widget. Just add these two lines of code:

<div id="rv-embed"></div>
<script src="https://www.rvrentpro.com/embed.js"></script>
<script>
  window.RVEmbed.init({
    apiKey: 'YOUR_API_KEY',
    target: '#rv-embed',
  });
</script>

Advantages

• Zero Setup: Just add two lines of code and you're done
• Automatic Updates: Get new features and bug fixes automatically
• Consistent UX: Professional, tested user experience
• Responsive Design: Works on all devices out of the box
• Edge Cases Handled: Loading states, errors, and empty states all handled
• Theme Customization: Match your brand through settings
• Multiple Layouts: Choose from card, gallery, or carousel views
• Auto-Resizing: Iframe adjusts height automatically
• Cross-Browser Support: Tested across all major browsers

Limitations

• Limited customization options
• Must use predefined layouts
• Styling confined to theme settings
• Small overhead from embed script
• Standard iframe limitations

Option 2: Direct API Integration

For complete control, you can access the RV data directly through our API:

// Fetch RV listings
fetch('https://www.rvrentpro.com/api/public/rvs', {
  headers: {
    'x-api-key': 'YOUR_API_KEY'
  }
})
.then(res => res.json())
.then(data => {
  // RV data structure:
  {
    "data": [
      {
        "id": string,
        "name": string,
        "type": string,
        "sleeps": number,
        "length": number,
        "base_rate": number,
        "primary_image_url": string,
        "description_text": string
      }
    ],
    "settings": {
      "theme": {
        "primaryColor": string,
        "secondaryColor": string
      },
      "display": {
        "showPricing": boolean,
        "showSpecifications": boolean
      }
    }
  }
});

Advantages

• Complete Control: Design and build exactly what you want
• Custom Experience: Create unique user interactions
• Better Performance: No iframe overhead
• Native Feel: Integrates seamlessly with your site
• SEO Friendly: Content is directly in your page
• Deep Integration: Connect with your existing systems
• Direct Data Access: Work with the raw data
• Custom Error Handling: Handle edge cases your way
• No Iframe Limitations: Full control over URLs and linking

Considerations

• More development work required
• Must handle loading states and errors
• Need to maintain custom code
• Build your own responsive design
• Cross-browser testing needed
• No automatic feature updates
• Consider security implications
• Handle API errors gracefully
• Be aware of rate limits

Which Option Should You Choose?

Choose the Embed Widget if:

• You need quick implementation
• Standard layouts work for your needs
• Development resources are limited
• You want automatic updates
• You prefer a maintained solution

Choose the Direct API if:

• You need a custom design
• Deep integration is important
• You have development resources
• Performance is critical
• You need complete control

Getting Your API Key

1. Go to Settings > Embed in your dashboard
2. Select the store you want to embed
3. Copy the API key
4. Keep your API key secure and never expose it in client-side code

Need Help?

• Check our API Reference for detailed endpoint documentation

Remember to replace YOUR_API_KEY in the examples with your actual API key from the dashboard.