Cookie choices

Choose what this site may use. You can change your mind at any time from “Cookie settings” at the bottom of every page.

Essential

Always on

Keeps the site working and secure, remembers this choice, and keeps you signed in if you sign in. Refari’s job features on this site also use a browser identifier to count views and prevent abuse; this cannot be switched off yet.

Cookies
  • rf-consent · This site · 12 months
    Remembers your cookie choice (browser storage).
  • refariUserSession, RefariLoggedIn · Refari · 1 year
    Keeps you signed in when you sign in to a Refari feature.
  • refari_jb_registered · Refari · Until you close the tab
    Remembers that you have just registered (browser storage).
  • _grecaptcha · Google reCAPTCHA · Until you clear it
    Keeps automated spam out of the forms; set only once you start using a form (browser storage).
  • _GRECAPTCHA · Google reCAPTCHA · 6 months
    Google’s own cookie for the same check, on google.com; set only once you use a form.
  • Facebook and LinkedIn sign-in · Meta, LinkedIn · Set by them
    Only if you choose “Continue with Facebook” or LinkedIn: their own cookies for signing you in.

Analytics

Shows us which jobs and pages people find useful, so we can make the site better for you.

Used by: Google Analytics, Ahrefs Web Analytics, Refari visit counts (no cookies)

Cookies
  • _ga · Google · 2 years
    Tells visits apart to count visitors.
  • _ga_* · Google · 2 years
    Keeps the state of a visit.
  • Set by the code · Ahrefs Web Analytics · Varies
    Code this site added; it may set its own cookies.
  • Refari visit counts · Refari · No cookies
    Counts page visits for us without cookies. Your browser sends the page, the site you came from and your device type. Your IP address is not kept, and we see totals only. A local setting, rf-nocount, is stored only if you ask us not to count your visits.

Refari Job Boards in Your Framer Site

Designed your website in Framer? Place your Refari job board, job alerts and referral forms inside the page design with a code component, publish, and every application made on your site goes into your ATS.

Request A Demo
Refari and Framer

Three Ways to Add Code in Framer, and Which to Use

Framer is a visual website builder: you design on a canvas, Framer AI can lay out pages and write components, and the site is published to Framer’s own hosting. You never edit a code repository, so third-party code goes in through one of three doors.

A Refari widget is an empty container plus the Refari scripts, in their original order. It has to run in the page itself, because its forms, job links and filters all read the page’s own web address. Two of Framer’s doors keep it there; the Embed element does not, because it runs your code inside a frame.

  • Code component: for the job board, job alerts, referral and registration forms and testimonials, placed in your layout like any other layer
  • Custom Code: for a floating widget such as the TopRec bar, which needs no spot in the layout
  • Your jobs stay in your ATS and Refari, never in the Framer project
Your ATS sends jobs to Refari, Refari shows them in a job board placed by a code component on your Framer careers page, and applications go back to your ATS

Add the Job Board With a Code Component

Framer describes a code component as a file that exports a single React component, compatible with React 18, which renders on the canvas, in preview and on the published site. That is what lets the Refari container sit in your page as a real element.

  1. Copy the Code From Refari

    Open Widgets in your Refari dashboard, pick the job board, choose its colours and layout, then click COPY ALL. Only a Refari Admin or Manager sees Widgets.

  2. Build the Code Component

    Ask Framer AI for a code component with the prompt below, or create it under Assets > Code > Create Code File from the same brief. Name it after the widget, for example RefariJobBoard.

  3. Drop It Onto the Careers Page

    Drag the component from Assets onto your careers page. Let it fill the width of its stack and do not give it a fixed height: the board grows with your jobs.

  4. Publish, Then Test the Live Page

    Click Publish and open the careers page on its published address. Apply for a job there: if the reCAPTCHA box loads cleanly, the code is in the page. Then open a job, copy the address into a new tab, and check the same job opens.

  5. Point Your Base URL at It

    In Refari, under Settings > Job Board Settings, set the Base URL to the Framer careers page, so job links in alerts and emails open there. Click a job link in a Refari job alert email to confirm it opens that job.

