Widgets Guide

Embed DirectoryDuck widgets on your website. Copy-paste embed codes to display reviews, ratings, and listings anywhere.

Want the whole directory? One script tag puts search, every listing page and the inquiry form on your site. Embed your directory →

Quick Start

1
Get your API key
Open your directory's Settings in the dashboard. The API key and a ready-made embed code are there.
2
Choose a widget
Select the widget type you want to embed.
3
Copy the embed code
Copy the snippet and replace YOUR_API_KEY and your-listing-slug with your own values.
4
Paste into your site
Add the code to your website HTML where you want the widget to appear.

Available Widgets

Verified Badge

Show a "Verified" badge for a listing your directory has verified. Perfect for building credibility.

Preview:✓ Verified

Embed Code

<span id="directoryduck-badge"
      data-listing="your-listing-slug"
      data-theme="light"
      data-size="md">
</span>
<script src="https://directoryduck.com/widget/badge.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-listing`	listing slug	Required. The listing to show
`data-theme`	light \| dark	Color theme (default light)
`data-size`	sm \| md \| lg	Badge size (default md)
`data-show-unverified`	true \| false	Show a "Not Verified" badge instead of nothing (default false)

Rating Summary

Display the average star rating and review count for a listing. Updates as new reviews are approved.

Preview:★★★★★ 4.8 (142 reviews)

Embed Code

<div id="directoryduck-rating"
     data-listing="your-listing-slug"
     data-theme="light"
     data-layout="compact">
</div>
<script src="https://directoryduck.com/widget/rating.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-listing`	listing slug	Required. The listing to show
`data-theme`	light \| dark	Color theme (default light)
`data-layout`	compact \| card \| inline	Display style (default compact)

Reviews Feed

Show the approved reviews for a listing. Great for social proof on landing pages.

Preview:List of reviews with ratings and comments

Embed Code

<div id="directoryduck-reviews"
     data-listing="your-listing-slug"
     data-theme="light"
     data-max="5">
</div>
<script src="https://directoryduck.com/widget/reviews.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-listing`	listing slug	Required. The listing to show
`data-theme`	light \| dark	Color theme (default light)
`data-max`	number	Number of reviews to show (default 5)

Listings Grid

Embed your entire directory or a filtered subset on any webpage, with search and category filters.

Preview:Grid of listing cards with logos, names, and ratings

Embed Code

<div id="dk-listings"
     data-layout="grid"
     data-limit="12"
     data-theme="light">
</div>
<script src="https://directoryduck.com/widget/listings.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-layout`	grid \| list	Layout style (default grid)
`data-limit`	number	Listings per page (default 12)
`data-category`	category name	Start filtered to one category
`data-show-search`	true \| false	Show search bar (default true)
`data-show-categories`	true \| false	Show category filter (default true)
`data-theme`	light \| dark	Color theme (default light)

Review Form

Collect new reviews for a listing. Submissions wait for your approval before they appear.

Preview:Star picker with name, email, title, review, pros, and cons fields

Embed Code

<div id="directoryduck-form"
     data-listing="your-listing-slug"
     data-theme="light">
</div>
<script src="https://directoryduck.com/widget/form.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-listing`	listing slug	Required. The listing to show
`data-theme`	light \| dark	Color theme (default light)

Inquiry Form

Embed a contact form. Inquiries arrive in your DirectoryDuck dashboard, linked to the listing if you set one and it is published.

Preview:Contact form with name, email, company, phone, subject, and message fields

Embed Code

<div id="directoryduck-inquiry"
     data-listing="your-listing-slug"
     data-theme="light">
</div>
<script src="https://directoryduck.com/widget/inquiry.js"
        data-api-key="YOUR_API_KEY"
        async>
</script>

Customization Options

Attribute	Values	Description
`data-listing`	listing slug	Optional. Links the inquiry to this listing only if the listing is published (status Active); otherwise the inquiry still arrives, unlinked
`data-theme`	light \| dark	Color theme (default light)
`data-title`	string	Form heading (default "Get in Touch")
`data-description`	string	Text under the heading
`data-submit-text`	string	Submit button text (default "Send Inquiry")
`data-show-company`	true \| false	Show company field (default true)
`data-show-phone`	true \| false	Show phone field (default true)
`data-show-subject`	true \| false	Show subject field (default true)

Custom Styling

Each widget adds a class to its container (dk-badge-widget, dk-rating-widget, dk-reviews-widget, dk-listings-widget, dk-form-widget, dk-inquiry-widget). Override the default styles by targeting those classes from your own stylesheet.

/* Custom widget styles */
.dk-listings-widget {
  font-family: 'Inter', sans-serif;
}

.dk-listings-widget .dk-listing-card {
  border-radius: 12px;
}

Need Help?

Can't get a widget working? We're here to help you integrate DirectoryDuck into your site.

Contact Support API Reference