Lovable, Bolt and v0 with IDX

How do I add IDX to a React real estate website?

How do I add IDX to a React real estate website? Load the RealSavvy script once at the app root and render widget slot divs in components. Steps and tips.

The short answer

Short answer

Updated Updated November 2026

How do I add IDX to a React real estate website?

In a React site, load the RealSavvy loader script once, in index.html or your root layout, then render each widget's slot div inside the component where it should appear. The script fills the slots with live MLS search, listing grids, sliders or the contact form, with the MLS credit included. get_embed_code returns React notes that also cover Lovable, Bolt and v0, which are React apps.

How it fits React

The widgets do not need a React package. The script watches the page for slot divs and fills them. In a single-page app, that means a slot can live in any route component, such as a SearchPage or a NeighborhoodPage. Keep the script out of components so it does not load twice when routes change. Follow the React notes from get_embed_code for anything route-specific.

Steps

  • Plan which widgets go on which routes
  • Create them with save_widget and check counts with preview_widget
  • Add the loader script once to index.html
  • Render each slot div in the matching route component
  • Build, deploy and run check_install on the live pages

Mistakes to avoid

  • Loading the script inside a component that mounts on every route
  • Wrapping search in your own iframe
  • Putting a domain or URL in a widget config
  • Building a custom lead form with fetch() instead of the RealSavvy contact form
  • Fetching listing data into React state

A note on search engines

A React app that renders in the browser can be hard for crawlers that do not run JavaScript. View Page Source on your live site to see what they receive. If it is mostly empty, consider server rendering or prerendering, or moving to Savvy Studio, where pages ship as finished HTML with structured data and a sitemap.

Related questions

More questions, answered

Is there an npm package?

You do not need one. The install is one script tag plus a slot div per widget, which works in any React setup.

Can I pass props to a widget?

Widget settings live in the saved widget, created with save_widget. The slot div only says where it goes, and must not include a domain or URL.

Will widgets work with React Router?

Yes. Place slots in route components and load the script once at the app root, so it does not reload every time the route changes.

Written by The Savvy Studio team, AGNT AI Inc. · since 2022

Savvy Studio is the website platform behind 800+ agent sites on AGNT. Questions? Text (737) 378-8983.

Last updated Updated November 2026

See it first

Try Savvy Studio in the self-guided demo.

Website $99/mo or $990/yr · IDX $99/mo + $99 setup · DIY no setup fee

Try the self-guided demo →Get started