# 2.3. 샵바이: 모델 뷰어 삽입하기(Embed)

## 샵바이(Shop by): 모델 뷰어 삽입 방법

**샵바이 관리자 > 상품 관리** 상세 페이지에서 아키스케치 모델 뷰어를 삽입할 수 있습니다. 자세한 내용은 아래의 각 목차를 확인해주세요.

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

## 임베드(Embed)란?

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

{% 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)하기

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

{% stepper %}
{% step %}

### 1. 샵바이 관리자 로그인 및 상품 관리 페이지로 이동.

**샵바이 관리자 대시보드**에서 **상품 관리 > 상품 정보 조회/수정**(또는 **상품 등록**) 메뉴 버튼을 클릭하여 이동해주세요. 그 후, 상품 목록 페이지에서 모델 뷰어를 임베드하려는 상품을 선택합니다.

![](/files/d8f2f66f9b14b6e05febdb8a3607afecb4ab8b40)
{% endstep %}

{% step %}

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

상품 상세 페이지에서 **상품 상세 탭**으로 이동한 후, **코드 보기 버튼**을 클릭해주세요.\
\&#xNAN;*(\* 상품 상세 탭 편집기 상태가 **"사용함"**&#xC73C;로 설정되어 있어야 임베딩이 가능합니다.)*

![](/files/65027d7e41ea054be7e2021c23861be9cae90600)
{% endstep %}

{% step %}

### 3. < 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 %}

![](/files/de7fb4b117d690f3dbd36cc10ca51fe977538815)

상품 상세 영역 > HTML 뷰어

![](/files/daac2bdb2fb6eb84ecba5f94be2a3b5330d1c3bd)

**코드 보기**를 다시 클릭하시면, 적용된 모델 뷰어를 확인 할 수 있습니다.
{% endstep %}

{% step %}

### 4. 수정된 제품 데이터 저장

**모델 뷰어** 삽입 작업을 완료하셨다면, **\[저장]** 버튼을 클릭하여, 제품을 수정해주세요.
{% 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/shopby/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.