Example prompt for Framer AI
Create a code component called RefariJobBoard for our Careers page from the Refari embed code below.

[paste the COPY ALL code from Refari here]

- Render the container div exactly as it is in the code, keeping its id, full width with no fixed height.
- Keep the Refari scripts in their original order. In a useEffect, add the Refari loader script only if it is not already on the page, so it never loads twice.
- Run the configuration script only after the loader has loaded (straight away if it already has), every time the careers page mounts.
- No raw script tags in the JSX, and no window or document outside that useEffect.
- Never put any part of the code in an iframe or Framer’s Embed element.
- Leave the page address alone, including its query string and the part after #.

Framer AI runs on the AI credits in your plan. Before you publish, check that the component keeps the container div and its id exactly as you pasted them.

Floating Widgets Go in Custom Code

A floating widget such as the TopRec bar has no place in your layout, so it does not need a component. Framer’s Custom Code setting adds a script to every page, or to the pages you choose.

  1. Open Custom Code

    Go to Project Settings and open the Custom Code tab. Framer’s Academy calls this Site Settings; it is the same place.

  2. Add a Script

    Click Add Script, give it a name you will recognise, paste the widget’s COPY ALL code with the Refari scripts in their original order, and choose End of body as its placement.

  3. Choose Where and How Often

    Limit it to chosen pages if you like. If the bar is missing after you move from page to page, set it to Run on every page visit and test again.

  4. Publish to See It

    Custom Code never runs on the canvas or in the editor preview, so publish and look at the live site.

Six Framer Traps to Avoid Before Launch

When a Refari widget misbehaves on a Framer site, the cause is nearly always where the code was put. Check these in order.

  • Pasting Into the Embed Element

    Framer’s own help suggests the Embed element for scripts, and it runs the code inside a frame. Forms then show “Invalid domain”, and job links and filters stop working.

    Delete the Embed and place the widget with a code component.

  • Splitting the Code in Two

    Framer’s Trustpilot guide splits a widget between Custom Code and an Embed. Do not split Refari’s code that way.

    Keep the container and the Refari scripts together in one code component.

  • Browser Code During Rendering

    Framer pre-renders pages, and its troubleshooting guide says a component that touches window or document while rendering is hidden and retried on load.

    Load the scripts inside useEffect(), never in the component body.

  • Judging It on the Canvas

    Custom Code does not run on the canvas or in preview, and reCAPTCHA and job links need a real published address to prove themselves.

    Publish, then test the live URL in a private window.

  • A Careers Page Hidden From Search

    Every Framer page has a Search engines toggle in its settings. Switched off, it adds a noindex tag to that page.

    Check the toggle is on for your careers page before launch.

  • A Security Policy That Blocks the Board

    Framer does not say it sets a Content Security Policy by default, but you can add one through Custom Headers on Advanced Hosting or a meta tag at the start of the head.

    If you add one, allow widget.refari.co, api.refari.co and Google reCAPTCHA, then test a registration form on the published site.

Five ATSs, One Framer Component

The code component is the same whichever ATS feeds Refari. What changes is what moves between that ATS and Refari, and what to check before your Framer page goes live.

Trusted By

Join the Success: 400+ Companies Thriving with Refari!

Framer Plans, Domains and Your Base URL

Framer’s plans are Free, Basic (from $10 a month billed yearly), Pro (from $30) and Enterprise. Free publishes on a Framer address and Framer calls it ideal for non-commercial use; connecting your own domain needs Basic or above. Framer’s help does not say whether Custom Code is limited by plan, so check in your project before you rely on it for a floating widget.

To use your own domain, open Site Settings > Hosting > Domains. For an apex domain Framer asks for two A records and a www CNAME to sites.framer.app; a subdomain such as careers.yourfirm.com needs only the CNAME.

  • Refari widgets are not tied to one domain, so the same code works on your Framer address and on your own domain
  • Once the domain is live, update the Base URL in Refari so alert links open on it
  • Framer AI uses AI credits: 1,000 a month on Basic and 3,000 on Pro, with a trial allowance on Free

