Product Features Try Our Examples Pricing
Log in
Getting Started

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

20 minutes
Beginner
Updated February 2025
Learn how to create and embed a powerful interactive directory anywhere on your website in minutes, without touching a line of code. This comprehensive guide shows you how to build a simple yet feature-rich directory that grows with your needs - from basic search to advanced filtering and optional map integration - all easily embedded on any webpage. Whether you're creating a searchable listing table, business directory, member database, community map, resource library, or location-based guide - you'll learn everything needed to launch a professional directory that engages visitors and organizes your content beautifully.

Before getting started, you'll need an EmbedDirectory account. Sign up here.

Step 1: Set Up Your Directory Fields

Your directory starts with defining the information structure for each listing. While EmbedDirectory includes some common but optional fields by default, such as name, description and address (for location based directories) you can create additional fields and listing elements for your specific needs.

How to Configure Fields:

  1. Log in to your dashboard
  2. Navigate to Set Up Listing Fields
  3. Click "Add Field"
  4. Choose from additional optional available field types:
    • Text fields (names, descriptions)
    • Images (logos, photos)
    • Links (website, social media)
    • Buttons
    • Categories (tags, types)
    • Contact information (phone, email)
    • Location data (address, coordinates)
    • And more...

Think about what information visitors will want to search and filter by. You can always modify fields later.

Have questions about configuring fields? We're here to help: hello@embeddirectory.com.

Step 2: Add Your Listings

Now that your fields are set up, let's add some listings:

Option 1: Add Listings Manually

  1. Go to Manage Listings
  2. Click "Add New Listing"
  3. Fill in your defined fields
  4. Save the listing

Option 2: Import Listings

  1. Go to Import Listings
  2. Upload a CSV file with column names in the top row.
  3. Map your CSV columns to the EmbedDirectory fields and see a preview of the mapping
  4. Run the import to add your locations

Need help importing your data or questions about your data format? Contact us at hello@embeddirectory.com for assistance with custom imports or data migration.

Step 3: Configure Your Directory Widget

Here, you'll configure the core settings for your directory, including brand colors, layout, and more. This ensures your directory looks and feels like an integrated part of your website.

Layout & Design

  1. Go to Widget Settings
  2. Choose your preferred layout
  3. Select your brand colors, background colors and other key settings.

Search & Filters

Configure your search and filtering options based on your needs—add as many search bars and filters as you want, or none at all.

Add search bars and filters (Optional – mix and match as needed)

  • Drag and drop to reorder them
  • Set labels/placeholders for each ("Search by name" or "Filter by type")
  • Choose which fields each search/filter option searches or filters on
  • Filters work best for category/tag-based fields
  • Add toggle-style filters (e.g., “Show Featured Locations”) based on text matches or other criteria

Once done, save your settings and preview how your directory works. Adjust as needed.

Have questions about configuring your directory with the search options and filters you need? Email us at hello@embeddirectory.com for assistance.

Step 4: Add Map Features (Optional)

Want to show your listings on an interactive map?

  1. If you'd like to show your listings on a map, make sure those listing have addresses added. Locations without an address cannot be mapped.
  2. Go to Map Settings
  3. Enable map features
  4. To use the optional mapping and geo features, you'll need to link EmbedDirectory to a Mapbox account you create. Mapbox will power the map component.
  5. Add your Mapbox token
  6. Customize map appearance:
    • Choose map style
    • Set marker colors
    • Configure clustering options

Mapbox offers generous free tiers, including 50,000 map loads free per month. If your usage exceeds the free limit, additional costs may apply. If you have concerns about high usage or pricing before signing up, feel free to contact us.

Step 5: Add to Your Website

Time to add your directory to your website.

Adding your directory is quick and easy—just a one-time copy-paste into your site where you want it to appear. You can place it on a public page or within a private area—it's up to you.

  1. Go to Embed
  2. Copy the embed snippet
  3. Paste it into your website's page editor in the desired location.

For most platforms, you’ll embed it in:

  • WordPress/Shopify → Paste into the text editor (HTML mode).
  • Squarespace/Wix/Webflow → Use a code block or HTML element. Check our platform-specific tutorials for more details.

Need help with installation? Check our platform-specific guides or contact our support team at hello@embeddirectory.com.

Step 6: Enhance Your Directory

Now that your directory is live, here are a few ways to expand its functionality:

Customize Your Design

Want the directory to match your brand?

  • Email us at hello@embeddirectory.com with a link where you've embedded it
  • Our team can help adjust styles for a seamless fit.

Enable User Submissions

Allow visitors to submit or edit their own listings, with the option to review entries before they go live.

  • Go to Submissions Settings
  • Enable submissions and customize the submission form fields.
  • Share the submission form with visitors or embed it on your site
  • Manage and approve listings
Ready to get started?