Embloy-Examples

Example implementations of Embloy-Quicklink in different frameworks & languages

Introduction

To facilitate use of Embloy's Quicklink API, we generously provided possible (simple) integrations of Embloy's Quicklink, implemented using the most popular languages and frameworks. In most cases, all it takes is not more than ~10 LOC to integrate Embloy Quicklink into your own job posting service. E.g.:

In your backend add a make_request endpoint:

// Call the Embloy SDK to request a link to an application session
const embloy = new EmbloyClient(
    process.env.CLIENT_TOKEN,
    new EmbloySession("job", jobSlug)
);
const url = await embloy.makeRequest();

// Return the URL to the client
res.status(200).json({ url: url });

In your frontend call this endpoint whereever you want:

// Call your endpoint
const response = await fetch("/api/example?job_slug=<your-job-slug>", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
});

// Redirect the user to the obtained URL from the response
window.location.href = await response.json().url;

How To Use

Choose your framework and cd into the respective directory. There you will find detailed instructions on how to set up and start the clients and servers.

Note: You will have to set your client_token in the directory's .env file, if you want to set all .env files at once, you can run:

./config/env_setter -t <your-client-token>

Supported frameworks

• Angular
• Astro + Express
• Blazor + ASP.NET Core using
• Django
• Next.js + FastAPI
• Next.js + Flask
• Next.js + TypeScript
• React + Express
• React + Laravel
• Ruby on Rails
• Spring-Boot
• SvelteKit + Express
• Vue + Gin-Gonic

Fully tested frameworks on remote servers and chromium & firefox clients

• Angular
• Astro + Express
• Blazor + ASP.NET Core using
• Django (see https://genius.embloy.com)
• Next.js + FastAPI
• Next.js + Flask
• Next.js + TypeScript (see https://example.embloy.com)
• React + Express
• React + Laravel
• Ruby on Rails (see https://example-rails.onrender.com)
• Spring-Boot
• SvelteKit + Express
• Vue + Gin-Gonic (see https://embloy-examples-vue-gin.onrender.com/)

Embloy-Button

You can customize the "apply with embloy" button however you want, but here are some default examples:

• Plain dark (HTML)

  

  <a href="<insert-your-redirect-url-here>" target="_blank" rel="noopener noreferrer">
      <img src="https://embloy.com/images/button-black_large.svg" style="width: 300px; height: auto;">
  </a>

• Plain light (HTML)

  

  <a href="<insert-your-redirect-url-here>" target="_blank" rel="noopener noreferrer">
      <img src="https://embloy.com/images/button-white_large.svg" style="width: 300px; height: auto;">
  </a>

• Plain colorful (HTML)

  

  <a href="<insert-your-redirect-url-here>" target="_blank" rel="noopener noreferrer">
      <img src="https://embloy.com/images/button-purple_large.svg" style="width: 300px; height: auto;">
  </a>

• Modern-Dark (TypeScript+TailwindCSS)

  

  <a
  className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
  href="https://embloy.com"
  target="_blank"
  rel="noopener noreferrer"
  >
  Apply with {' '}
  <Image
      src="https://raw.githubusercontent.com/Embloy/Embloy-Examples/main/config/assets/embloy.svg"
      alt="Embloy logo"
      width={100}
      height={24}
      priority
  />
  </a>

• Logo-Only-Monochrome-Dark (HTML+TailwindCSS)

  

  <a
  className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
  href="https://embloy.com"
  target="_blank"
  rel="noopener noreferrer"
  >
  Apply with {' '}
  <Image
      src="https://raw.githubusercontent.com/Embloy/Embloy-Examples/main/config/assets/logo_black_white.svg"
      alt="Embloy logo"
      width={50}
      height={50}
      priority
  />
  </a>

---

© Carlo Bortolan, Jan Hummel

Carlo Bortolan  ·  GitHub @carlobortolan  ·  contact via [email protected]

Jan Hummel  ·  GitHub @github4touchdouble  ·  contact via [email protected]