In this embedding option, only the application form is embedded. This allow you to customize the entire page around the application form.
To do this:
To do this:
- Go to Ashby admin to enable job board embedding.
- Add the Ashby script to your site, ensuring to pass version=2 as a query parameter
- Use the Ashby API to retrieve job posting data.
- Configure the __Ashby window object. (See example below)
- (If needed) Call __Ashby.iFrame().load to switch job postings.
- (Optional) Upload a custom css url to apply global styles to your embedded content.
- (Optional) Pass css url to style your application form per-application.
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 <script>
17 function loadMyJobPosting(jobPostingId) {
18 // The load function can be called in any way, such as in a SPA.
19 // Here, `loadMyJobPosting` is a simple function being called by button clicks below.
20 window.__Ashby.iFrame().load({
21 jobPostingId
22 });
23 }
24 </script>
25
26 <!-- This header content is to show that the embedded content should go directly alongside your other custom
27 job board content -->
28 <div style="text-align:center;">
29 <h1>My Orange Job Board</h1>
30 <p><i>This example has been hard-coded to an example Ashby instance.<br>Click the buttons below to load each posting.</i></p>
31 <div class="button-container">
32 <button
33 onclick="loadMyJobPosting('dd883672-4381-4aed-a28d-09a2af002772')">
34 First Posting
35 </button>
36 <button
37 onclick="loadMyJobPosting('66bded37-375d-4ecf-98ed-5aea60c36e61')">
38 Second Posting
39 </button>
40 </div>
41 </div>
42
43 <!-- This is the target for the embedded iframe -->
44 <div id="ashby_embed" class="application-form-embed-container"></div>
45
46 <script>
47 // This will define the initial settings for the Ashby embed script.
48 // The load function can take any setting, so that these settings could change each time the job board is loaded.
49 window.__Ashby = {
50 settings: {
51 ashbyBaseJobBoardUrl: "https://jobs.ashbyhq.com/ashby-embed-demo-org",
52
53 // The accepted display modes are:
54 // "full-job-board": Will allow the user to navigate the full job board, between the list of applications and postings
55 // "application-form-only": Will only show the application of a single job posting. jobPostingId must be set.
56 displayMode: "application-form-only",
57
58 // The initial job posting to render.
59 // If in a SPA, this can be left blank, with autoLoad = false, to prevent the iframe from rendering immediately.
60 jobPostingId: "dd883672-4381-4aed-a28d-09a2af002772",
61 autoLoad: true,
62
63 // Will prevent scrolling of the iFrame on navigation
64 autoScroll: false,
65
66 // Enable verbose logging to the console. This can help for debugging, but should ideally not be used in production.
67 verboseLogging: true,
68
69 // This custom css url will be embedded in the iframe, in addition to any global job board css files you have
70 // added in the Ashby admin. Passing this to the `load` function will allow you to customize css per
71 // application, if needed.
72 customCssUrl: "https://www.ashbyhq.com/job_board_example_css/application-form-only.css",
73 }
74 }
75 </script>
76
77 <!-- This is the Ashby script -->
78 <!-- IMPORTANT! For this embedding option, version=2 must be specified. -->
79 <script id="ashby-script" src="https://jobs.ashbyhq.com/ashby-embed-demo-org/embed?version=2"></script>
80</body>
81
82</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
