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.

Start 7-Day Free Trial See Examples

Try free for 7 days. No coding required.

Step 1: Set Up Your Directory

Before adding anything to Webflow, build your directory in EmbedDirectory:

Set up your listing fields (what info each listing shows)
Add your listings (manually, CSV import, or Google Sheets sync)
Customize your widget (layout, colors, search, filters)

Step 2: Get Your Embed Code

Go to Embed in your EmbedDirectory dashboard
Copy the embed code

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: Enable User Submissions (Optional)

Let visitors submit listings for your review by connecting a form builder integration — choose from JotForm, Typeform, or Tally.

Incoming submissions appear in Submissions, where you review and approve them before they go live.