Embed your directory on any website
Your directory lives at directories.ai/your-directory, and it can also show up inside other sites: your main website, a chamber or association page, a partner's resources page, a blog post. Every embed shows your published listings, with search and category filters, and keeps itself up to date as you edit them.
The quickest way to get the code is Settings → Embed in your directory's dashboard, which has a live preview. Or ask your AI assistant: the MCP tool get_embed_code returns the same snippets.
Five ways to embed
Script snippet
Paste into any page that allows HTML and scripts (WordPress, Webflow, Wix custom code, plain HTML). Inherits nothing from your site’s CSS, so it looks the same everywhere.
<div data-directories-ai="your-directory">
<a href="https://directories.ai/your-directory">Your Directory</a>
</div>
<script src="https://directories.ai/embed/directory.js" async></script>Web component
The same widget as a <directories-ai-directory> tag, for React, Vue, Astro, Svelte or hand-written HTML.
<script src="https://directories.ai/embed/directory.js" async></script>
<directories-ai-directory slug="your-directory">
<a href="https://directories.ai/your-directory">Your Directory</a>
</directories-ai-directory>iframe
For builders that only take an iframe or embed URL (Squarespace, Notion, Google Sites, Carrd).
<iframe src="https://directories.ai/your-directory/embed"
title="Your Directory" loading="lazy"
style="width:100%;height:720px;border:0;border-radius:12px"></iframe>Link button
A styled link to your directory with no script. Works in emails, newsletters and locked-down site builders.
<a href="https://directories.ai/your-directory" style="display:inline-block;padding:10px 18px;border-radius:8px;background:#2563eb;color:#fff;font:600 15px/1.2 system-ui,sans-serif;text-decoration:none" target="_blank" rel="noopener">Browse Your Directory</a>JSON feed
Your published listings as JSON, for developers who want to render them their own way. CORS is open, no key needed.
https://directories.ai/your-directory/listings.jsonOptions
Add them as data-* attributes on the div, plain attributes on the web component, or query parameters on the iframe URL. For example data-layout="list" data-accent="#0f766e".
| Option | Values (default) | What it does |
|---|---|---|
| layout | grid · list · compact | Cards, a single column, or names only |
| theme | light · dark · auto | auto follows the visitor’s light or dark setting |
| accent | #rrggbb | Links, focus rings and hover colour |
| limit | 1–200 (24) | How many listings to load |
| category | a category name | Only listings in that category |
| search | true · false | Search box and category filter above the listings |
| header | true · false | Your directory’s name and description |
| new-tab | true · false | Open listings in a new tab (newTab in iframe URLs) |
Where to paste it
WordPress
Add a Custom HTML block and paste the script snippet. Page builders (Elementor, Divi) have an HTML widget that works the same way.
Webflow
Drop an Embed element where the directory should go and paste the script snippet.
Wix
Add Embed Code → Embed HTML, choose Code and paste the script snippet. Wix shows it in a frame, so set a tall height.
Squarespace
Add a Code block and paste the script snippet, or an Embed block with the iframe URL.
Shopify
In a page or section, add a Custom Liquid or Custom HTML block and paste the script snippet.
Notion, Google Sites, Carrd
Use the iframe URL (directories.ai/your-directory/embed) with the builder’s Embed option.
React, Next.js, Vue, Astro
Load the script once, then use the <directories-ai-directory> tag like any other element. Or fetch listings.json and render it yourself.
Emails and newsletters
Scripts and iframes don’t run in email, so use the link button.
Good to know
- Only published listings of a public directory are shown. Drafts, contact records and internal fields never are.
- Changes reach embeds within about five minutes.
- The script widget renders inside a Shadow DOM, so your site's CSS can't break it and it can't restyle your site.
- Each listing links to its page on your directory, so the embed sends visitors (and their clicks) back to you.
- Search engines index content on your own pages best, so the embed works alongside your directory's own site rather than replacing it. For a full site on your own domain, see publishing your directory.
- Need writes, drafts or private fields? Use the REST API or the MCP server instead of the public feed.