> 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/old-displaymodule/simple/godo.md).

# 고도몰

본 문서에서는 고도몰 호스팅 서비스를 이용하는 자사몰에서 코드를 몰라도 비교적 쉽게 적용할 수 있는 방법을 가이드합니다. 다만, 간단하게 연동하는만큼 부가적인 커스텀이나 개별 화면에 대한 자사몰 내 이동은 다소 제약됩니다.

모든 기능을 연동하고 싶은 경우, [고도몰 심화 연동](/livesolution/guide-for-sellers/old-displaymodule/advanced/godo.md)을 진행해주세요.

### 적용 순서

> 1. 본 문서의 코드 블록을 클릭하여 복사해주세요. 
> 2. 고도몰 외부 스크립트에 코드를 등록해주세요. (기본설정 > 외부서비스설정 > 외부 스크립트 등록) 
> 3. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스ID externalServiceId를 입력해주세요. 
> 4. 원하는 페이지 및 영역에 모듈 초기화 코드를 등록해주세요. 
> 5. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요. [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 참고
> 6. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.

### 적용 케이스별 코드 복사

적용하고 싶은 케이스에 따라 코드를 복사하여 원하는 자사몰 페이지 및 영역에 붙여넣어주세요.\
코드 복사 후, 하단 고도몰 간단 연동 프로세스 가이드에 따라 진행해주시면 됩니다.

* A. 방송 목록 모듈
  * A1 라이브 방송 목록
  * A2 숏클립 목록
* B. 전체 목록 모듈

{% tabs %}
{% tab title="A1 모듈만 적용" %}

### 라이브 방송 목록 모듈

다음 코드 블록을 복사하신 후, 필요한 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.

#### 01 먼저, 외부 스크립트에 등록할 A모듈 코드를 복사해주세요.

{% code overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      target: document.getElementById('broadcast-list'),
    },
  })
</script>
```

{% endcode %}

#### 02 필요한 영역에 아래 코드를 붙여 넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

```javascript
<div id='broadcast-list'></div>
```

{% endtab %}

{% tab title="A2 모듈만 적용" %}

### 숏클립 목록 모듈

다음 코드 블록을 복사하신 후, 필요한 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.

#### 01 먼저, 외부 스크립트에 등록할 A모듈 코드를 복사해주세요.

{% code overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      broadcasts : {displayType : "shortclip"},
      target: document.getElementById('shortclip-list'),
    },
  })
</script>
```

{% endcode %}

#### 02 필요한 영역에 아래 코드를 붙여 넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

```javascript
<div id='shortclip-list'></div>
```

{% endtab %}

{% tab title="B모듈만 적용" %}

#### 01 먼저, 외부 스크립트에 등록할 B모듈 코드를 복사해주세요.

