> For the complete documentation index, see [llms.txt](https://guide.roundhr.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.roundhr.com/homepage_builder_guide/setting/embed.md).

# 임베드 설정

채용 공고를 외부 웹사이트에 임베드하거나, 채용 홈페이지에 커스텀 스크립트 코드를 삽입하여 추가 기능을 연동할 수 있습니다.

## 개요

채용 공고를 외부 웹사이트에 삽입하거나, 채용 홈페이지에 커스텀 스크립트 코드를 추가하는 방법을 안내합니다.

### 핵심 이점

* 자사 웹사이트에 채용 공고 목록, 공고 상세, 지원서 페이지를 직접 임베드할 수 있습니다.
* 별도 개발 없이 DIV 코드와 스크립트 코드를 복사하여 붙여넣기만 하면 됩니다.
* 커스텀 스크립트 삽입으로 추가 트래킹 및 분석 도구를 연동할 수 있습니다.

***

## 사전 준비

* **권한**: 관리자 권한이 필요합니다. 매니저는 별도 권한 부여 시 편집할 수 있습니다.
* **외부 웹사이트 편집 권한**: 임베드 코드를 삽입할 웹사이트의 HTML 편집 권한이 필요합니다.

***

## 1. 채용 공고 임베드

* \[채용 홈페이지] > \[임베드] 메뉴로 이동합니다.
* 임베드할 페이지 유형을 선택합니다.
  * **공고 리스트**: 전체 채용 공고 리스트를 표시합니다.
  * **공고 상세**: 특정 채용 공고의 상세 페이지를 표시합니다.
  * **공고 지원**: 특정 공고의 지원서 양식을 표시합니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-91b6010746a874f6e9c290901c3ba79fbe71ae6b%2Fhpb_setting_embed_s1_01.png?alt=media" alt="채용 홈페이지 > 임베드 화면의 공고 리스트 임베드 카드. 페이지 유형과 레이아웃 드롭다운, DIV 코드와 스크립트 코드"><figcaption><p>임베드할 페이지 유형 선택</p></figcaption></figure>

{% hint style="info" %}
공고 리스트 페이지는 **기본형**과 **사이드 필터형** 중 선택할 수 있습니다. 사이드 필터형은 좌측에 필터 영역이 함께 표시됩니다. 레이아웃 선택은 공고 리스트에서만 제공됩니다.
{% endhint %}

{% hint style="warning" %}
외부 사이트에 임베드한 경우 **지원자 로그인 기능은 사용할 수 없습니다.** 임베드 화면 상단에도 같은 안내가 표시됩니다.
{% endhint %}

***

## 2. 임베드 코드 복사 및 삽입

* 페이지 유형을 선택하면 **DIV 코드**와 **스크립트 코드**가 자동으로 생성됩니다.
* DIV 코드의 \[복사] 버튼을 클릭하여 코드를 복사합니다.
* 외부 웹사이트 HTML에서 임베드를 표시할 위치에 DIV 코드를 붙여넣습니다.
* 스크립트 코드의 \[복사] 버튼을 클릭하여 코드를 복사합니다.
* 외부 웹사이트 HTML의 `</body>` 태그 앞에 스크립트 코드를 붙여넣습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-289771fa0914052cdfbae88cf6b82c3b7eb13b4a%2Fhpb_setting_embed_s2_01.png?alt=media" alt="선택한 유형에 맞춰 생성된 DIV 코드와 스크립트 코드. 각 코드 우측에 복사 버튼"><figcaption><p>DIV 코드와 스크립트 코드 복사</p></figcaption></figure>

{% hint style="info" %}
DIV 코드에는 `id="round_embed"`가 포함됩니다. **공고 리스트**를 선택하면 레이아웃을 지정하는 `data-job-layout` 속성이 함께 들어갑니다(기본형은 `base`). 이 속성값을 임의로 수정하면 임베드가 정상 작동하지 않습니다.
{% endhint %}

***

## 3. 스크립트 코드 삽입

* \[채용 홈페이지] > \[임베드] 메뉴에서 **스크립트 코드 임베드** 영역으로 이동합니다.
* 입력란에 삽입할 JavaScript 코드를 붙여넣습니다.
* \[저장] 버튼을 클릭합니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-3b69d90be4046addbc5db18764026ad201703728%2Fhpb_setting_embed_s3_01.png?alt=media" alt="임베드 화면 하단의 스크립트 코드 임베드 영역. 채용 홈페이지에 삽입할 JavaScript를 입력하는 코드 입력란"><figcaption><p>스크립트 코드 임베드 입력란</p></figcaption></figure>

{% hint style="warning" %}
스크립트 코드 삽입 시 반드시 다음 사항을 확인해 주세요.

* 신뢰할 수 있는 출처의 스크립트만 추가하세요.
* 검증되지 않은 스크립트는 **사용자 정보 유출** 및 **보안 취약점**을 유발할 수 있습니다.
* 스크립트 내용을 반드시 사전에 검토한 후 추가해 주세요.
* 가능하면 공식 분석 도구(Google Analytics, GTM 등)의 서비스 연동 기능을 사용하는 것을 권장합니다.
  {% endhint %}

***

## 자주 묻는 질문

<details>

<summary>임베드 코드를 삽입했는데 페이지가 표시되지 않아요.</summary>

DIV 코드와 스크립트 코드가 모두 삽입되었는지 확인해 주세요. DIV 코드만 삽입하면 채용 공고가 로드되지 않습니다. 또한 DIV 코드의 `id="round_embed"` 속성이 변경되지 않았는지 확인이 필요합니다.

</details>

<details>

<summary>공고 목록의 레이아웃을 변경할 수 있나요?</summary>

네, 임베드 설정에서 공고 리스트 페이지의 레이아웃을 **기본형**과 **사이드 필터형** 중 선택할 수 있습니다. 레이아웃을 변경하면 임베드 코드가 새로 생성되므로 외부 웹사이트의 코드도 함께 업데이트해 주세요.

</details>

<details>

<summary>커스텀 스크립트 코드는 어떤 경우에 사용하나요?</summary>

별도의 트래킹 코드, dataLayer 스크립트, 또는 서비스 연동에서 제공하지 않는 분석 도구를 추가할 때 사용합니다. 다만 Google Analytics, GTM 등 라운드HR에서 공식 지원하는 도구는 \[서비스 연동] 메뉴를 통해 연동하는 것이 더 안전하고 편리합니다.

</details>