> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/userguide/widget/apply-widget.md).

# 쇼핑몰에 위젯 적용하기

찰나 서비스에서 제작한 위젯은 HTML 편집기를 지원하는 모든 자사몰 플랫폼에서 사용할 수 있습니다.

### 플로팅 위젯 적용하기

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F42vKr0fJJ0Kww82cGd8v%2F1.png?alt=media&amp;token=fc23a3c3-92aa-449c-a02b-de8a125d3cf4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FYOEpyJ7VrP1Zrombnh1t%2F2.png?alt=media&amp;token=d85c4f85-56d1-4ca4-83c0-228faa0bee17" alt=""><figcaption></figcaption></figure>

1. 위젯 목록 혹은 위젯 편집 화면에서 코드를 복사합니다.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FW5Um7DcQmXiavH8Okre9%2F3.png?alt=media&amp;token=3d9f4739-d674-4278-8fbd-ea9b9fa92e44" alt=""><figcaption></figcaption></figure>

2. 복사한 코드를 위젯을 추가하려는 페이지의 HTML 편집 화면에 붙여넣기 한 후 변경 사항을 저장합니다.

{% hint style="info" %}
**플로팅 위젯은 코드를 붙여넣기 한 위치와 상관없이, 찰나에서 설정한 플로팅 위젯 위치에 표시됩니다.**
{% endhint %}

### 슬라이드 위젯 / 멀티샵 플레이어 위젯/스포트라이트 위젯 적용하기

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FN9RTEfNZPg8PW77flvHq%2F1.png?alt=media&amp;token=72088939-75d6-4d40-a1c5-92dce7ec458f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FLE2RT3pVGQ6pb8ArnpPq%2F2.png?alt=media&amp;token=56a6dba7-b7e0-45e4-809e-1215d6d9689a" alt=""><figcaption></figcaption></figure>

1. 위젯 목록 혹은 위젯 편집 화면에서 코드를 복사합니다.
2. 복사한 코드를 위젯을 추가하려는 페이지의 HTML 편집 화면에 붙여넣기 한 후 변경 사항을 저장합니다.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FEIY5VqcitspTPX7Fpi4O%2Fimage.png?alt=media&amp;token=21cecc15-400d-43de-a5b9-3aeda07351a9" alt=""><figcaption></figcaption></figure>

### 히어로 배너 위젯 (메인 상단 배너) 적용하기&#x20;

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FAFTUyR75TAwgr95f2D1H%2Fimage.png?alt=media&amp;token=1c92a837-444e-40b0-b894-d3e150c6be26" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FEmBpNAtgjC9lvmNK4aMh%2Fimage.png?alt=media&amp;token=1339c024-1ad5-452d-8fc7-6f34a2f06ea0" alt=""><figcaption></figcaption></figure>

1. 위젯 목록 혹은 위젯 편집 화면에서 코드를 복사합니다.
2. 복사한 코드를 위젯을 추가하려는 페이지의 HTML 편집 화면에 붙여넣기 한 후 변경 사항을 저장합니다.

{% hint style="warning" %}
**상품 상세페이지에 위젯을 적용하기 위해서는 반드시 개별 상세 페이지 제작 화면에서 위젯 코드를 추가해야 합니다.**
{% endhint %}

{% hint style="warning" %}
**\[카페24] 플랫폼 상품 상세페이지에서 위젯을 사용하시려면 반드시** [**관련 가이드 문서**](https://support.charlla.io/userguide/widget/apply-widget/widget-in-product-details)**를 참고하세요**
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://support.charlla.io/userguide/widget/apply-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