{% code overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastListPage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-page/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      header: {
        useFeature: true, // 헤더 노출 여부 (true/false)
        title: {
          text: '전체 라이브', // 헤더명 입력
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      display: {
        standby: { // 예고 영역 설정 
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
        },
        onair: { // 온에어 영역 설정 
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    }
  })

```

{% endcode %}

#### 02 자사몰 페이지 내에 `/livelist.html` 을 생성한 후 해당 페이지에 아래 코드를 추가해주세요

{% code overflow="wrap" %}

```javascript
<div id="broadcast-list-page"></div>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 고도몰 간단 연동 프로세스

#### **01 고도몰 쇼핑몰 관리자 로그인**

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

#### **02 디자인 템플릿 생성**

디자인 > 디자인 스킨 리스트 > (옵션) 스킨 업로드 혹은 무료 스킨 추가 > 디자인 스킨 선택 > 추가 버튼 클릭

<figure><img src="/files/54T7vGucWfEEZsDhCamQ" alt=""><figcaption></figcaption></figure>

#### **03 외부 스크립트 등록**

기본 설정 > 외부 서비스 설정 > 우상단 외부 스크립트 등록 버튼 클릭 > 각 모듈별 외부 스크립트 등록&#x20;

<figure><img src="/files/tfK0oXoYW0mCwDCHbMqn" alt=""><figcaption></figcaption></figure>

하단 A모듈, B모듈 외부 스크립트를 모두 등록해주세요.

* A모듈: A. 방송 목록 모듈
* B모듈: B. 전체 목록 모듈

{% tabs %}
{% tab title="A모듈 스크립트 등록 방법" %}
외부 스크립트 등록 페이지에서

* 서비스명 입력 (자유)
* 사용설정 "사용함" 설정
* 스크립트 삽입위치 선택 "하단 공통영역" 선택
* 하단 공통영역 스크립트 입력 PC/모바일 모두에 외부 스크립트 코드 동일하게 등록
* 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

<figure><img src="/files/UTzta7IwoulJajUwDMl7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Jai4QjwJD4Ya6d78cXgv" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="B모듈 스크립트 등록 방법" %}
외부 스크립트 등록 페이지에서

* 서비스명 입력 (자유)
* 사용설정 "사용함" 설정
* 스크립트 삽입위치 선택 "하단 공통영역" 선택
* 하단 공통영역 스크립트 입력 PC/모바일 모두에 외부 스크립트 코드 동일하게 등록
* 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

<figure><img src="/files/9SePk0aUq7wenO4WkBHH" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ifNTPvscLXGGfmpv46fF" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### **04 페이지 내 노출 위치 잡기**

디자인 > 좌측 하단 스킨 트리 > 원하는 페이지 선택 혹은 새로운 페이지 생성 > 디자인 페이지 수정 > 원하는 위치에 모듈 코드 붙여넣기&#x20;

하단 A모듈, B모듈의 원하는 영역 및 페이지에 다음 코드를 삽입해주세요.

* **A모듈** : 방송 목록 모듈
* **B모듈** : 전체 목록 모듈

{% tabs %}
{% tab title="A모듈 삽입 방법" %}
디자인 페이지 설정에서

1. 모듈 삽입할 페이지 선택&#x20;
2. 페이지 내 원하는 위치에 모듈 초기화 코드 삽입 > 저장&#x20;

{% hint style="warning" %}
반드시 {#header} 와 {#footer} 사이에 넣어야 합니다.
{% endhint %}

**A모듈 노출 코드**

{% code title="A1 라이브 방송 목록" %}

```javascript
<div id='broadcast-list'></div>
```

{% endcode %}

{% code title="A2 숏클립 방송 목록" %}

```javascript
<div id='shortclip-list'></div>
```

{% endcode %}

<figure><img src="/files/9LQgq7NNiQmW3JVCnoAI" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="B모듈 삽입 방법" %}
디자인 페이지 설정에서

1. 메인/main 폴더 클릭&#x20;
2. 새로운 페이지 추가 버튼 클릭&#x20;
3. 파일명 `/livelist.html` 입력 > 새로운 페이지 추가하기 버튼 클릭&#x20;
4. 메인/main 폴더 하위에 생성된 `/livelist.html` 클릭&#x20;
5. 페이지 내 원하는 위치에 모듈 초기화 코드 삽입 > 저장&#x20;

{% hint style="warning" %}
반드시 {#header} 와 {#footer} 사이에 넣어야 합니다.
{% endhint %}

#### B모듈 노출 코드

```javascript
<div id="broadcast-list-page"></div>
```

<figure><img src="/files/tF2KZgPKae7UaXQ6bgKv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/SEIhTJtddHnAlviG74ml" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="/files/hAyQ8pNWU7uzT8nxV9WY" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
네이버로부터 전달 받으신 외부연동용 서비스ID `externalServiceId`를 반드시 입력해주세요.
{% endhint %}

예) 전달 받은 서비스ID가 `yourservice`인 경우, 다음과 같이 입력합니다.

```javascript
moduleConfig: {
      externalServiceId: 'yourservice', // 전달 받은 ID를 입력해주세요.
```

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