This guide will walk you through the process of customizing the jobs widget and integrating it into your website using Recooty. A customized jobs widget enhances your recruitment experience, making it easier for candidates to find and apply for open positions.
Accessing the Job Widget Customization
Log in to your Recooty dashboard.
Navigate to Profile > Settings > API and Integrations > Jobs Widget.
Click on the Customize the Jobs Widget button.
Note: Ensure you have posted jobs that can be customized and will be visible on your website.
Customize Widget UI
You can choose from the pre-built themes and click on Next.
Then you will have the following options while customizing the job widget:
Theme and Representation:
Default View: Choose between Grid or List.
Font Size: Select Small, Medium, or Large.
Choose to show Salary Information, City, and Country.
Hide Recooty Branding: Available only with the Premier Plan (toggle).
Color Palette:
Accent Color
Background Color
Border Color
Heading Color
Text Color
After customizing, click on Update to save your changes.
Copy Embed Code
Once you've saved your customizations, scroll to the bottom of the Integrations page and copy the generated code snippet:
You can select the language for the job widget from the following options:
Languages Supported: en, hi, vi, it, de, nl, fr, ar
Note: When Arabic (ar) is selected, the layout automatically switches to RTL (Right-to-Left) without needing additional code.
The Jobs widget will look like this on the web page:
To change the displayed language, update the following line in the code:
language: 'en'
Placement on Page
Ask your developer or team member to paste the below-mentioned code in the section of your website where you want the jobs to appear. Placement is flexible based on your page layout.
<div id="recooty-widget"></div>
Advanced UI Customization
Custom Class Names
You can override default styles by using custom class names provided by Recooty. Attach these in your CSS and use !important to ensure they take precedence:
.recooty-customCard {
background-color: #fef9c3 !important;
border-radius: 10px !important;
}
.recooty-customPrimaryButton {
background-color: #4f46e5 !important;
color: white !important;
}
Supported Class Names Include:
widget
widgetContainer
heading
categories
category
select
filter
card
cardContent
primaryButton
secondaryButton
outlinedButton
jobCardTitle
jobContainer
tagContainer
tag
viewToggleContainer
viewToggleButton
paginationContainer
paginationEllipsis
paginationButton
paginationPage
gridView
listView
modalOverlay
modalContent
closeButton
descriptionModal
recootyModalButtonContainer
Multi-Region Setup
If your company operates in multiple regions with different career pages, follow these guidelines:
Use the same integration script across all pages.
Change the language value in the script as needed:
language: 'fr' // for French
The UI will automatically reflect the selected language on each page.
Final Notes
RTL support is automatic for Arabic.
UI customizations are flexible through CSS.
No need to modify the widget source, utilize the public API and styling hooks for seamless integration.
For further assistance or questions, feel free to reach out to Recooty Support at [email protected]. Happy customizing!