Teamtailor

How to integrate Teamtailor with Webflow

Maintaining job listings across your ATS and website requires manual CMS updates every time positions open or close, creating delays and potential listing inaccuracies. Integrating Teamtailor with Webflow keeps job data synchronized automatically, so your recruitment team publishes positions in one place and your website updates immediately.

You can integrate Teamtailor with Webflow using embeddable JavaScript widgets for live job listings, Zapier automation for CMS synchronization, custom domain configuration for hosted career sites, iframe application forms, or direct API integration for custom workflows.

Use embeddable widgets for live job listings

Teamtailor offers two JavaScript widgets that display job listings directly on Webflow pages. The Job List Widget shows filtered job listings embedded in your page layout, while the Career Widget displays a floating button showing jobs, team members, and departments. When you publish, edit, or archive positions in Teamtailor, your website updates automatically.

Configure widgets through Settings → Integrations → Widgets in Teamtailor, then paste the generated <script> tag into Webflow's Code Embed element. The Job List Widget supports department filters, location filters, language preferences, and show/hide filter options. For group accounts, enable Group companies and Group company select to display jobs from all child companies.

Implementation in Webflow:

• Navigate to Custom Code settings in Project Settings → Custom Code for site-wide widgets
• Use page-specific Custom Code in Page Settings for individual pages
• Drag an Embed element from Components → Embed for inline placement

The Career Widget automatically displays:

• SEO title from your career site homepage
• 3 newest jobs with "View all jobs" link
• 3 random employees with "View all employees" link
• 3 random departments with "View all departments" link

Configuration options for the Career Widget include position (left or right alignment with top/bottom placement), brand color (hex code), and display language.

Sync job data to Webflow CMS via Zapier

Zapier's Teamtailor-Webflow integration automates CMS synchronization when you publish or modify jobs in Teamtailor. This method gives you custom design control through Webflow's visual editor while maintaining data synchronization with your recruitment system. Choose this approach when you want custom-styled job boards using Webflow design tools while keeping data synchronized with Teamtailor.

Connect your accounts through Webflow's Zapier integration and Teamtailor's Zapier settings at Settings → Integrations. Generate your Teamtailor API key with appropriate scope (Public for job data), then authorize Webflow through Zapier's OAuth connection (secure authorization without sharing passwords).

Zapier connects Teamtailor triggers to Webflow actions through automation workflows:

• Create Webflow items when jobs update: Syncs job titles, descriptions, employment types, locations, employment levels, remote status, and other job details to Webflow CMS Collections when jobs are created or updated in Teamtailor
• Create candidates from form submissions: Captures applications through Webflow forms and creates candidate profiles in Teamtailor

Workflow configuration:

1. Trigger: New job posted or job updated in Teamtailor
2. Action: Create or update item in Webflow CMS Collection
3. Field mapping: Match Teamtailor fields (title, body, employment-type, employment-level, remote-status) to corresponding Webflow CMS field types (Text, Rich Text, Option fields)

This approach requires creating a Webflow CMS Collection with fields matching your job data structure. Typical fields include job title (plain text), description (rich text), employment type (option field), location (plain text), and status (option field).

Resume collection requires workarounds: Webflow forms don't support file uploads natively according to the Forms API reference. To collect resumes through Webflow forms, use Webflow's native file upload field (Business plan required) with Make.com or Uploadcare to handle file storage and pass the file URL to Teamtailor, or direct applicants to Teamtailor's hosted application form via iframe instead.

Configure custom domain career sites

Point a subdomain (like careers.yourcompany.com) to your Teamtailor-hosted career site, then link from your Webflow navigation. This domain redirect strategy maintains your primary domain while using Teamtailor's full career site functionality.

DNS configuration required: Configure a CNAME or A record at your domain registrar (not in Webflow) to point to Teamtailor's hosted server. This DNS-level configuration happens at your domain provider (GoDaddy, Namecheap, Cloudflare, etc.), not within Webflow's domain settings.

