Skip to main content

How to Embed RealtyVis in Webflow

Webflow is a powerful website builder that lets you design, build, and launch responsive websites without writing any code. You can add interactive MLS property searches to your Webflow project to enhance its functionality and appearance. With RealtyVis you can show property listings, perform searches in niche pages and capture leads and user analytics by embedding RealtyVis on your website.

Fortunately, Webflow makes it easy to embed RealtyVis in your project using the Embed element. The Embed element allows you to insert any custom code that you want to display on your website. You can use the Embed element to add any code that is compatible with HTML, CSS, or JavaScript.

1. Build your RealtyVis Map Search and Generate Embed Code​

Login to your RealtyVis account and add a new Map Search Block. Customize the search options to define which listings will show up in the search. If you are creating niche pages for your real estate website, you can also check out our Map Search section for ideas, or click on one of the guides below:

  • How to Create Full Screen Maps

  • Increase the Performance of the RealtyVis Map Search

  • The Benefits of Purpose-Built, Filtered Real Estate Property Maps

When your map search is ready, click Save changes in the top right corner of the screen. Copy the HTML code in the Embed Code box using the keyboard shortcut use the keyboard shortcut Ctrl+C (Windows) or Command+C (Mac) or simply click on the Copy button.

2. Embed your RealtyVis Map Search in a Webflow Page​

Open your Webflow site designer from your Dashboard and go to the page where you want to embed the MLS listings search. You can use the Pages panel on the left to navigate between pages.

Click on Add Element in the upper left corner of the Designer. From the Add panel, drag and drop an Embed element under Advanced to the location where you want the property search to appear. You can place the Embed element inside any container, section, or layout element.

When the HTML Embed Code Editor pops up, paste the code that you copied from RealtyVis. You can use the keyboard shortcut Ctrl+V (Windows) or Command+V (Mac) to paste the code.

3. Save and Publish your Webflow Site​

Save and close the HTML Embed Code Editor by clicking the Save & Close button on the bottom of the dialog. Publish your project by clicking on the Publish button on the top right to see how the RealtyVis search function looks on the live site.

That’s it! You have successfully embedded a RealtyVis Search in your Webflow project. You can use this method to embed any other RealtyVis Block that you want to add to your website.