Framer and Refari Questions Answered

What agencies and in-house recruiters ask before they add a Refari job board to a website designed in Framer.

Does Refari work on websites built with Framer?

Yes. Placed with a code component, a Refari widget runs in the page itself on your published Framer site, so it shows your live jobs, opens each role and takes applications.

Can I paste the Refari code into Framer’s Embed element?

No. The Embed element runs code inside a frame, so registration and application forms show “Invalid domain” and job links and filters fail. Use a code component for anything in your layout.

Where do I create a code component in Framer?

In the Assets panel. Open Code, choose Create Code File, write or paste the component, then drag it onto your page like any other layer. Framer AI can also write it from a prompt.

Can Framer AI build our careers page and the job board?

Yes, with a check. Framer AI builds editable layouts and can write a code component, but confirm that the component keeps Refari’s container div and its id as pasted and loads the Refari loader, not an Embed.

Why can’t I see the job board on the Framer canvas?

Test the published page instead. Custom Code never runs on the canvas or in preview, and reCAPTCHA and job links only prove themselves on the published address.

Which Framer plan do I need for a Refari job board?

Framer lists no plan limit for code components; your own domain needs a paid plan, Basic from $10 a month billed yearly or Pro from $30. Framer does not document a plan limit on Custom Code either, so check in your project if you use it.

Do Refari job links open the right job on a Framer page?

They should, as long as the component leaves the address alone, but test it on your published site because Framer does not document how its pages treat query strings. Open a job, copy the address into a new tab, then click a job link in a Refari job alert email: both should open that job.

Will the board still load after a visitor moves between pages?

It should, if the component is built for it. Framer does not document how components remount, so load the Refari loader once, run the configuration each time the component mounts, and test by arriving at the careers page from your home page.

How do I add the TopRec bar to every page of a Framer site?

With Custom Code. In Project Settings, add a script with the bar’s code, place it at the end of the body, leave it on all pages and publish.

Can I put two Refari widgets on one Framer page?

Yes. Give each widget its own code component, and have each one add the Refari loader only if it is not already on the page, so the loader loads once and each widget runs its own configuration.

Will my jobs appear in Google for Jobs from my Framer site?

No, not from the widget. Google for Jobs reads a separate page for every job, while a job board widget shows its jobs inside one careers page. Google for Jobs comes with a website Refari builds.

Google for Jobs Reads Job Pages. Refari Websites 2.0 Makes Them

Framer gives a design team close control of every page, and a code component gives that site a working Refari job board. What no widget can make is a separate, crawlable page for each job carrying the job posting markup Google for Jobs reads. Refari Websites 2.0 is built that way from the start, and Refari runs the site for you, so it is the option to choose when Google for Jobs matters.

What you get Refari widgets on your Framer site Refari Websites 2.0
Live job board from your ATS Refari widgets on your Framer site: Yes, with search, filters, job alerts and referrals Refari Websites 2.0: Yes, built into the site
Applications into your ATS Refari widgets on your Framer site: Yes, through the Refari forms in the widget Refari Websites 2.0: Yes, the same forms
Google for Jobs Refari widgets on your Framer site: Not from the widget: jobs open inside your careers page, with no page of their own for Google to read Refari Websites 2.0: Included: every job has its own page with the job posting markup Google for Jobs reads
Who builds and looks after it Refari widgets on your Framer site: You, in your builder, on your plan Refari Websites 2.0: Refari builds and hosts it, and you ask for changes in plain English
Ask About Refari Websites 2.0

Using Framer? Let’s talk.

Book a demo and we’ll walk you through the Refari job board, its forms and how they connect to the ATS your team already uses.

Request A Demo

Unrivalled Product Reputation

The way our existing clients describe Refari demonstrates the impact that our tools have on their business.

1,200+

Recruiters On Refari

400+

Companies Trust Us

View All Reviews

Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.

5.0 From 125 verified reviews