How to Add a Searchable Directory to Your Website (Step-by-Step Guide)

Add a searchable, filterable directory to any website in minutes. Works on WordPress, Squarespace, Shopify, Wix, Webflow, and any platform that supports HTML.

Before You Start

You'll need an EmbedDirectory account. Pick your fields, add your listings, and embed a searchable directory on your site, all from the dashboard.

Start 7-Day Free Trial See Examples

Try free for 7 days. No coding required.

Step 1: Set Up Your Fields

Every listing has a name, description, and address by default. Add more fields for whatever else you need.

1. Go to Listing Fields
2. Click Add Field
3. Pick a type:
   • Text & Textarea: names, titles, descriptions, hours, pricing
   • Links & Buttons: website URLs, CTAs
   • Phone: tap-to-call numbers
   • Categories/Tags: group listings by type, cuisine, industry, etc.
   • Images: photos, logos, galleries
   • Social Icons: Facebook, Instagram, LinkedIn, etc.
4. Click Save Fields

You can always add, remove, or reorder fields later.

Step 2: Add Your Listings

Manually: go to Manage Listings, click Add New Listing, fill in your fields, and save.

From a spreadsheet: go to Import, upload a CSV, map your columns, and import. See Import from Spreadsheet.

From Google Sheets: connect a Google Sheet and keep your directory in sync automatically. See Google Sheets Sync.

Step 3: Design & Search

Layout

1. Go to Widget Settings
2. Choose a layout (grid, list, or map-first)
3. Set your brand colors and styling

Search & Filters

Add any combination of search and filter options:

• Search Bar: keyword search
• Dropdown Filter: filter by category
• Toggle Filter: on/off filters like "Featured"
• Range Filter: filter by price, rating, etc.
• Location Search: find nearby listings

Drag to reorder. Set labels and placeholders. Save and preview.

Step 4: Map (Optional)

Show your listings on an interactive map:

1. Make sure listings have addresses
2. Go to Map Settings and enable map features
3. Create a free Mapbox account and add your access token
4. Set your map style, marker colors, and clustering

Step 5: Embed on Your Website

1. Go to Embed
2. Copy the embed snippet
3. Paste it into your website

That's it. One copy-paste and your directory is live.

Platform-specific instructions:

• WordPress: paste into a Custom HTML block. See WordPress Guide.
• Squarespace: paste into a Code Block. See Squarespace Guide.
• Shopify: paste into a page or Custom Liquid section. See Shopify Guide.
• Wix: add an HTML embed element and paste the code. See Wix Guide.
• Webflow: add an Embed element and paste the code. See Webflow Guide.

Step 6: Extras

Accept Submissions via Form Builders

Let visitors submit listings for your review by connecting a form builder. Each submission goes to your approval queue — nothing goes live until you approve it.

See the form builder integrations overview to choose between JotForm, Typeform, and Tally.

Automate with Zapier

Connect your directory to thousands of apps and create or update listings automatically. See the Zapier guide.

Custom Styling

Want the directory to match your site exactly? Email us at hello@embeddirectory.com with a link to your page and we'll help.