Installing Refari widgets: where to find your embed codes and which platforms are supported

This article explains where to find the embed code for each of your Refari widgets, what that code contains, which website platforms you can install widgets on, and the best practices that make an installation go smoothly. It also covers what to check when you rebuild or move your website.

A widget is a small block of code you place on your own website to display live Refari content, such as your latest jobs, a searchable job board, testimonials, or a candidate registration form. The widget always shows your current data and branding, so once it is installed there is nothing to maintain on the website side.

Where to find your widget embed codes

Every widget's complete code is available in your Refari dashboard. You will need to be an Admin or Manager to see the Widgets section.

  1. Log in to your Refari account at Refari.co.
  2. Open Widgets in the navigation menu.
  3. Select the widget you want to install, for example Latest Jobs.
  4. Adjust the customisation options on the page. The preview updates as you go.
  5. Click COPY ALL to copy the full embed code to your clipboard.
Note: COPY ALL gives you the complete working code for that widget, including your company's unique API key. There is nothing to assemble and no separate configuration to add.

This applies to every widget, including the TopRec verification bar (the bar that displays your verified review score on your website). In the dashboard it is called the Your Ratings widget and it lives in the same Widgets section.

What the embed code contains

Each COPY ALL block is made up of three parts:

  • A loader script: a single line that loads the Refari widget engine.
  • A container: an empty section that marks where on the page the widget will appear.
  • A configuration script: tells the loader which widget to display, along with your chosen settings and your API key.

The block is fully self-contained. Paste it as one piece and it will work on its own: no separate JavaScript needs to be added anywhere else on your site.

Which website platforms are compatible

Refari widgets are plain, self-contained JavaScript with no dependency on how your website is built. Any platform that lets you add a custom HTML or code block to the page itself can run them, whatever framework it uses behind the scenes. A small number of builders run embedded code inside a separate frame instead, which the widgets cannot work from, so it is worth checking yours against the section below.

Platform How to install
WordPress with Elementor Drag an HTML element onto the page and paste the code into it.
WordPress with other editors (Gutenberg, Divi, WPBakery, Beaver Builder) Use a Custom HTML block in the block editor, or your theme builder's HTML module.
Squarespace, Webflow, Duda, Weebly, GoDaddy and similar site builders Use the platform's embed or custom code element and paste the code into it.
Framer Use a code component to place a widget inside your page layout, or Custom Code in your site or page settings for a floating widget such as the TopRec bar. Do not use the Embed element.
Wix Use a Custom Element. Avoid the HTML embed (iframe) element.
Shopify Add a Custom Liquid or custom HTML section to the page in the theme editor.
HubSpot CMS Drop an Embed or Rich Text (source code) module onto the page and paste the code.
Joomla, Drupal, Craft CMS, Umbraco and other traditional CMSs Add a custom HTML module or block to the page, or place the code in the page template.
Custom-built websites (including React, Vue, Angular or any other framework) Paste the block into the page template, or hand it to your web developer to place.

If your site runs WordPress with Elementor, we have a step-by-step walkthrough with screenshots: How to install widgets with Elementor ↗

Note: Some site builders only allow custom code on paid plans, and many render embeds on the preview or published site rather than inside the editor canvas. If the widget seems to be missing while you are editing, preview or publish the page before assuming something is wrong.

Make sure the code runs in your page, not in a frame

Most platforms paste your code straight into the page, which is exactly what the widgets need. A few do something different: their embed element loads a small, separate document inside the page (an iframe) and runs your code in there instead. The widget usually still appears, so it looks as though it has worked, but that separate document has no web address of its own, and several parts of a widget depend on the address of the page they are sitting on.

If your code has ended up in a frame, you will see some or all of the following:

  • Registration and application forms show "ERROR for site owner: Invalid domain". These forms use Google reCAPTCHA to keep spam out, and reCAPTCHA checks the web address of the document it has been loaded into. A frame does not have one, so it refuses to run.
  • Job detail and application pages do not open. The job board opens each role by adding to the page address, which it cannot do from inside a frame.
  • Job board filters appear to do nothing. They work the same way, by writing to the page address.
Note: The reCAPTCHA message mentions a domain, but there is no domain for us to authorise. Refari widgets are not domain-restricted and work on any address, including a staging or preview site, so this message is a sign that the code is running inside a frame rather than on the page.

Two widely used builders embed code this way by default, so on these it matters which control you reach for:

Platform Use this Avoid this
Framer A code component, which places the widget inside your page layout, or Custom Code in your site or page settings for a floating widget such as the TopRec bar. The Embed element, which runs your code inside a frame.
Wix A Custom Element, which sits in the page and grows with its content. The HTML embed (iframe) element, which runs your code in a sandboxed frame.

If you are not certain about your own platform, the quickest check is to publish one page carrying a registration widget and look at the reCAPTCHA box at the foot of the form. If it loads without an error, your code is running on the page and the rest of the widgets will behave too.

Installation best practices

  • Paste the whole block in one place. All three parts go into a single HTML embed block, in the exact spot on the page where the widget should appear. It has to land in the page itself, not inside an embedded frame.
  • Install only on the pages that show the widget. Nothing needs to be added site-wide. The one exception is a floating widget such as the TopRec bar: if you want it visible on every page, add its code to your platform's site-wide custom code area rather than page by page.
  • Give it room to breathe. Widgets adapt to the width of their container and grow vertically with their content. Give the embed block the full width of its section and avoid setting a fixed height on it.
  • Test before you go live. There is no domain whitelisting on our side, so your widgets work on a staging or development address straight away. Install one widget there first and confirm it renders before wiring up the rest.
Idea: If you have several widgets on the same page, you can move the loader script (the first line of the code) into your site's head section once, so it is not loaded multiple times. Each widget then keeps just its own container and configuration script. This is an optional tidy-up, not a requirement: every widget also works with its full block pasted as is.
Success: Once the page is published you should see the widget render with your company branding and live data. If the space stays empty, check that your platform allows custom scripts on your plan and that the whole code block was pasted, including the first loader line.

Moving or rebuilding your website

Your embed codes are not tied to a particular website, so when you rebuild or change platform you can reuse the same code as is: copy it from your dashboard again (or from your old site) and paste it into the new one. There is no need to regenerate anything.

The one thing to plan around is your job links. Every job detail link Refari generates (in emails, job alerts and the Latest Jobs widget) is built from the address of the page that hosts your job board, called the Base URL. When your website moves, two things keep those links working:

  1. Keep your job board page at the same address if you can. If the address has to change, set up a 301 redirect from the old page to the new one that preserves everything after the question mark, so job links already out in emails and search results keep resolving.
  2. Update your Base URL under Settings > Job Board Settings, so newly generated links point at the new page.

For a walkthrough of where the setting lives and how it behaves, see How to set a Base URL for each of your job boards ↗

Final Notes

Every widget page in your dashboard follows the same pattern: customise, COPY ALL, paste. If you are working with a web developer or design partner building your site, the simplest hand-off is to send them the copied code blocks along with a note of which page each widget belongs on. And if your platform is not listed above or something does not render as expected, get in touch with us and we will point you in the right direction.

Other articles you might be interested in:  How to install widgets with Elementor  |  Latest Jobs Widget - How to install it and the customisation available  |  How to set a Base URL for each of your job boards

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article