> For the complete documentation index, see [llms.txt](https://docs.archisketch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.archisketch.com/guide/dev-kr/builder/cafe24/model-viewer-embed.md).

# 1.6. 카페24: 모델 뷰어 삽입하기(Embed)

## 카페24: 모델 뷰어 삽입 방법

**카페24 관리자 > 상품 목록**에서 아키스케치 모델 뷰어를 **2가지 방법**으로 삽입할 수 있습니다.

{% embed url="<https://cylinder.archisketch.com/?id=X1MNWceF0DE919CAF004414>" %}

## 임베드(Embed)란?

**임베드**(embed)는 다른 웹사이트나 애플리케이션에서 특정 콘텐츠를 가져와서 자신의 웹페이지에 삽입하는 방법을 말합니다. 카페24에서는 이미지, 동영상 등 다양한 콘텐츠를 외부 웹사이트나 블로그에 삽입할 수 있습니다.

{% hint style="info" %}
참조: 아키스케치 모델 뷰어 임베드 링크 획득 방법

**모델 뷰어 임베드 링크 획득 방법**은 [4.3. 모델 뷰어: 공유/임베드](/guide/dev-kr/contents/model-viewer/share-embed.md) 페이지에서 확인하실 수 있습니다.
{% endhint %}

## 에디봇을 활용하여 임베드(Embed)하기

**카페24의 에디봇**을 활용하여 모델 뷰어를 웹사이트나 상품 페이지에 손쉽게 임베드할 수 있습니다. 아래 단계별 안내에 따라 에디봇을 사용하여 모델 뷰어를 임베드해 보세요.

{% stepper %}
{% step %}

### 카페24 관리자 로그인 및 상품 목록 페이지로 이동

**카페24 관리자 대시보드**에서 **상품 관리 > 상품 목록**으로 이동해주세요. 그 후, 상품 목록 페이지에서 모델 뷰어를 임베드하려는 상품을 선택합니다.

![카페24 관리자 상품 목록 화면](/files/RbR4RoWJapDs1yo7bsRo)
{% endstep %}

{% step %}

### 상품 상세 페이지 편집

상품 목록의 상품들을 클릭하여 임베드 콘텐츠를 넣을 상품 상세 페이지를 열어주세요.

그런 다음, **상품 상세 설명 탭**에서 **에디봇 수정하기 버튼**을 클릭해주세요.

![상품 상세 설명 탭의 에디봇 수정하기 버튼](/files/xJDGo1F2MeFl1bNKsmXM)
{% endstep %}

{% step %}

### 에디봇에서 HTML 입력 기능 사용

에디봇 에디터에서 **HTML 입력**을 클릭 하신 후, **HTML 입력창**을 원하는 곳에 배치해주세요.

그런 다음, **HTML 입력란**에 **아키스케치 모델 뷰어 임베드 링크**를 넣고 적용 버튼을 눌러주세요.

{% hint style="info" %}
참조: 아키스케치 모델 뷰어 임베드 링크 획득 방법

**모델 뷰어 임베드 링크 획득 방법**은 [4.3. 모델 뷰어: 공유/임베드](/guide/dev-kr/contents/model-viewer/share-embed.md) 페이지에서 확인하실 수 있습니다.
{% endhint %}

![에디봇 HTML 입력 화면](/files/IHgpVXT05gMT2GBp0dcj)
{% endstep %}

{% step %}

### 저장하기

에디봇 에디터의 상단 **\[수정 완료]**&#xBC84;튼을 클릭하여 저장하고, **적용된 모델 뷰어**가 **제품 상세페이지**에 정상적으로 삽입되었는지 확인합니다.

![적용된 모델 뷰어 확인 화면](/files/LlJCjhbb9bol8QktvTEb)
{% endstep %}
{% endstepper %}

## 직접 작성 에디터를 활용하여 임베드(Embed)하기

카페24의 **직접 작성 에디터**를 활용하여 모델 뷰어를 웹사이트나 상품 페이지에 손쉽게 임베드할 수 있습니다. 아래 단계별 안내에 따라 직접 작성 에디터를 사용하여 모델 뷰어를 임베드해 보세요.

{% stepper %}
{% step %}

### 카페24 관리자 로그인 및 상품 목록 페이지로 이동

**카페24 관리자 대시보드**에서 **상품 관리 > 상품 목록**으로 이동해주세요. 그 후, 상품 목록 페이지에서 모델 뷰어를 임베드하려는 상품을 선택합니다.

![카페24 관리자 상품 목록 화면](/files/7U6W4f7Hc1hZbUxmlOnq)
{% endstep %}

{% step %}

### 상품 상세 페이지 편집

상품 상세 페이지에서 **상품 상세 설명 탭**으로 이동해주세요. 그 후, **상품 상세 설명 탭**에서 **직접 작성 탭**을 클릭해주세요.

![직접 작성 탭 화면](/files/wiIKAGG1qFgi3rMA6mli)
{% endstep %}

{% step %}

### 코드 보기 버튼 클릭

**직접 작성 탭** 하단 메뉴에서 **코드 보기**버튼을 클릭해주세요.

![코드 보기 버튼 화면](/files/g85482IRJGcWnhGVhVGa)
{% endstep %}

{% step %}

### iframe 태그 삽입

**코드 보기** 버튼 클릭 후, 등장한 **HTML 입력란**에 **아키스케치 모델 뷰어 임베드 링크**를 넣어주세요.

그리고 다시 **코드 보기** 버튼을 클릭하시면, **삽입된 모델 뷰어**를 확인 할 수 있습니다.

{% hint style="info" %}
참조: 아키스케치 모델 뷰어 임베드 링크 획득 방법

**모델 뷰어 임베드 링크 획득 방법**은 [4.3. 모델 뷰어: 공유/임베드](/guide/dev-kr/contents/model-viewer/share-embed.md) 페이지에서 확인하실 수 있습니다.
{% endhint %}

![직접 작성 탭 > HTML 뷰어](/files/YHefb4yGaqV7OR03JCRz)

![코드 보기 후 적용된 모델 뷰어 확인 화면](/files/ILKwJTC5662FMjllCy1N)
{% endstep %}
{% endstepper %}