Hosted Career Site

Last updated March 10, 2026

Option 1: Link to the hosted career site
1. Embed on a website
2. Embed on a social media profile
Option 2: Embed it inside of an iframe

When you sign up for Fill the Role, it creates a hosted career site on the internet for your organization. You can think of this hosted career site as the "front door" to find opportunities at your organization; prospective applicants can view and apply to the roles shown on it. All open roles are shown on your hosted career site.

In order to create a seamless experience for your prospective applicants, you should create a link to your hosted career site or embed it into your business's website or social media profiles.

Option 1: Link to the hosted career site

The recommended way to integrate the hosted careersite is to put a link to it on your website or social media profile. You can view an example of what this looks like at glossy.company. In this example, the "careers" link in the navigation bar directs viewers to the hosted career site for the fictitious company named Glossy.

Embed on a website

You will need access to edit your website. This may mean that you need to interact with HTML . When you have access to edit your website, you will need to add an anchor element links to your hosted careersite. It should look like the following HTML:

<a href="YOUR_HOSTED_CAREER_SITE_URL_HERE" target="_blank">Careers</a>

You can find the value to specify for the href attribute for your hosted career site under Settings > Hosted Career Site.

The target="_blank" attribute will make this link open in a new browser tab. If you do not wish for that behavior, you can remove that attribute.

If you are using a website editor tool, the above details may slightly differ.

If you have any questions please contact [email protected].

Embed on a social media profile

On many platforms when you share a URL it will turn into a link automatically. In these scenarios you can simply paste the URL of your hosted careersite into a post, a profile, etcetera.. Prospective applicants will use this to find your hosted career site. You can find the URL of your hosted career site under Settings > Hosted Career Site.

If you have any questions please contact [email protected].

Option 2: Embed it inside of an iframe

A more complex integration is possible by utilizing an iframe. This allows you to embed the hosted career site within a webpage.

You can view an example of what this looks like at glossy.company/iframe. In this example, the content of the careersite is shown inline on the page. Navigation to and from job postings remains within the iframe.

In order to do this you will need access to edit the HTML for your business's website. Once you have access to do that, you can add an element similar to the following to your website:

<iframe height="768" width="1024" src="YOUR_HOSTED_CAREER_SITE_URL_HERE"></iframe>

You can find the proper value to specify for src for your hosted career site under Settings > Hosted Career Site.
The hosted career site and postings are designed to a wide range of viewport sizes. The minimum supported size is 320px wide by 568px tall. For an optimal experience do not make the iframe smaller than those dimensions.

If you desire, the hosted career site can be configured to automatically toggle between light and dark themes based on the viewer's system settings. That is facilitated using the following css selectors:

@media (prefers-color-scheme: dark) {} for the dark theme
@media (prefers-color-scheme: light) {} for the light theme

For a consistent experience when utilizing an iframe, how the theme is configured on your business's website should match how the color scheme is configured on your hosted career site.

The content of the iframe is dynamic in nature. The hosted career site height will depend on the number of open roles and the height of each posting will depend on the length of the description and number of questions asked. You should expect that the iframe content may need to scroll.

An iframe resizing capability is available if you wish for the size of the iframe to dynamically resize to the height of the content within it. You can include the following html and javascript on your website to utilize this functionality:

<iframe id="hosted-career-site" src="YOUR_HOSTED_CAREER_SITE_URL_HERE"></iframe>
<script type="module">
    import { initialize } from "https://apply.filltherole.com/assets/open-iframe-resizer.js";
    import Controller from "https://apply.filltherole.com/assets/iframe-resizer-controller.js";

    new Controller(window, initialize, { targetElementSelector: "body" }, "#hosted-career-site");
</script>

Note

This example code will add an event listener to your website. If you need to remove the listener(e.g. you utilize client-side routing and have memory management concerns) the controller object exposes a stop() method.