Publisher JavaScript Plugin

Integrate Indeed features into your job board or publisher site by making only front-end changes.

 

Overview

The Publisher JavaScript Plugin enables you to integrate the job search feature into your job board or publisher site by making only front-end changes.

The plugin's job search feature shows jobs from Indeed and Indeed PLUS job boards on your site.

The job search feature enables job seekers on your site to view a list of jobs from a query that you specify. Each job has its own job card with information about the job and a link to the job on Indeed.

From the pool of all Indeed PLUS jobs, Indeed provides a subset of jobs that you can display on your site. For more information, contact your Indeed representative.

---

Browser support

The plugin works only on HTTPS pages. It supports these browsers:

Supported browsers

Operating system	Chrome	Firefox	Safari	Edge (Chromium)
Linux	✅	✅	N/A	✅
macOS	✅	✅	✅	✅
Windows	✅	✅	N/A	✅
Android	✅	❌	N/A	❌
iOS	✅	❌	✅	❌

---

Steps

1. Before you begin

You must be an Indeed partner. To get access to the plugin, contact your Indeed representative.

---

2. Load the plugin script

Add this <script> tag to each page that shows the plugin:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer></script>
  </head>
</html>

---

3. Test the plugin

During setup, you give Indeed the domain names of the sites that use the plugin. You can give one domain for your production environment and one for your test environment.

When the plugin loads on your test domain, it runs in test mode. Test mode works the same as production, except the View job button is disabled.

---

4. Enable job search

To show the job search UI, add an HTML element with data-indeed-* attributes where you want the UI to appear. For example:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://plugins.indeed.com/publisher-plugin/main.js" crossorigin defer></script>
  </head>
  <body>
    <div data-indeed-plugin-type="<PLUGIN-TYPE>" 
         data-indeed-partner-app-id="<PARTNER-APP-ID>" 
         data-indeed-placement-id="<PLACEMENT-ID>" 
         data-indeed-search-limit="<SEARCH-LIMIT>" 
         data-indeed-search-what="<SEARCH-WHAT>" 
         data-indeed-search-where="<SEARCH-WHERE>" 
         data-indeed-search-job-types="<SEARCH-JOB-TYPES>" 
         data-indeed-search-occupations="<SEARCH-OCCUPATIONS>">
    </div>
  </body>
</html>

Replace the values in angle brackets (<>) with your own.

This table describes the data-indeed-* attributes:

data-indeed-* attributes

Attribute	Type	Required	Description
data-indeed-plugin-type	String	Required	The feature to show. Must be job-search.
data-indeed-partner-app-id	String	Required	The ID of your website. Indeed provides this value.
data-indeed-placement-id	String	Required	The ID of this placement of the plugin on your website. Indeed provides this value.
data-indeed-search-limit	Integer	Optional	The maximum number of jobs to show in the job search UI. Must be between 1 and 20. The default is 10.
data-indeed-search-what	String	Optional*	The search terms. Separate terms with spaces to return jobs that match all of them. For example, "Senior Engineer" returns only jobs that match both "Senior" and "Engineer". Separate terms with OR to return jobs that match any of them. For example, "Engineer OR Nurse" returns jobs that match "Engineer" or "Nurse". *Specify data-indeed-search-what, data-indeed-search-where, or both.
data-indeed-search-where	String	Optional*	The work location to search, such as "Tokyo". Specify only one location. The most specific level you can use is a municipality, such as a ward, town, or village. For example, Shibuya-ku, Tokyo (東京都渋谷区) or Kita-ku, Osaka (大阪市北区). *Specify data-indeed-search-what, data-indeed-search-where, or both.
data-indeed-search-job-types	String	Optional	A comma-separated list of job type SUIDs to filter by. The plugin returns jobs that match any of the values. For example, "5QWDV, 75GKK" returns jobs with job type 5QWDV or 75GKK. If you omit this attribute, only the filters that Indeed already applies to jobs for your site are used.
data-indeed-search-occupations	String	Optional	A comma-separated list of occupation SUIDs to filter by. The plugin returns jobs that match any of the values. For example, "HY4VD,6HZUJ" returns jobs with occupation HY4VD or 6HZUJ. If you omit this attribute, only the filters that Indeed already applies to jobs for your site are used. Occupation SUIDs might change in the future.

