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.
CSS Conflicts and Custom Classes: Reshaping the Recooty Widget
When embedding the Recooty Job Widget into your website, CSS conflicts may occur if your site’s global styles interfere with the widget’s isolated design.
The widget, however, is built with CSS isolation and provides custom CSS classes for every component — enabling full control over appearance while avoiding cross-styling issues.
This guide explains how CSS conflicts arise, how the Recooty Widget isolates styles,
and how to use the provided custom classes to align the widget with your brand design.
Understanding CSS Conflicts What Causes CSS Conflicts?
What Causes CSS Conflicts?
CSS conflicts occur when external site styles override or cascade into embedded widget elements.
Common causes include:
1. Parent page styles cascading into widget components
2. Specificity or !important declarations overriding widget rules
3. Inconsistent box-sizing or font inheritance
4. Z-index or stacking context interference
5. Display or layout conflicts from parent flexbox/grid
How the Recooty Widget Handles CSS Isolation
CSS-in-JS with Goober
The widget uses Goober, a CSS-in-JS library, to generate scoped styles that prevent
leakage:
CSS Isolation with isolation: isolate
.RecootyWidgetContainer {
isolation: isolate;
z-index: 999999999;
position: relative;
}This ensures that the widget forms a new stacking context, unaffected by parent
z-index layers.
Custom Class Names
Each component includes a predefined class name for customization:
export const customClassNames = {
widget: 'recooty-customWidget',
card: 'recooty-customCard',
heading: 'recooty-customHeading',
primaryButton: 'recooty-customPrimaryButton',
// and many more
}Box-Sizing Protection
* { box-sizing: border-box; }This guarantees consistent sizing calculations within the widget layout.
Common CSS Conflict Scenarios and Solutions
Font Styles Inheriting from Parent
Problem: Site fonts override widget typography
.recooty-customWidget,
.recooty-customWidget * {
font-family: 'Segoe UI', sans-serif !important ;
font-size: inherit;
}
.recooty-customHeading {
font-family: 'Your Font', sans-serif !important ;
font-weight: bold !important;
}
Colors Inheriting from Parent
Problem: Global text or background colors affect widget.
.recooty-customCard {
background-color: #ffffff !important ;
color: #333333 !important ;
}
.recooty-customJobCardTitle {
color: #1a1a1a !important ;
}Z-Index Stacking Issues
.recooty-customWidgetContainer {
z-index: 999999 !important ;
position: relative;
}
.recooty-customModalOverlay {
z-index: 9999999 !important ;
position: fixed;
}Practical Customization Examples
Dark Theme Widget
.recooty-customWidget {
background-color: #1a1a1a !important ;
color: #ffffff !important ;
}
.recooty-customPrimaryButton {
background-color: #007bff !important ;
color: #fff !important ;
}
.recooty-customPrimaryButton:hover {
background-color: #0056b3 !important ;
}Minimalist Styling
.recooty-customCard {
border: 1px solid #e0e0e0 !important ;
border-radius: 8px !important ;
padding: 16px !important ;
box-shadow: none !important ;
}Brand Color Integration
.recooty-customPrimaryButton {
background-color: #your-brand-color !important ;
}
.recooty-customHeading {
color: #your-brand-color !important ;
}Advanced CSS Override Strategies
Using CSS Specificity
#your-page-container .recooty-customWidget .recooty-customCard {
padding: 20px !important ;
}Responsive Media Queries
@media (max-width: 768px) {
.recooty-customCard { padding: 16px !important ; }
}
@media (min-width: 1025px) {
.recooty-customJobContainer {
grid-template-columns: repeat(3, 1fr) !important ;
}
}Debugging CSS Conflicts
1. Open browser DevTools (F12)
2. Inspect the widget elements
3. Identify overridden or inherited styles
4. Test isolation with a temporary border or background
.recooty-customWidget {
border: 5px solid red !important ;
background: yellow !important ;
}Full Example: Complete Widget Customisation
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
}
#recooty-widget {
max-width: 1200px;
margin: auto;
background: white;
padding: 30px;
border-radius: 12px;
}
.recooty-customHeading {
font-size: 36px !important ;
color: #2c3e50 !important ;
}
.recooty-customCard:hover {
border-color: #3498db !important ;
transform: translateY(-2px) !important ;
}
</style>
</head>
<body>
<div id="recooty-widget"></div>
<script src="recooty-widget.js"></script>
<script>
window.RecootyWidget.init('recooty-widget', {
id: 'your-widget-id',
language: 'en',
jobsPerPage: 6
})
</script>
</body>
</html>
With these methods, you can safely reshape the Recooty Job Widget to align with
your brand design without CSS conflicts.
For further assistance or questions, feel free to reach out to Recooty Support at [email protected]. Happy customizing!