Job List Widget - Display jobs on your website and collect applications in Alva
The Job List Widget is an embeddable component that displays your published jobs directly on your website or ATS career page. Candidates can browse your jobs, view the details, and apply using the application flow you selected.
You can add the widget to:
Your ATS career site, such as Teamtailor or Jobylon
Your company website, hosted by HubSpot, WordPress, or another provider
Simply configure the widget in Alva, generate the code, and paste it where you want your jobs to appear.
đĄNote: Your organisation needs the Hiring System. The Job list widget card only appears in Settings for organisations that have it.
How it works - at a glance
Configure your widget in Alva
Choose how the layout of the widget should look like.
Generate the widget code
Alva gives you a code you can copy.
Paste the code where you want the jobs to appear
Put the code in your ATS career page or website.
Configure the Job List Widget
Use the configuration panel to adjust how the widget looks and how candidates apply. The preview updates to show how your choices affect the widget.
To find the Job List Widget:
Navigate to Settings.
Click the Job List Widget card.
Layout
Choose how jobs are arranged in the widget:
List: Displays jobs as full-width cards in a vertical list.
Compact: Displays jobs in slimmer full-width rows.
Cards: Displays jobs as cards in a multi-column grid.
Number of jobs per page
Number of jobs per page controls how many jobs appear on each page.
Search and location
Turn Search + Location on or off to show or hide the job-title search field and location filter above the job list.
Application flow
Application flow controls only what happens when a candidate clicks Apply to this Job. The job list, filters, and job details work the same with either option.
Redirect to Alva career page: This is the default setup. The application opens in a new tab on an Alva-hosted career page, so the candidate leaves your website to apply.
In-widget application: The candidate stays on your website and completes the same application inside the widget. This supports a more consistent brand experience.
Choosing In-widget application also reveals two settings that only affect the application form inside the widget:
Form input border color: Changes the border colour of the application form fields.
Application form text color: Changes the text colour used in the application form.
Colours
Title color: Changes the colour of job titles in the widget.
Secondary color: Changes the colour of supporting job information, such as location and workplace type.
Card background: Changes the background colour of each job card.
Card border color: Changes the outline colour around each job card.
Font settings
Custom font settings: Lets you adjust the text sizes manually. The widget otherwise detects the font family and sizes automatically.
Title font size (px): Changes the size of the job title text.
Secondary font size (px): Changes the size of supporting information shown below the job title.
Generate or reset the code
Generate job list code: Generates the widget code using your current configuration.
Reset: Restores the configuration settings to their defaults.
Common ways to use it
With your ATS career page
If you use an ATS:
Embed the widget on your ATS job listing page
Candidates apply using the application flow you selected, even if they started in your ATS
This helps reduce friction and makes candidate data flow more consistently into Alva.
Without an ATS
This is also a good option for companies that donât use an ATS, or for companies that host their own career site as part of their website.
Embed the widget directly on your homepage or careers page
Let candidates find open roles and apply using the application flow you selected
You get a simple and reliable careers experience without needing a full ATS.
Other Job list widget articles
Any Questions?
Use the chat in the bottom right corner to connect with a member of our support team, or email support@alvalabs.io.
