> 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/godomall.md).

# 고도몰 가이드

MODULE APPLICATION (고도몰)

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F239rM6ABRCrpuufJvaJt%2Fimage.png?alt=media&amp;token=c1fd9051-b322-4853-b3f5-b3c52dfd01ec" alt=""><figcaption></figcaption></figure>

1. 관리툴에서 [`전시모듈 코드를 복사`](/livesolution/guide-for-sellers/display-module-management.md#codecpoy)해 주세요.&#x20;
2. 고도몰 관리자 페이지 > 디자인메뉴에 진입해 주세요.
3. 디자인 관리 메뉴에서, 본 가이드페이지에 첨부드린 js파일을 WebFTP에 업로드해 주세요.
4. \[디자인 관리 > 좌측 하단 페이지트리>스크립트/js]에서 방금 첨부한 js파일에 복사한 전시모듈 코드를 붙여넣어 주세요.
5. \[디자인 관리 > 좌측 하단 페이지트리]에서 모듈이 노출될 위치를 지정하고, 페이지 코드를 붙여넣어 주세요.
6. 편집사항을 저장하고, 자사몰에 적용된 내용을 확인합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F224vWyj3dWEja8O7NLkP%2Fimage.png?alt=media&amp;token=b38ab2ff-9d6f-4c51-835b-c7a4424776a9" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FpTMjTCS4wlCev0ACRpER%2Fimage.png?alt=media&amp;token=fe359bea-561f-47ba-ac53-cbf50dd4f7b7" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 고도몰 관리자 페이지 > 디자인메뉴 진입**

{% hint style="warning" %}

#### 고도몰 주의 사항

다른 페이지로 이동하기 전, 꼭 \[디자인 페이지 저장]을 눌러 편집사항을 저장해 주세요.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FaIx7l5rhKCsyJo49rSWS%2Fimage.png?alt=media&amp;token=e9c274ca-31a0-488e-9f45-0ed144628e53" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 3`**</mark>**&#x20; JS파일 업로드 하기**

{% hint style="warning" %}
**JS 파일은 왜 업로드 해야하나요?**

고도몰 정책 상, 쇼핑라이브 솔루션 전시모듈을 적용하기 위해 JS 파일 업로드가 필요합니다.\
JS 파일은 쉽게말해 전시모듈이 동작하는 코드를 등록하는 곳 입니다. JS 파일에 전시모듈 코드를 등록해 놓고 개별 HTML 페이지에서 모듈ID를 입력하여 불러오는 구조로 활용합니다.
{% endhint %}

#### 1. 아래 제공하는 JS 파일을 다운받아 주세요.

{% file src="/files/IYyINyVThEjfvei4pYgE" %}

#### 2.  Web FTP에 사용할 JS 파일을 업로드해 주세요.

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

**자사몰에 적용할 케이스를 확인하셨다면, 사용할 모듈의 JS 파일만 업로드해 주세요.**

* livebroadcast.js : 방송 목록 모듈 적용 시 업로드
* livelist.js : 전체 목록 모듈 적용 시 업로드
* livebridge.js : 예고페이지 모듈 적용 시 업로드
  {% endhint %}

좌측 메뉴트리의 Web FTP 메뉴를 클릭하면 JS 파일을 등록할 수 있는 팝업이 제공됩니다.\
팝업 아래의 폴더 영역에서 현재 사용하고 있는 스킨의 위치를 찾아주세요.\
스킨의 js 폴더를 클릭하고 다운받은 JS 파일을 업로드해 주세요.

> 예시) skin > front > nimo (현재 가이드 페이지에서 사용하는 스킨) > **js 폴더 클릭**

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FLad3f0D2bI7HS0541Hys%2Fimage.png?alt=media&amp;token=42c19375-5b1f-4c4b-b9dc-61586e3a1a13" alt=""><figcaption></figcaption></figure>

업로드가 완료되었다면, 팝업창을 닫고 좌측 메뉴트리에서 정상적으로 JS 파일이 업로드 되었는지 확인해 주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FEkfP7MLwMU5L3olRSd4p%2Fimage.png?alt=media&amp;token=db6842a5-1589-46c7-ba92-8cb927086800" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
방법을 잘 모르겠다면, 아래 동영상을 다운받아 참고해주세요.
{% endhint %}

