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

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

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

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

## 임베드(Embed)란?

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

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

**모델 뷰어 임베드 링크 획득 방법**은 [**\[4.3. 모델뷰어: 공유/임베드\]**](https://docs.archisketch.com/reference/model-viewer-%EA%B3%B5%EC%9C%A0%EC%9E%84%EB%B2%A0%EB%93%9C) 페이지에서 확인하실 수 있습니다.
{% endhint %}

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

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

{% stepper %}
{% step %}

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

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

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

{% step %}

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

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

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

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

{% step %}

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

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

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

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

**모델 뷰어 임베드 링크 획득 방법**은 [**\[4.3. 모델뷰어: 공유/임베드\]**](https://docs.archisketch.com/reference/model-viewer-%EA%B3%B5%EC%9C%A0%EC%9E%84%EB%B2%A0%EB%93%9C) 페이지에서 확인하실 수 있습니다.
{% endhint %}

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

{% step %}

### 저장하기

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

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

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

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

{% stepper %}
{% step %}

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

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

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

{% step %}

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

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

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

{% step %}

### 코드 보기 버튼 클릭

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

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

{% step %}

### iframe 태그 삽입

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

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

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

**모델 뷰어 임베드 링크 획득 방법**은 [**\[4.3. 모델뷰어: 공유/임베드\]**](https://docs.archisketch.com/reference/model-viewer-%EA%B3%B5%EC%9C%A0%EC%9E%84%EB%B2%A0%EB%93%9C) 페이지에서 확인하실 수 있습니다.
{% endhint %}

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.archisketch.com/dev-guide/builder/cafe24/model-viewer-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.