The plugin doesn't show the job search UI if an attribute isn't valid or the search returns no jobs.

Show the job search UI

Show the job search UI where it helps job seekers. Add a header above it that explains why you're suggesting these jobs.

You can show the UI on these pages:

Places to show the UI

Page	Header example	Description
Search results page	More related jobs	Show additional related jobs from Indeed PLUS after your site's search results. If a search returns no results, show related Indeed PLUS jobs instead.
Article page	Jobs related to this article	Show related jobs after the article.

If a page has more than one job search element, the plugin shows the UI only in the first one.

Job search UI layout

The job search UI fits the width of its container, on both mobile and desktop. Its maximum width is 700px.

Container's width is less than 700px, Container's width is greater than 700px

Customize the job search UI

You can change these colors in the job search UI:

• The text color of the header
• The background color of the job list
• The background and text colors of the View job button on job cards

This image shows the default job search UI and a customized one:

Default stylings, example of customized stylings

To change a color, send your Indeed representative the hex value, such as #FFFFFF for white. Choose colors that contrast. See Use contrasting colors.

During testing, check the design of the job search UI and make any changes you need.

---

Best practices

Follow these guidelines when you show the job search UI.

Set appropriate search criteria

Use search criteria that match the content of the page.

✅ Correct example

❌ Incorrect example

Use contrasting colors

Make sure text contrasts with its background. For example, don't use white text on a white background.

✅ Correct example

❌ Incorrect example

Ensure layout flexibility

The height of the job search UI depends on how many job cards it shows and how tall they are. Make sure your layout adapts to different heights.

✅ Correct example

❌ Incorrect example

Add margins

Leave at least 16px of margin above and below the job search UI.

Show appropriate headers

Add a header above the job search UI that explains why users see these jobs. Don't encourage users to click jobs only so that you earn revenue.

Ensure the plugin shows the job search UI

The plugin doesn't show jobs when:

• The job search returns no results.
• The API call fails.
• You reach your monthly revenue cap.

Indeed sets a monthly cap on the revenue each publisher can earn from clicks on jobs that the plugin shows. When you reach the cap, the plugin stops showing jobs. For details, contact your Indeed representative.

To check whether the plugin showed the job search UI, listen for the indeed-plugin-event event on the plugin root element. In the event's detail field, type is the event type, and payload.success is true if the plugin showed the UI.

For example, show a loading indicator, such as a spinner, and then show your header only if payload.success is true.

This snippet shows how the plugin builds the event. It's for reference only, so don't copy it into your code:

type IndeedPluginEventDetail = {
  type: "load";
  payload: {
    success: boolean;
  }
}
// When the plugin rendering succeeds
const eventDetail: IndeedPluginEventDetail = {
  type: "load",
  payload: {
    success: true
  }
};
// When the plugin rendering fails
const eventDetail: IndeedPluginEventDetail = {
  type: "load",
  payload: {
    success: false
  }
};
const indeedPluginEvent = new CustomEvent("indeed-plugin-event", {
  detail: eventDetail
});

This example listens for the event:

const pluginRoot = document.getElementById("<plugin-root-id>");
pluginRoot.addEventListener("indeed-plugin-event", (event) => {
  const {
    type,
    payload
  } = event.detail;
  if (type === "load") {
    const success = payload.success;
    if (success) {
      // When the rendering succeeds
    } else {
      // When the rendering fails
    }
  }
});

---

See also

• Job types — Lists the job type SUIDs for data-indeed-search-job-types.
• Occupations — Lists the occupation SUIDs for data-indeed-search-occupations.

 

Was this page helpful?