{% file src="/files/mvxfyTUr1ZkKN1HpDZSy" %}

### <mark style="color:blue;">**`Step 4`**</mark>**&#x20; JS 파일에 모듈코드 붙여넣고 위치 지정하기**

{% hint style="warning" %}
다른 페이지로 이동하기 전, 꼭 \[디자인 페이지 저장]을 눌러 편집사항을 저장해 주세요.
{% endhint %}

{% tabs %}
{% tab title="방송 목록 모듈 적용 방법" %}
**JS 파일에 코드 설정하기**

1. 좌측 하단 페이지 메뉴트리 > 스트립트/js에서 livelist.js 페이지 클릭하기
2. 디자인 페이지 수정영역에 관리툴에서 복사한 "전체 목록 모듈" 코드 붙여넣기
3. <mark style="color:red;">복사한 코드 중 모듈 초기화 코드의 \<script>와 \<script> 사이의 코드만 남기고, 나머지 영역은 삭제하기</mark>
4. \[디자인 페이지 저장] 클릭하여 저장하기

{% hint style="warning" %}
아래 이미지의 노란색으로 표기된 ID는 모듈아이디 입니다.\
\[위치 지정 코드]에 기입해 주세요.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FtZvH1y4a4kDNGEIagZwl%2Fimage.png?alt=media&amp;token=6001c05f-9630-43ad-b18f-32498058fca4" alt=""><figcaption></figcaption></figure>

**페이지에 위치 지정 코드 붙여넣기**

