<aside> 💡 Customers often wish to use alternatives to the provided Ashby Hosted Job Boards (https://jobs.ashbyhq.com). To provide a more branded experience, Ashby supports embedding the Ashby Job Board directly in their own careers website.

**Companies using this approach: YCombinator

</aside>

Section Overview

Embedding Ashby Job Board in an External Careers Page

Embedding your Ashby Job Board directly in your careers page only takes a few minutes to setup.

1. First, you'll need to update some settings in the Theme section of the app. Navigate to Admin > Job Boards > Theme (Job Board).

2. Under Job Board Embedding check the Allow Job Board Embedding option

3. After allowing job board embedding, you can then provide your Custom Jobs Page URL below

4. Once you have set your Custom Jobs Page URL, you’ll see instructions on how to embed your job board. Follow those instructions to edit your careers page and embed your job board.

   1. Place this tag on your page where you want the Ashby Job Board to be embedded: <div id="ashby_embed">
   2. Add this script tag at the end of your page’s HTML body tag: <script src="<https://jobs.ashbyhq.com/**>[FILL IN JOB BOARD SLUG HERE]**/embed ?version=2"></script>

   Important: You'll need to directly link to the Ashby embed script on your careers page, as shown above. If you download the embed script and host or bundle it yourself, the script will not receive updates, and we cannot guarantee it will continue to work. For that reason, you'll need to directly link to the Ashby-hosted version of the script, as shown above.

Adding CSS to your job board embed

In the Allowed Custom CSS URLs section, you can determine the URLs that can be used to load external CSS into your embedded job board. Add your Custom CSS URL or URLs into the Allowed Custom CSS URLs field, then click Submit to add them.

Please note that one URL should be entered per line and that URLs have to match exactly to that of where the CSS file is hosted. If this field is left empty, then CSS cannot be configured on the embedded job board.

<aside> 💡

For further information, please check out this document with examples.

</aside>

Once you've added your Allowed Custom CSS URLs, please ensure they are added to your iframe script too. It should look something like the following:

<div id="ashby_embed"></div>

<script>

window.__Ashby = {

settings: {

ashbyBaseJobBoardUrl:"<https://jobs.ashbyhq.com/ashby-embed-demo-org>"

customCssUrl: "<https://www.ashbyhq.com/job_board_example_css/full-job-board.css>"

}

}

</script>

If the CSS URLs are not included within the script tag, then the CSS will not be applied to your embed.

Embedding a Single Application

The embed script also supports embedding a single application. To do this, you can add the following attributes to the <div id="ashby_embed"> tag:

• data-jid="<JID>": with this attribute set, the embed code will always load that specific job post, identified by the “JID” (e.g. “45134452-f53b-4d4c-915e-4a4615fb6c93", for a job post with the URL https://jobs.ashbyhq.com/ashby/**45134452-f53b-4d4c-915e-4a4615fb6c93**)
• data-tab="application": with this attribute set, the embed code will load the above application on the application tab (as opposed to the job description tab).
• data-noChrome="true": with this attribute set, the embed code will hide navigation, title, and sidebar “chrome.” Combine this with other attributes to embed an application form that feels like it’s a part of your site.

Other options