임베드 설정

외부 사이트에 공고 목록, 공고 상세/지원 섹션을 임베드하는 방법입니다.

지원 범위

• 공고 목록 섹션

• 특정 공고의 상세 페이지

• 특정 공고의 지원 페이지

빠른 시작

1. 컨테이너 추가

• 포함할 페이지의 원하는 위치에 아래의 컨테이너 태그를 배치합니다.

• 표시할 유형에 맞춰 속성을 추가합니다.

<div id="round_embed"></div>

1. 스크립트 로드

<script src="https://recruit.roundhr.com/{code}/embed"></script>

• {code} = 고객사의 채용 사이트 코드

• 페이지의 HTML 본문 태그 끝에 태그를 추가합니다:

---

속성(Attributes)

모든 옵션은 #round_embed의 data-속성으로 설정합니다.

공고 목록 속성

속성	설명	타입	값	기본값
data-job-layout	리스트 레이아웃	string	"base" | "sidebar"	"base"
data-pagination-enable	페이지네이션 사용	boolean(string)	"true" | "false"	"true"
data-items-per-page	페이지당 공고 수	number(string)	양의 정수	"10"
data-size	디자인 유형 크기	string	"small" | "medium" | "large"	"medium"
data-show-filter	필터 노출(직무/경력/형태/상태)	boolean(string)	"true" | "false"	"true"
data-dark-mode	다크 모드	boolean(string)	"true" | "false"	"false"

data-job-layout

레이아웃 타입을 설정합니다.

• 타입: string

• 값: "base" | "sidebar"

• 기본값: "base"

<div id="round_embed" data-job-layout="base"></div>
<div id="round_embed" data-job-layout="sidebar"></div>

data-pagination-enable

페이지네이션 사용 여부를 설정합니다.

• 타입: boolean (문자열)

• 값: "true" | "false"

• 기본값: "true" (설정하지 않은 경우)

<!-- 페이지네이션 사용 -->
<div id="round_embed" data-pagination-enable="true"></div>

<!-- 페이지네이션 비활성화 (per=1000으로 호출, 페이지네이션 컴포넌트 숨김) -->
<div id="round_embed" data-pagination-enable="false"></div>

주의: data-pagination-enable="false"로 설정하면 data-items-per-page 값과 관계없이 per=1000으로 호출하고 페이지네이션 컴포넌트를 숨깁니다.

data-items-per-page

페이지당 표시할 공고 아이템 수를 설정합니다.

• 타입: number (문자열)

• 값: 양의 정수

• 기본값: 10

<!-- 페이지당 20개 공고 표시 -->
<div id="round_embed" data-items-per-page="20"></div>

주의: data-pagination-enable="false"가 설정되어 있으면 이 값은 무시됩니다.

data-size

공고 아이템의 사이즈를 설정합니다.

• 타입: string

• 값: "small" | "medium" | "large"

• 기본값: "medium"

<div id="round_embed" data-size="small"></div>
<div id="round_embed" data-size="medium"></div>
<div id="round_embed" data-size="large"></div>

data-show-filter

필터 표시 여부를 설정합니다.

• 타입: boolean (문자열)

• 값: "true" | "false"

• 기본값: "true" (설정하지 않은 경우)

<!-- 필터 표시 -->
<div id="round_embed" data-show-filter="true"></div>

<!-- 필터 숨김 -->
<div id="round_embed" data-show-filter="false"></div>

"true"로 설정하면 모든 필터(직무, 경력, 고용형태, 상태)가 활성화되고, "false"로 설정하면 모든 필터가 비활성화됩니다.

data-dark-mode

다크모드 여부를 설정합니다.

• 타입: boolean (문자열)

• 값: "true" | "false"

• 기본값: "false" (설정하지 않은 경우)

<!-- 다크모드 활성화 -->
<div id="round_embed" data-dark-mode="true"></div>

공고 상세/지원 폼 속성

속성	설명	타입	값	기본값
data-form-id	특정 공고 코드	string	공고 코드	-
data-form-type	지원 폼 타입	string	"apply"	-

data-form-id

특정 공고의 상세 페이지를 설정합니다.

• 타입: string

• 값: 공고 코드

<div id="round_embed" data-form-id="{공고코드}"></div>

data-form-type

특정 공고의 지원 페이지를 설정합니다. data-form-id와 함께 사용합니다.

• 타입: string

• 값: "apply"

<div id="round_embed" data-form-id="{공고코드}" data-form-type="apply"></div>

사용 예시

기본 공고 리스트

<div id="round_embed" data-job-layout="base"></div>

<script src="https://recruit.roundhr.com/{code}/embed"></script>

페이지네이션 없이 모든 공고 표시

<div id="round_embed" data-pagination-enable="false"></div>

<script src="https://recruit.roundhr.com/{code}/embed"></script>

커스텀 설정이 적용된 공고 리스트

<div
  id="round_embed"
  data-job-layout="sidebar"
  data-items-per-page="20"
  data-size="large"
  data-show-filter="true"
  data-dark-mode="false"
></div>

<script src="https://recruit.roundhr.com/{code}/embed"></script>

특정 공고의 상세 페이지 표시

<div id="round_embed" data-form-id="{공고코드}"></div>

<script src="https://recruit.roundhr.com/{code}/embed"></script>

특정 공고의 지원 페이지 표시

<div id="round_embed" data-form-id="{공고코드}" data-form-type="apply"></div>

<script src="https://recruit.roundhr.com/{code}/embed"></script>