Please note that this article will guide you through the best ways to add custom code to your career site. Teamtailor is not responsible for maintaining the code that you have implemented, nor can assist with any queries on applying your code. It is important to note that product updates to the career site may affect your custom code, and it is your responsibility to edit your code accordingly.

When applying code to your site, there are two options:

Let's explore these in more detail.

Custom HTML & CSS blocks are readily available to add to your careers site via the Block library on any of your content pages. To add these, click the "+" symbol in the bottom-left corner, then select this block.

This allows you to use your own HTML & CSS and create a new block exactly how you want this to look. This block is independent of all other blocks and so cannot be used to make any edits to other existing blocks or pages.

Please note that a custom domain is required for Custom HTML & CSS blocks to work.

In Global Design, you can enable custom styles, which will allow you to add your own custom CSS and JavaScript. The code that you input here can impact existing blocks on the career site, or allow you to add tracking scripts, such as for Google Analytics. These changes will impact every page of your career site.

To implement this, the first step will be to find your global design section. This can be found via the paintbrush icon in the top-right corner of your main Content page, or similarly in the bottom-left corner of any page. Once on global design, scroll down to Miscellaneous and switch Custom Styles to "yes".

Once enabled, you can provide feedback to our team on what you are looking to implement. Once completed, you will have two new boxes - Custom CSS & Custom JavaScript. Note that a custom domain will be required for any JavaScript to work.

If you plan on targeting a specific existing block, it is very important that you apply a custom wrapper first. This creates a custom class for you to target. If you try to target an existing class, then this can have knock-on effects elsewhere on your careers site, and that is why a custom wrapper is so important. You can then inspect the existing code on your career site to find the other elements within this wrapper, and use your CSS or JavaScript to make changes.

Before applying custom code, it is important to consider other options here. For example, it may be the case that what you are trying to achieve is already possible via an existing block, or by using the Adjustments button on a block.

Additionally, remember that it is not mandatory to use the Teamtailor careers site. If you find yourself looking to apply large amounts of additional code to your careers site, then you could instead choose to host the career site on your existing website and therefore have total control of the look and feel of your site. This could be done via a job list widget or a full career redirect using our API documentation.

On a final note, custom code can not be applied to every page of your career site in Teamtailor. For example, the Connect pages, and any form that needs to be filled in such as on a job application cannot be edited. Teamtailor may implement changes to the existing code of any preset block at any time. It is your responsibility to maintain the code that you have added.