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 can run them, whatever framework it uses behind the scenes.

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.
Wix, Squarespace, Webflow, Framer, Duda, Weebly, GoDaddy and similar site builders Use the platform's Embed or custom code element and paste the code into it.
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.

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.
  • 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