This guide will walk you through the process of customising the Jobs widget and integrating it into your WordPress website using Recooty. A customised jobs widget enhances your recruitment experience, making it easier for candidates to find and apply for open positions.
Step-by-Step Integration Guide
Step 1: Log in to Your Recooty Dashboard
Navigate to the Recooty website and log in to your account.
2. Once logged in, go to Profile > Settings > API & Integrations > WordPress Plugin.
Note: Ensure you have posted jobs that can be customised and will be visible on your website.
Step 2: Obtain Your API Key
Copy the code from the API key section.
Step 3: Install the Recooty WordPress Plugin
Install the Recooty WordPress plugin on your WordPress site. (Make sure to download the new version, specifically named "Recooty AI Job Widget" and not the old dashboard one.)
2. Install and activate the plugin.
Step 4: Configure the Widget Settings
Navigate to the installed plugins, search for Recooty AI Job Widget, and click on Settings.
2. Paste the API key in the Widget ID field, choose your preferred language, and specify the number of jobs to display per page.
3. Click on Save settings.
Step 5: Add the Widget to Your Desired Page
Open the page where you want to display the job widget.
Add a shortcode by entering [recooty_widget] in the shortcode field and save the changes.
Step 6: View Your Job Widget
Navigate to your page in a browser to see the integrated jobs widget.
Customise Widget UI
Once you have integrated your widget, you can customise its user interface to better align with your website's branding.
Choose from the pre-built themes and click Next.
You will have the following options while customising the job widget:
Theme and Representation:
Default View: Choose between Grid or List.
Font Size: Select from Small, Medium, or Large.
Display Options: Choose to show Salary Information, City, and Country.
Hide Recooty Branding: This option is available only with the Premier Plan (toggle).
Color Palette:
Accent Color
Background Color
Border Color
Heading Color
Text Color
Advanced UI Customisation
If you want to take customisation a step further, you can use custom class names to override default styles provided by Recooty. Here’s how:
Custom Class Names:
Attach custom class names 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
Note: You must manually add these classes in WordPress since the platform does not inherently support them.
Multi-Region Setup
If your company operates in multiple regions with different career pages, follow these guidelines:
Use the admin panel to change the language.
language: 'fr' // for French
If you encounter any issues during the integration process or have questions while using the Recooty jobs widget, please reach out to us at [email protected].