Common URL patterns to link from Webflow navigation:

• /careers/jobs for all jobs listing
• /careers/jobs/[JOBID-JOBTITLE] for individual job pages
• /careers/locations/[LOCATIONNAME] for location pages
• /careers/departments/[DEPARTMENTNAME] for department pages

Embed application forms with iframes

Display individual job application forms directly on Webflow pages using iframe embeds. Construct URLs following this pattern:

https://yourteamtailor.domain.com/jobs/[JOBID-JOBTITLE]/applications/new?iframe=true

The ?iframe=true parameter is mandatory for proper iframe rendering. Add optional UTM tracking parameters for analytics: ?iframe=true&utm_source=webflow&utm_medium=career_page.

Insert iframes through Webflow's HTML Embed Component, adjusting width and height to match your layout. This method keeps visitors on your Webflow domain throughout the application process while using Teamtailor's form functionality.

Build with Webflow and Teamtailor APIs

When you need custom workflows, advanced filtering, or real-time synchronization beyond what widgets and Zapier provide, direct API integration gives you complete control. The Teamtailor API and Webflow API support custom integrations tailored to your specific recruitment workflows.

Direct API integration requires server-side infrastructure. This is not a low-code approach. You need serverless functions, middleware, or a custom backend to handle API requests, authentication, and data transformation between platforms.

Sync jobs to Webflow CMS via API

Use Teamtailor's GET /jobs endpoint to retrieve job listings, then push them to Webflow CMS Collections via the Webflow API. This approach requires handling pagination (Teamtailor returns 30 items maximum per page), mapping job fields to your CMS Collection structure, and managing authentication for both platforms. Implement scheduled polling or webhook listeners to keep job data synchronized.

Create candidates from custom forms

When building custom application forms in Webflow, use Teamtailor's POST /candidates endpoint to create candidate profiles. Required fields include first name, last name, email, and the job ID. Optional fields support phone numbers, LinkedIn profiles, pitch text, and referral sources. This method requires server-side processing to handle form submissions and forward data to Teamtailor's API.

Implement webhook listeners

Configure Teamtailor's Company Webhooks for real-time updates when jobs change. Subscribe to job.create, job.update, and job.destroy events at Settings → Integrations → Webhooks. Each webhook requires an HTTPS endpoint and supports v2 signature verification for security (Base64-encoded signature using the TT-Signature header for cryptographic validation that webhook payloads originated from Teamtailor). Build a middleware service (a server-side application that receives webhooks and forwards data) to receive webhook payloads and update your Webflow CMS accordingly.

Authentication uses API keys via Authorization: Token token=YOUR_API_KEY header. Generate keys in Teamtailor at Settings → Integrations with appropriate scope (Public for job data, Internal for candidate data). Note the HTTPS requirement for webhook endpoints and v2 signature verification for security.

What you can build

Integrating Teamtailor with Webflow creates recruitment workflows that operate directly from your marketing site while maintaining centralized candidate management.

• Filtered job listings with Job List Widget: Create a /careers page displaying all open positions with department, location, and remote work filters. Visitors browse jobs without leaving your site, and listings update automatically when you publish new positions in Teamtailor.
• Webflow form to Teamtailor via Zapier: Build branded application experiences using Webflow's design tools, then route submissions to Teamtailor through Zapier automation. Your recruitment team manages all candidates in Teamtailor while maintaining brand consistency across the application journey.
• Location-filtered widgets for regional sites: Display different job listings for each office location using filtered widget configurations. Visitors select their preferred location and see relevant opportunities, while your recruitment team manages everything centrally.
• Inline application forms with iframe parameters: Place inline application forms directly on product pages, location pages, or landing pages using iframe embeds with the ?iframe=true parameter. Candidates apply without leaving your domain, and applications flow directly into your Teamtailor pipeline. Optional UTM tracking parameters enable proper attribution tracking.