Embed your whole directory
One script tag puts your directory on your own site: search, category filters, the listing grid, a page for every listing with its reviews, and an inquiry form that lands in your dashboard.
Available on every plan today, with a small "Powered by DirectoryDuck" link under the directory (Pro directories can hide it in Settings, Branding). Featured listings (Starter and up) show first, with a Featured badge.
The snippet
Paste this where the directory should appear. Replace YOUR_API_KEY with your directory's API key, or copy the snippet with your key already filled in from your directory's Settings in the dashboard.
<div id="directoryduck"></div>
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>- The directory draws inside its own Shadow DOM, so your site's CSS can't break it and it can't change your site. It uses your site's font and fills the width of its container.
- Listing pages open at
#/listing/listing-nameon the same page, so the back and forward buttons work and nothing needs setting up on your server. - Use one full-directory embed per page. Changes you make in the dashboard appear within a few minutes.
Step by step for your platform
Plain HTML
- Open the page in your editor.
- Paste the snippet inside <body>, where the directory should appear.
- Save and upload the page.
<div id="directoryduck"></div>
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>To try it first, save the snippet as test.html on your computer and open it in a browser.
WordPress
- Edit the page where the directory should appear.
- Add a Custom HTML block (click +, search "Custom HTML").
- Paste the snippet into the block.
- Click Update (or Publish) and open the live page.
<div id="directoryduck"></div>
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>WordPress removes scripts for users without permission to post unfiltered HTML, and WordPress.com allows scripts only on plans that support custom code. If the script is gone after saving, save as an administrator or insert it with a code-snippets plugin.
Webflow
- Open the page in the Designer.
- From the Add panel, drag a Code Embed element where the directory should appear.
- Paste the snippet and click Save & Close.
- Publish the site and open the published page.
<div id="directoryduck"></div>
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>Scripts do not run inside the Designer canvas: check the published site. Webflow runs custom code only on plans that include it.
Framer
- On the page where the directory should appear, insert an Embed component, set its type to HTML, and paste the container line below. Make it full width and tall enough for the directory.
- Open Site Settings, then General, then Custom Code. Paste the script line below into "End of <body> tag" and save.
- Publish and open the published page.
Container (in the Embed component)
<div id="directoryduck"></div>Script (in Custom Code)
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>The script runs on every page but only draws where it finds the container, including after Framer switches pages without a reload.
Shopify
- In Shopify admin, open Online Store, then Pages, and create the page for your directory (for example "Directory").
- Open Online Store, then Themes, then Customize. Pick the page template that page uses (create a new page template if you want the directory on that page only).
- Click Add section, choose Custom Liquid, and paste the snippet.
- Click Save and open the page.
<div id="directoryduck"></div>
<script src="https://directoryduck.com/widget/embed.js" data-key="YOUR_API_KEY" async></script>Custom Liquid is available in Online Store 2.0 themes (Dawn and most current themes).
Options
Add these attributes to the <script> tag, for example data-theme="dark" data-accent="#4F46E5".
| Attribute | Values | Description |
|---|---|---|
data-key | your API key | Required. Your directory’s API key (Settings → API Key). |
data-theme | light | dark | auto | Color theme. auto follows the visitor’s system setting. Default light. |
data-accent | #RRGGBB | Accent color for links, buttons and highlights. Default #0D9488. |
data-page-size | 6 to 60 | Listings shown before "Show more". Default 12. |
data-target | CSS selector | Where to draw the directory. Default #directoryduck. |
data-scroll-offset | pixels | Height of a sticky header, so opening a listing scrolls below it. Default 0. |
Search engines
The embed is drawn by JavaScript in your visitor's browser, and its listing pages are #/ addresses on one page of your site. Search engines may not index the listings as part of your page, and they can't index each listing on its own. If search traffic matters, link to your hosted directory at directoryduck.com/your-name as well: it is rendered on the server, with its own page for every listing.
Traffic and rate limits
The embed reads your directory through our CDN cache, so busy pages don't use up your API rate limit (100 reads a minute per directory): reads answered from the cache don't count, only the refreshes, about once a minute. Directories with up to 500 published listings load once and search in the browser. Larger directories search through the API, and each new search counts as a read. Inquiries count against the 50 writes a minute limit.
Not showing up?
- Check the published page, not the editor preview: most site builders don't run scripts in their editors.
- Make sure the page still has
<div id="directoryduck"></div>and the script tag after you save: some editors and plans strip scripts. - Open your browser's console and look for messages starting with
[DirectoryDuck]: they name the problem, such as a wrong API key. - Only published (Active) listings appear. If you regenerate your API key, update the snippet.
Need a single widget instead?
Reviews, ratings, verified badges, a listings grid and forms are also available as separate widgets.