The easiest way to embed a job board is to simply embed the entire job board in the page.
To do this:
Go to Ashby admin to enable job board embedding.
Add these script tags to your site.
Example:
This example is rendered in an iframe in order to show the minimum needed to use this embedding option, without interference from the rest of the page. The full code of this minimum example is shown further down the page.
Example HTML:
The following html is running in the above live example.
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 <title>Embedded Job Board Test</title>
9
10 <!-- This is some custom styling for the site that surround the application. -->
11 <link rel="stylesheet" type="text/css"
12 href="/job_board_example_css/example-job-site-styles.css">
13</head>
14
15<body>
16 <!-- This header content is to show that the embedded content should go directly alongside your other custom
17 job board content -->
18 <div style="text-align:center;">
19 <h1>My Orange Job Board</h1>
20 <p><i>This example has been hard-coded to an example Ashby
21 instance.</p>
22 </div>
23
24 <div id="ashby_embed"></div>
25 <script>
26 window.__ashbyBaseJobBoardUrl = "https://jobs.ashbyhq.com/ashby-embed-demo-org"
27 </script>
28 <script id="ashby-script" src="https://jobs.ashbyhq.com/ashby-embed-demo-org/embed"></script>
29</body>
30
31</html>Example CSS:
The following css is running in the above live example, and can be downloaded as a starter for your own job page.
1. CSS Injected into the iframe
This could be uploaded in Ashby admin or specified in the embedding configuration under __Ashby.settings.customCssUrl. In this example, it has been uploaded in the admin.
