> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/guide-for-sellers/display-module-guide/cafe24.md).

# 카페24 가이드

MODULE APPLICATION (카페24)

본 문서는 카페24 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FelzZSONwfoOUPqqjtYvc%2Fimage.png?alt=media&amp;token=a2bd9053-c68d-4c57-baf4-d14cecd4b994" alt=""><figcaption></figcaption></figure>

1. 관리툴에서 [`전시모듈 코드를 복사`](/livesolution/guide-for-sellers/display-module-management.md#codecpoy)해 주세요.&#x20;
2. 카페24 관리자 페이지 > 디자인 편집창에 진입하여 HTML 입력 영역에서 모듈 삽입 위치를 확인해 주세요.
3. HTML 입력 영역에 복사한 전시모듈 코드를 붙여넣어 주세요.
4. 편집사항을 저장하고, 자사몰에 적용된 내용을 확인합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FV3dzovPMHjMpIZANqTrI%2Fimage.png?alt=media&amp;token=e0007a96-c49b-494e-b0f4-ef11ea00468d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FXAd05pPUM3ak3H6LjZD7%2Fimage.png?alt=media&amp;token=ab81636c-e701-4c1e-a25b-b07b68ac0392" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 1`**</mark>**&#x20; 카페24 쇼핑몰 관리자 로그인**

카페24 쇼핑몰 관리자 로그인 페이지에 진입하여 로그인 혹은 회원가입을 진행합니다.&#x20;

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fp2Phj3EKaLEtDDPxptub%2Fimage.png?alt=media&amp;token=9038aa30-ba3b-41bc-b133-9d55194b3d55" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 템플릿 생성**

<mark style="color:blue;">**2-1**</mark>  새로운 디자인 템플릿 생성\
디자인 (PC/모바일) > 디자인 보관함 > 기본 디자인 추가 혹은 카페24 디자인 센터에서 디자인 템플릿 구입 > 디자인명 입력 및 디자인 템플릿 선택 > 추가 버튼 클릭&#x20;

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FCsp2dPsrWccBpsPmW4Fv%2Fimage.png?alt=media&amp;token=5ada26ed-88fc-4d63-b900-0aacb530331c" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**2-2**</mark>  기존에 있던 디자인 템플릿 복사하여 사용\
디자인(PC/모바일) > 디자인 보관함 > 기존 템플릿 선택 > 복사 버튼 클릭 > 복사 디자인명 입력 > 저장 버튼 클릭

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FGcpucdpThHzZDAZ41b5W%2Fimage.png?alt=media&amp;token=86cd3edc-a8be-43d7-90bd-c1f2f0ecb70e" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 3`**</mark>**&#x20; 디자인 템플릿 편집**

생성된 디자인의 편집 버튼 클릭 > 스마트 디자인 편집창 열기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fg7kB3uai0BqQJOYQ24TL%2Fimage.png?alt=media&amp;token=e731740d-d74a-4569-9466-21732e9be9c3" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 4`**</mark>**&#x20; HTML 편집 영역에 코드 붙여넣기**

{% hint style="warning" %}
전시 모듈은 총 네 가지 케이스로 붙여 넣기가 가능합니다. 원하는 케이스에 맞는 적용 방법을 확인해 주세요.

1. [방송 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-broadcastlist)
2. [전체 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-livelist)
3. [방송 목록 모듈 + 전체 목록 모듈 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#broadcastlist-and-livelist)
4. [방송 목록 모듈 + 전체 목록 모듈 + 예고 페이지 모듈 모두 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#all)
   {% endhint %}

{% tabs %}
{% tab title="방송 목록 모듈 적용 방법" %}
**삽입 위치 지정하기**

1. 좌측 메뉴 트리에서 모듈을 삽입하고 싶은 화면 클릭하기
2. 우측 미리보기와 HTML 편집 영역에서 모듈 삽입을 원하는 위치 확인하기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FaNlpaGM6hs9NXBOIO86K%2Fimage.png?alt=media&amp;token=af776b2c-eccb-430a-8d9e-3e24926b62ae" alt=""><figcaption></figcaption></figure>

**코드 설정하기**

3. HTML 편집 영역에 복사한 모듈 코드 붙여넣기
4. \[저장] 버튼 눌러 저장하기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FBaM3HedAuwzds5umX3kp%2Fimage.png?alt=media&amp;token=3c060533-4955-41a8-b8bb-34e4c90183c6" alt=""><figcaption></figcaption></figure>

5. 자사몰 전시페이지에서 정상적으로 노출되는지 확인하기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F68oU0FQfvMvB5yd0oq2u%2F(%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC)%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5.png?alt=media&amp;token=f1bdae64-3a44-4479-99b5-74b242947bc4" alt=""><figcaption></figcaption></figure>

쇼핑몰 메인 페이지에 '방송 목록 모듈'을 넣는 경우, \ <mark style="color:purple;">●</mark> 메인 페이지 화면 클릭 후 > <mark style="color:orange;">●</mark> 메인 페이지 안, <mark style="color:green;">●</mark> 원하는 영역에 복사한 모듈 코드를 붙여 넣어 주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F7q0iVeOMjcok5DHuzPPd%2Fimage.png?alt=media&amp;token=0d659ea1-e686-4f3b-b31f-f112b6b55d0f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="전체 목록 모듈 적용 방법" %}
**전체 목록 모듈이 노출될 화면 추가하기**

1. \[화면추가] 버튼 클릭
2. 추가되는 화면의 파일명은  `/livelist.html` 입력하여 저장하기

{% hint style="warning" %}
추가하는 화면의 파일명은 반드시 `/livelist.html` 로 입력하여 저장해주세요.

파일명을 변경하여 저장할 경우, 전체 목록 모듈이 정상적으로 동작하지 않습니다.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fby7Eeb31WvyCL94EGLn1%2Fimage.png?alt=media&amp;token=905b9c39-8764-4a9e-83da-0ff36b0cbd1d" alt=""><figcaption></figcaption></figure>

**코드 설정하기**

3. 전체화면보기 탭에서 추가된  `/livelist.html` 화면 확인하고 클릭해서 진입하기
4. HTML 편집 영역에 복사한 모듈 코드 붙여넣고, 저장하기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FSXQDN9DFSzzc9G8YkVj9%2Fimage.png?alt=media&amp;token=8812526c-c14c-4177-aece-28961dd3f5fc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="예고 페이지 모듈 적용 방법" %}
**예고 페이지 모듈이 노출될 화면 추가하기**&#x20;

1. \[화면추가] 버튼 클릭
2. 추가되는 화면의 파일명은  `/livebridge.html` 입력하여 저장하기

{% hint style="warning" %}
추가하는 화면의 파일명은 반드시 `/livebridge.html` 로 입력하여 저장해주세요.

파일명을 변경하여 저장할 경우, 전체 목록 모듈이 정상적으로 동작하지 않습니다.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F20ETitZD5vc4Ulb6Mr2E%2Fimage.png?alt=media&amp;token=6af6ddc9-f46f-4817-b6f6-3008a6f1fe2d" alt=""><figcaption></figcaption></figure>

**코드 설정하기**

3. 전체화면보기 탭에서 추가된  `/livebridge.html` 화면 확인하고 클릭해서 진입하기
4. HTML 편집 영역에 복사한 모듈 코드 붙여넣고, 저장하기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FH7t5JAU4hd3gBtAdF4qr%2Fimage.png?alt=media&amp;token=b36ac421-b849-47f4-87ae-80ae62316278" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fbvuot0sovtpN0jwBM3sA%2F(%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC)%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%B4%E1%84%89%E1%85%A1%E1%84%92%E1%85%A1%E1%86%BC.png?alt=media&amp;token=96817fba-ab22-4522-aa2d-5246eb83d29e" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:red;">코드 적용 시 주의사항</mark>&#x20;

* `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해주세요.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해주세요.
* 코드에 기재된 externalServiceId와 moduleId가 변경되지 않도록 유의해주세요.

{% hint style="danger" %}
개별 페이지는 본 가이드에서 약속된 이름으로 생성합니다.\
약속된 이름으로 페이지를 생성하지 않는 경우, 전시 모듈이 정상 동작하지 않습니다.&#x20;

* 전체 목록 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livelist.html`</mark> 으로 생성
* 예고 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livebridge.html`</mark> 으로 생성
  {% endhint %}