Careers widget

Add it

Paste this where the jobs should appear, with the address of your organization page on jobs.ly in place of your-company. Employers find it ready-made, with their address, in Organization settings.

<div data-jobsly-company="your-company">
  <a href="https://jobs.ly/en/companies/your-company">Our jobs on jobs.ly</a>
</div>
<script src="https://jobs.ly/embed.js" async></script>

For a recruitment agency's client

An agency shows the jobs it posts for one client with that client's own code, on the client's page (Clients → the client → Profile). It names the client by a key, not by the client's page address: if the organization later takes over its page on jobs.ly, the box never starts showing the organization's own jobs. From then on it shows no jobs, so remove it from the website.

<div data-jobsly-client="the-client-key">
  <a href="https://jobs.ly/en">Jobs in Libya on jobs.ly</a>
</div>
<script src="https://jobs.ly/embed.js" async></script>

Codes made earlier with data-jobsly-company keep working and still show that organization's jobs.

The link inside the box is what visitors and search engines see if the script doesn't run. Once the jobs are shown, it becomes the line under them. Codes without a link keep working and show «jobs.ly» there instead.

Options

<div data-jobsly-company="your-company"
     data-theme="jobsly"
     data-accent="#204466"
     data-lang="en"
     data-limit="5"></div>
<script src="https://jobs.ly/embed.js" async></script>

How it behaves

• It loads only when it scrolls into view, so it doesn't slow the page down.
• Its layout is protected from the website's own styles, but it keeps the website's font and text colour.
• Each job opens its jobs.ly page. Visitors follow the application method shown there; some applications are completed outside jobs.ly.

Jobs don't show?

• Only open jobs appear: a new organization's first job shows once jobs.ly has approved the organization.
• If the website sends a Content-Security-Policy, add https://jobs.ly to script-src and connect-src (and to frame-src when using the frame below). Without it, browsers block the widget for visitors, while the site's editor preview may still show it.
• Speed plugins that delay scripts until the visitor scrolls or clicks (for example FlyingPress or WP Rocket's “Delay JavaScript”) hold the widget back until then: exclude jobs.ly/embed.js. After a change, clear the site's page cache (and Cloudflare's, if used).

Website that doesn't accept scripts?

Some site builders don't allow <script>. Use a frame instead:

<iframe src="https://jobs.ly/embed/your-company?lang=en" title="jobs.ly"
        style="width:100%;height:520px;border:0" loading="lazy"></iframe>

For an agency's client, the frame's address has the client's key:

<iframe src="https://jobs.ly/embed/client/the-client-key?lang=en" title="jobs.ly"
        style="width:100%;height:520px;border:0" loading="lazy"></iframe>

The frame tells the page around it how tall its list is: a message event with { type: "jobsly:height", height } (in pixels), sent when it loads and when its size changes. If the site allows a small script, let the frame take that height, so it never shows a scrollbar or empty space:

<iframe id="jobsly-jobs" src="https://jobs.ly/embed/your-company?lang=en" title="jobs.ly"
        style="width:100%;height:520px;border:0" loading="lazy"></iframe>
<script>
  addEventListener("message", function (e) {
    if (e.origin !== "https://jobs.ly" || !e.data || e.data.type !== "jobsly:height") return;
    document.getElementById("jobsly-jobs").style.height = e.data.height + "px";
  });
</script>