Embedding Ashby Job Boards in an external Careers Page
8 min
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 your own careers website 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 navigate to admin > job boards > theme (job board) under job board embedding, check the allow job board embedding option add the url for your job page into the custom jobs page url field if you need links to job postings on a custom jobs page to be anchored to a specific place on the page rather than loading at the top of the page, add that anchor to the end of your url for instance, if your positions list is at the bottom of your careers page, and renders with anchor "#positions" at the end of the url, add that anchor to the end of the url in this field 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 place this tag on your page where you want the ashby job board to be embedded \<div id="ashby embed"> 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> 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 one url should be entered per line 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 for further information, check out this page with examples https //www ashbyhq com/job board embed examples 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 for other ways to add your jobs board to your external careers page, see routes for integrating your ashby job board with your careers page docid 24osjsaqlgxf1p8kq8pqz faq when i decline cookies on my careers page, my embedded job board doesn’t show up why? some cookie banner tools, like termly, can block the iframe from showing up on your careers page why am i receiving a jobs ashbyhq refuses to connect error on my career page? the refused to connect message usually means the embed can’t complete its origin check a few quick tweaks typically resolve it ensure you are using this exact embed tags provided on the themes (job board) https //app ashbyhq com/admin/organizational settings/theme page remove any editor wrappers ensure the code isn’t wrapped by a wysiwyg in \<p>, \<br>, or \<span> tags the \<div id="ashby embed">\</div> and the \<script> tag should be inserted as raw html in the page template or a raw/html block (and not inside a paragraph) why doesn’t the view posting link within my job posting take me to the specific job posting on my careers page? if you're using a custom careers page powered by ashby's api or an embedded job board, you may notice that clicking the view posting button within a job posting does not automatically route to the job posting on your careers page as expected this behavior is typically related to how your careers page handles url parameters the view posting button relies on the ashby jid url parameter to identify which job to display for example https //yourcompany com/careers?ashby jid=\<job id> for this to work correctly, your careers page needs to include logic that reads the ashby jid parameter and routes the visitor to the corresponding job posting page in most cases, your website should detect the ashby jid parameter in the url match it to the correct job redirect or render the appropriate job details page without this routing logic in place, visitors may be directed to your general careers page instead of the specific role this configuration is managed on your website, so your web or development team needs to implement this routing behavior if you need further information on how ashby provides job identifiers or how to structure the link, feel free to reach out to support