How to Add a Searchable Directory to Your Webflow Site

Add a searchable, filterable directory to any Webflow page using an Embed element. No custom code required.

Webflow's CMS is powerful, but building a searchable, filterable directory from scratch takes a lot of work. Here's a faster way.

Before You Start

You'll need an EmbedDirectory account to create and embed a searchable directory on your Webflow site. Just copy-paste an embed code.

Create My Directory See Examples

Try free for 7 days. No coding required.

Step 1: Set Up Your Directory

Everything gets configured in EmbedDirectory first — Webflow just displays the result. Make sure you've:

Created your fields (the data structure for each listing)
Populated your directory (manual entry, CSV, or Google Sheets)
Configured the widget (layout, brand colors, filters)

Step 2: Grab Your Embed Code

Open Embed in your EmbedDirectory dashboard and copy the snippet.

Step 3: Add to Your Webflow Site

Open the Webflow Designer on the page where you want your directory
From the Add Elements panel (shortcut: A), drag an Embed element onto the page
Paste your embed code into the code editor
Click Save & Close
Position and size the Embed element as needed (full-width works best)
Publish your site

The directory won't render in the Webflow Designer preview. Publish your site or use the staging preview URL to see it live.

Tip

For a clean layout, place the Embed element inside a full-width container or section with no horizontal padding.

Step 4: Style to Match Your Webflow Site

EmbedDirectory has built-in color and typography controls in Widget Settings. If you need more control, use Custom CSS to match your Webflow design system exactly.

Step 5: Collect Submissions (Optional)

If you want people to submit listings through a form, connect JotForm, Typeform, or Tally. Responses go to your Submissions dashboard for approval before they show up in the directory.