1. 좌측 하단 페이지 메뉴트리에서 방송 목록 모듈을 노출할 페이지 클릭하기
2. 우측 디자인 수정 페이지에 모듈을 노출할 위치 지정하기\
   (※ 모듈 위치는 { # header }와 { # footer } 사이로 지정해주세요.)
3. 아래 제공드리는 위치 지정 코드를 복사하여, 지정한 위치에 붙여넣어 주세요.

<mark style="color:blue;">**\[위치 지정 코드] 아래 박스 영역의 코드를 복사해서 붙여넣어 주세요**</mark>

```javascript
<div id="broadcast-list-모듈아이디를 붙여넣어 주세요"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="Web FTP에 업로드한 JS파일의 위치를 복사하여 붙여넣어 주세요"></script>
```

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FAuWrPvEKkIWDaHpikQcf%2Fimage.png?alt=media&amp;token=5e406497-99fb-4a1a-9c3e-a0fc6ee551da" alt=""><figcaption><p>이미지의 모듈아이디와 JS 파일 경로는 예시를 위한 가이드입니다. 자사몰에 적용하는 모듈아이디와 JS 파일 경로를 확인해주세요.</p></figcaption></figure>

4. 붙여넣은 위치 지정 코드에서 모듈아이디를 자사몰 모듈아이디로 변경하기
5. 붙여넣은 위치 지정 코드에서 JS파일 경로를 자사몰 JS 파일 경로로 변경하기

{% hint style="warning" %}
**JS 파일 경로는 여기서 확인해 주세요.**

![](https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FWX4F6ShSC95Z4OkNBLZC%2Fimage.png?alt=media\&token=9d46fab1-c008-46ed-8279-e3a2bf838b92)

JS 파일을 등록했던 Web FTP 팝업창에서 \[주소 복사]를 누르시면 경로가 복사됩니다.

복사된 경로를 붙여넣어 주세요. 업로드한 JS 파일 별로, 경로가 다르니 적용하는 모듈의 JS 파일 경로를 올바르게 확인해 주세요.
{% endhint %}

<mark style="color:blue;">**\[위치 지정 코드 입력 완료 후 예시]**</mark>\
모듈아이디와 JS파일 경로 정상 입력 시 예시는 아래와 같습니다.\
큰 따옴표 사이에 모듈아이디와 JS 파일을 제대로 입력해 주세요.

```javascript
<div id="broadcast-list-001"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="/data/skin/front/nimo/skin/livebroadcast.js"></script>
```

6. \[디자인 페이지 저장] 클릭하여 저장하기
7. 자사몰 전시 페이지에 정상적으로 노출되는지 확인하기
   {% endtab %}

{% tab title="전체 목록 모듈 적용 방법" %}
**JS 파일에 코드 설정하기**

1. 좌측 하단 페이지 메뉴트리 > 스트립트/js에서 livelist.js 페이지 클릭하기
2. 디자인 페이지 수정영역에 관리툴에서 복사한 "전체 목록 모듈" 코드 붙여넣기
3. <mark style="color:red;">복사한 코드 중 모듈 초기화 코드의 \<script>와 \<script> 사이의 코드만 남기고, 나머지 영역은 삭제하기</mark>
4. \[디자인 페이지 저장] 클릭하여 저장하기

{% hint style="warning" %}
아래 이미지의 노란색으로 표기된 ID는 모듈아이디 입니다.\
\[위치 지정 코드]에 기입해 주세요.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FIN2dJ259UGakxFx0FxWN%2Fimage.png?alt=media&amp;token=e611b882-b63f-4b6a-8f17-cd888c824d83" alt=""><figcaption></figcaption></figure>

**livelist 페이지 추가하기**

1. \[새로운 페이지 추가] 버튼 클릭
2. 파일명은 반드시 livelist 로 지정하여 페이지 생성하기

{% hint style="warning" %}
방송 목록 모듈을 삽입한 페이지 하위에 페이지를 추가하는 것을 권장합니다.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F08IdVpTxgAUHPj9TvsWx%2Fimage.png?alt=media&amp;token=523e27ca-c467-4f20-8f92-5b82240fe014" alt=""><figcaption></figcaption></figure>

**추가한 livelist 페이지에 위치 지정 코드 붙여넣기**

1. 좌측 하단 페이지 메뉴트리에서 방송 목록 모듈을 노출할 페이지 클릭하기
2. 우측 디자인 수정 페이지에 모듈을 노출할 위치 지정하기\
   (※ 모듈 위치는 { # header }와 { # footer } 사이로 지정해주세요.)
3. 아래 제공드리는 위치 지정 코드를 복사하여, 지정한 위치에 붙여넣어 주세요.

<mark style="color:blue;">**\[위치 지정 코드] 아래 박스 영역의 코드를 복사해서 붙여넣어 주세요**</mark>

```javascript
<div id="broadcast-page-모듈아이디를 붙여넣어 주세요"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="Web FTP에 업로드한 JS파일의 위치를 복사하여 붙여넣어 주세요"></script>
```

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F4Z7ufnxrTDmSwJXitB17%2Fimage.png?alt=media&amp;token=0166ae32-4494-4d1c-a952-dce3c885a9e8" alt=""><figcaption></figcaption></figure>

4. 붙여넣은 위치 지정 코드에서 모듈아이디를 자사몰 모듈아이디로 변경하기
5. 붙여넣은 위치 지정 코드에서 JS파일 경로를 자사몰 JS 파일 경로로 변경하기

{% hint style="warning" %}
**JS 파일 경로는 여기서 확인해 주세요.**

![](https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FSkY8Gguj54RzIYegmwdG%2Fimage.png?alt=media\&token=6e92b460-6191-4770-9a2d-b7c910558b74)

JS 파일을 등록했던 Web FTP 팝업창에서 \[주소 복사]를 누르시면 경로가 복사됩니다.

복사된 경로를 붙여넣어 주세요. 업로드한 JS 파일 별로, 경로가 다르니 적용하는 모듈의 JS 파일 경로를 올바르게 확인해 주세요.
{% endhint %}

<mark style="color:blue;">**\[위치 지정 코드 입력 완료 후 예시]**</mark>\
모듈아이디와 JS파일 경로 정상 입력 시 예시는 아래와 같습니다.\
큰 따옴표 사이에 모듈아이디와 JS 파일을 제대로 입력해 주세요.

```javascript
<div id="broadcast-list-002"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="/data/skin/front/nimo/skin/livelist.js"></script>
```

6. \[디자인 페이지 저장] 클릭하여 저장하기
7. 자사몰 전시 페이지에 정상적으로 노출되는지 확인하기
   {% endtab %}

{% tab title="예고 페이지 모듈 적용 방법" %}
**JS 파일에 코드 설정하기**

1. 좌측 하단 페이지 메뉴트리 > 스트립트/js에서 livebridge.js 페이지 클릭하기
2. 디자인 페이지 수정영역에 관리툴에서 복사한 "전체 목록 모듈" 코드 붙여넣기
3. <mark style="color:red;">복사한 코드 중 모듈 초기화 코드의 \<script>와 \<script> 사이의 코드만 남기고, 나머지 영역은 삭제하기</mark>
4. \[디자인 페이지 저장] 클릭하여 저장하기

{% hint style="warning" %}
아래 이미지의 노란색으로 표기된 ID는 모듈아이디 입니다.\
\[위치 지정 코드]에 기입해 주세요.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FfVWPZAkoQVbuoqXy637a%2Fimage.png?alt=media&amp;token=09d69c07-c4d1-4184-8492-6a4fc94cb501" alt=""><figcaption></figcaption></figure>

**livebridge 페이지 추가하기**

1. \[새로운 페이지 추가] 버튼 클릭
2. 파일명은 반드시 livebridge 로 지정하여 페이지 생성하기

{% hint style="warning" %}
방송 목록 모듈을 삽입한 페이지 하위에 페이지를 추가하는 것을 권장합니다.
{% endhint %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FFFhGXTpDLgeO2AzU8VmV%2Fimage.png?alt=media&amp;token=ddf6a3a0-a366-4db6-a095-307cc79668af" alt=""><figcaption></figcaption></figure>

**추가한 livebridge 페이지에 위치 지정 코드 붙여넣기**

1. 좌측 하단 페이지 메뉴트리에서 방송 목록 모듈을 노출할 페이지 클릭하기
2. 우측 디자인 수정 페이지에 모듈을 노출할 위치 지정하기\
   (※ 모듈 위치는 { # header }와 { # footer } 사이로 지정해주세요.)
3. 아래 제공드리는 위치 지정 코드를 복사하여, 지정한 위치에 붙여넣어 주세요.

<mark style="color:blue;">**\[위치 지정 코드] 아래 박스 영역의 코드를 복사해서 붙여넣어 주세요**</mark>

```javascript
<div id="bridge-page-모듈아이디를 붙여넣어 주세요"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="Web FTP에 업로드한 JS파일의 위치를 복사하여 붙여넣어 주세요"></script>
```

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FmiyDl0fuNPEGYjwej2bL%2Fimage.png?alt=media&amp;token=a78dedab-9082-4c46-a60b-131344b54115" alt=""><figcaption></figcaption></figure>

4. 붙여넣은 위치 지정 코드에서 모듈아이디를 자사몰 모듈아이디로 변경하기
5. 붙여넣은 위치 지정 코드에서 JS파일 경로를 자사몰 JS 파일 경로로 변경하기

{% hint style="warning" %}
**JS 파일 경로는 여기서 확인해 주세요.**

![](https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FxFAlLrNhQj3AA9bFkJ5d%2Fimage.png?alt=media\&token=47f16d85-5a57-4cd5-a0b0-2000f22cfaaa)

JS 파일을 등록했던 Web FTP 팝업창에서 \[주소 복사]를 누르시면 경로가 복사됩니다.

복사된 경로를 붙여넣어 주세요. 업로드한 JS 파일 별로, 경로가 다르니 적용하는 모듈의 JS 파일 경로를 올바르게 확인해 주세요.
{% endhint %}

<mark style="color:blue;">**\[위치 지정 코드 입력 완료 후 예시]**</mark>\
모듈아이디와 JS파일 경로 정상 입력 시 예시는 아래와 같습니다.\
큰 따옴표 사이에 모듈아이디와 JS 파일을 제대로 입력해 주세요.

```
<div id="broadcast-list-003"></div>
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>
<!-- 모듈 초기화 스크립트 로드 -->
<script type="text/javascript" src="/data/skin/front/nimo/skin/livebridge.js"></script>
```

6. \[디자인 페이지 저장] 클릭하여 저장하기
7. 자사몰 전시 페이지에 정상적으로 노출되는지 확인하기
   {% 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`</mark>으로 생성
* 예고 모듈의 경우 페이지 파일명 <mark style="color:red;">`livebridge`</mark> 으로 생성
  {% endhint %}