You can show your PartnerPage directory inside a page of your own website, either with the PartnerPage widget script or with a plain iframe. If you'd rather have the whole directory on your own domain, use a custom domain or a reverse proxy instead. This article is for vendors and their web developers.

Who can do this: anyone who can edit your website; no PartnerPage role is needed · Availability: all directories

Embed or own domain: which to choose

PartnerPage gives you three ways to put the directory on your website. The following table compares them.

	Widget or iframe (this article)	Custom domain (DNS)	Reverse proxy
Where the directory appears	Inside a box on one of your pages	On a subdomain, such as partners.yourdomain.com	On a path, such as yourdomain.com/partners
Address bar as visitors browse	Stays on your page (the widget can add the directory's path after a #)	Changes with each page	Changes with each page
Search engines	Index the directory at its own address, not as part of your page	Index the pages on your domain	Index the pages on your domain
Setup	Paste a snippet into your page	One DNS record	A rule in your CDN or web server

For search visibility and shareable profile links, a custom domain or reverse proxy works best: see Use your own domain for your directory. Embedding suits a page where the directory is one part of a larger page.

Before you start: find your directory ID

The widget needs your directory ID, a long code such as 3fa85f64-5717-4562-b3fc-2c963f66afa6. No dashboard screen shows the embed code or labels the ID, so find the ID one of these ways:

Open the directory in your dashboard. The address bar shows directory.partnerpage.io/directories/<directory ID>/....
In Customizations > URLs (Admin role), click Reverse proxy. The address under 2. Locate your CDN configuration guide is https://<directory ID>.directory.sites.partnerpage.io: your directory ID is the part between https:// and the first dot. Leave the page without saving if you don't use a reverse proxy.

Embed the directory with the PartnerPage widget

The PartnerPage widget loads your directory in a frame and lets you hide parts of it. To embed the directory with the widget, add this to your page, with your own directory ID:

<div id="partner-directory" style="width: 100%; height: 800px;"></div>
<script src="https://sdk.partnerpage.io/widgets.js"></script>
<script>
  window.PartnerPageWidgets.public.directory(
    '#partner-directory',
    { directoryId: 'YOUR-DIRECTORY-ID' },
    {},
    { autoRouteBinding: true }
  );
</script>

The directory fills the box and scrolls inside it, so give the box a fixed height. With autoRouteBinding: true, the directory's current page is added to your page's address after a # (for example #/partner/northwind-consulting), so visitors can share or reload a profile. If you load the script with async, wait for the partnerpagewidgetsready event on window before calling PartnerPageWidgets.

Use one widget per page.

Widget options

Pass options in the second argument, for example { directoryId: 'YOUR-DIRECTORY-ID', hideNavbar: true }. The following table lists them.

Option	What it does
`directoryId`	Required. Your directory ID.
`initialRoute`	The page the directory opens on, such as `/apply`. Ignored when `autoRouteBinding` is `true`: the directory then opens on the page after the # in your address.
`hideNavbar`, `hideFooter`, `hideBottomBar`	Hide the navigation bar, the footer or the PartnerPage bar at the bottom.
`hideDirectoryFirstSection`, `hideDirectorySecondSection`, `hideDirectoryLastSection`	Hide those sections of the directory page.
`hideDirectoryMainSection`, `hideDirectoryMainSectionTitle`	Hide the partner list, or only its title.
`hideFeaturedEntries`	Hide the featured partners section.
`hideSearchField`, `hideFilters`, `hideSortField`, `hideAvailabilityToggle`	Hide the search box, the filters, the Sort by menu or the availability toggle.

In the third argument, onRouteChange receives the directory's path each time the visitor moves to another page. The widget function returns an object whose sendMessage('change-route', '/apply') moves the directory to another page.

Embed the directory with a plain iframe

A plain iframe is the simplest embed, without the widget's options. Use your directory's address, such as https://acme.partnerpage.io or your custom domain:

<iframe src="https://partners.yourdomain.com" title="Partner directory"
  style="width: 100%; height: 800px; border: 0;"></iframe>

React when a visitor submits a form

When a visitor finishes the partner application or the matchmaking form inside an embedded directory, the thank-you page sends your page a partnerpage:form-submitted message. The message works with the widget and with a plain iframe, and carries no visitor details. To scroll the directory into view after a submission, for example:

<script>
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://partners.yourdomain.com') return;
    if (event.data?.type !== 'partnerpage:form-submitted') return;
    // event.data.form is 'partner-application' or 'matchmaking'
    document.querySelector('#partner-directory').scrollIntoView({ behavior: 'smooth' });
  });
</script>

Check the origin against the address the frame loads. With the widget, that is https://<directory ID>.directory.sites.partnerpage.io. The message isn't sent for contact, review, deal registration or Get Listed forms. If a thank-you page has a return link, the link opens in the whole browser tab, not inside the frame.

What you can't do

Copy an embed code from the dashboard: use the snippets in this article.
Make the box grow with the directory's content: give it a fixed height.
Put two widgets on the same page.
Have search engines count the embedded directory as part of your page: use a custom domain or reverse proxy for that.

Embed your directory on your website