> ## Documentation Index
> Fetch the complete documentation index at: https://help.kenekt.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Website Widget

> Show your packages or saved lists on your own website with a single embed code, or call the same feed from a site you build yourself.

The Website Widget puts your listings on your own website: filters, property cards, a detail view and an enquiry form, all on your domain. Setting it up is four steps on one page: choose what to show, choose the API key, match your brand, then copy the embed.

## What the widget can show

Each choice is one feed. The widget reads from it, and so can a website you build yourself.

| Choice | Feed | What appears |
| - | - | - |
| **Website packages** | `/api/v1/agency/website_packages` | Only the packages you publish to your website from the Distribution page. Needs the **Website** connector switched on under **Agency Settings** → **Connectors**. |
| **Marketplace** | `/api/v1/marketplace/packages` | Your listings plus partner inventory, priced through the key's user. |
| **Saved lists** | `/api/v1/agency/list_packages` | Every list you switch on for your website. |

The rest of this page covers saved lists, the choice most agencies use.

## How your saved lists reach your website

Every list you switch on for your website feeds the same widget. Your website shows all of them together.

```mermaid theme={null}
flowchart LR
  A["Central Coast list<br/>saved search + packages you added"] -->|On| W["Your website"]
  B["Hunter Valley list<br/>saved search + packages you added"] -->|On| W
  C["Lake Macquarie list"] -.->|Off| X["Not on your website"]
```

For each list that is switched on, your website shows:

* **Packages matching the list's saved search.** New stock that matches appears on its own, with no need to add it.
* **Packages you added to the list by hand**, even when they fall outside the search.
* **Nothing you removed from the list.** Removing a package keeps it off your website, even if it still matches the search.

A few rules apply to every list:

* Only **available** packages appear.
* A list only shows stock its **owner** can see in the portal.
* A package removed from one list still appears if **another** switched-on list includes it.

<Tip>
  If you curate stock by region, keep one list per region and switch them all on. Keep adding packages to whichever list they belong in, the way you do today, and your website follows.
</Tip>

## Before you start

* Your agency needs a portal site, and the **Website widget** switch at the top of the Website Widget page must be on.
* Staff can open the Website Widget page. Only **administrators** can switch lists on or off there.
* You need an API key with the scope of the feed you choose: **website\_packages**, **marketplace** or **lists**. Create it on a dedicated user, such as `website@yourcompany.com.au`, with no other scopes, so the key can only read that feed. See [API Keys](/help-guide/08-integrations/04-api/01-api-keys/index).

## Put your lists on your website

<Steps>
  <Step title="Open the Website Widget">
    Go to **Agency Settings** → **Connectors** and click **Website Widget**.

    <img src="https://mintcdn.com/kenekt/Aofmz-Q53WQQIf4l/help-guide/08-integrations/09-website-widget/connectors.png?fit=max&auto=format&n=Aofmz-Q53WQQIf4l&q=85&s=e23c1718340f9761b98ee7c71ea97485" alt="The Connectors page with the Website Widget row" width="1400" height="554" data-path="help-guide/08-integrations/09-website-widget/connectors.png" />
  </Step>

  <Step title="Choose what your website shows">
    Under step 1, choose **Saved lists**. Every list in your agency appears below with its owner and list ID. Switch on each list you want on your website. Each switch saves straight away.

    <img src="https://mintcdn.com/kenekt/dRK0KexoabHJ12qe/help-guide/08-integrations/09-website-widget/widget-endpoint.png?fit=max&auto=format&n=dRK0KexoabHJ12qe&q=85&s=a7f2a83680069439615fe7a0aab7dd71" alt="Step 1 with Saved lists chosen and the list switches" width="1400" height="571" data-path="help-guide/08-integrations/09-website-widget/widget-endpoint.png" />
  </Step>

  <Step title="Choose the API key">
    Under step 2, pick the key you created with the **lists** scope. Only keys with that scope are offered. If none is listed, click **Create a key**.

    <img src="https://mintcdn.com/kenekt/dRK0KexoabHJ12qe/help-guide/08-integrations/09-website-widget/widget-api-key.png?fit=max&auto=format&n=dRK0KexoabHJ12qe&q=85&s=5038fafe56be4720e76ccf5fe4c10d9e" alt="Step 2, the API key picker" width="1400" height="208" data-path="help-guide/08-integrations/09-website-widget/widget-api-key.png" />
  </Step>

  <Step title="Match your brand">
    Under step 3, set the primary, secondary and accent colours. Click **Save** to keep them.
  </Step>

  <Step title="Copy the embed">
    Under step 4, pick the tab that fits your site. **Script tag** works on any HTML page. **Wix and site builders** gives you a custom element with steps for Wix, Squarespace and Webflow. Click **Copy** and paste the code where the listings should appear.

    <Frame caption="The embed code shows YOUR-API-KEY until you pick a key.">
      <img src="https://mintcdn.com/kenekt/dRK0KexoabHJ12qe/help-guide/08-integrations/09-website-widget/widget-embed-code.png?fit=max&auto=format&n=dRK0KexoabHJ12qe&q=85&s=ad84b1574d1219dd24848c7169258464" alt="Step 4, the script tag embed for your saved lists" width="1400" height="502" data-path="help-guide/08-integrations/09-website-widget/widget-embed-code.png" />
    </Frame>
  </Step>
</Steps>

You only paste the code once. Switching a list on or off later changes your website straight away, with no change to the code.

## Build your own listings page

If your website renders its own listings, skip the widget and call the feed directly. The **API, no widget** tab in step 4 shows the endpoint for the choice you made in step 1, and a ready-to-run request that sends your key as a Bearer token.

<img src="https://mintcdn.com/kenekt/dRK0KexoabHJ12qe/help-guide/08-integrations/09-website-widget/widget-api.png?fit=max&auto=format&n=dRK0KexoabHJ12qe&q=85&s=67d6b8be1097520933df3b047f8434e8" alt="Step 4, the API tab with the endpoint and a sample request" width="1400" height="366" data-path="help-guide/08-integrations/09-website-widget/widget-api.png" />

Filters, sorting, pagination and the package fields are in the [API reference](/api-reference).

## Let list owners switch on their own lists

A list's owner can also put it on the website from the portal: open the list, click **Share**, and tick **Serve this list to the website widget**. It then appears switched on in the Website Widget page too.

## Show just one list

To show a single list on a page, add its list ID to the embed code. You'll find the ID next to each list on the Website Widget page, and the list's **Share** window in the portal gives you this code ready to copy.

```html theme={null}
<div id="kenekt-listings"></div>
<script src="https://YOUR-SUBDOMAIN.kenekt.app/widget/kenekt-list.js"></script>
<script>
  KenektWidget.init({
    apiKey: "YOUR-API-KEY",
    list: "LS-123456",
    container: "#kenekt-listings"
  })
</script>
```

The list must still be switched on for your website.

## Troubleshooting

| What you see | Why |
| - | - |
| The widget shows nothing | No list is switched on, or the API key doesn't have the scope of the feed you chose |
| Website packages shows nothing | The Website connector is off, or no package has been published to your website from the Distribution page |
| A package you added is missing | It isn't available, or the list's owner can't see it in the portal |
| A package you removed still shows | Another switched-on list includes it |
| A package you never added appears | It matches a list's saved search. Remove it from that list to hide it |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.