> 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).

# 고도몰 가이드

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

<figure><img src="/files/u1HToUY7TzybDs95wfU7" 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="/files/bQQCwzHDxRLO0OqsJ3VE" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/71GkXHMPTzMLtAPqBBK5" alt=""><figcaption></figcaption></figure>

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

{% hint style="warning" %}

#### 고도몰 주의 사항

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

<figure><img src="/files/SawVbol57HC654NHO2Jl" 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="/files/lIDFdfh06m4GtIf2wkOH" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/WNLmRvFdV0row5Mwcq8x" 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="/files/O1dkwfFLev6o8w0kKLPt" 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="/files/9enHMaUxfkH7M07LjZKS" alt=""><figcaption><p>이미지의 모듈아이디와 JS 파일 경로는 예시를 위한 가이드입니다. 자사몰에 적용하는 모듈아이디와 JS 파일 경로를 확인해주세요.</p></figcaption></figure>

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

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

![](/files/NdqTNHBJXaYgdt3hEhcV)

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="/files/wOO1rNxdnswYlBGqGbRf" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/Caj11gYCtEwmjELW23Tg" 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="/files/9xo3PX7FSEutbaQk1OyX" alt=""><figcaption></figcaption></figure>

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

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

![](/files/6h8dO4hPXdpEt0NAnsq3)

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="/files/SLNDZX31EnR6zBT916yl" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/ymuRfVeq2iL58FDx9Gp8" 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="/files/QL4FpZqTFlFVTYjcAdpd" alt=""><figcaption></figcaption></figure>

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

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

![](/files/tBP3emoRykFR7C3UWkZ0)

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="/files/hAyQ8pNWU7uzT8nxV9WY" 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 %}