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

# 고도몰 심화 연동

본 문서는 고도몰 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다. 심화연동을 통해 적용하는 경우, 단순 노출 뿐만 아니라 자사몰 페이지간의 심리스한 탐색 및 예고페이지까지 제공해볼 수 있습니다.

HTML에 대한 이해가 없는 경우 다소 어려울 수 있으며, 적용이 어려우신 경우 [간단 연동](/livesolution/guide-for-sellers/old-displaymodule/simple/godo.md)을 참고하여 적용하실 수 있습니다.

### 적용 순서

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

{% hint style="warning" %}

#### 고도몰 주의 사항

* 고도몰의 경우 모듈이 그려질 영역과 스크립트를 별도 메뉴에서 등록해야합니다. 
* 고도몰의 경우, 자체 정책으로 인해 별도의 개발자 없이 **C. 예고 모듈** 적용이 어렵습니다.
  {% endhint %}

### 모듈별 코드 복사  

모듈 별 코드를 복사할 수 있는 코드 블록을 제공합니다.\
코드 복사 후, 하단 고도몰 심화 연동 프로세스 가이드에 따라 진행해주시면 됩니다.

* **A모듈** 방송 목록 모듈
  * A1 라이브 방송 목록
  * A2 숏클립 목록
* **B모듈** 전체 목록 모듈
* ~~**C모듈**  예고 모듈~~ 

{% hint style="info" %}
해당 **A, B 모듈 코드를 자사몰 내 전부 적용**해주셔야 자사몰 내 라이브 모듈이 **정상 동작**합니다.\
고도몰의 경우, 자체 정책으로 인해 별도의 개발자 없이 C. 예고 모듈 적용이 어렵습니다. 
{% endhint %}

{% tabs %}
{% tab title="A1 모듈 코드 " %}

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

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

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

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

{% code overflow="wrap" %}

```html
<!-- 모듈 로딩 런처 -->
<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를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '라이브 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'ALL', // 노출할 방송 데이터 설정 (ALL: 전체, ONAIR: 온에어+예고만, REPLAY: 다시보기만)
		/**
        onClickBridge: function(e, cardInfo) {
          console.log('click bridge', cardInfo.broadcastId)
          window.location.href = '/main/html.php?htmid=main/livebridge.html' + cardInfo.broadcastId
        },
		*/        
        onClickMore: function(e) {
          window.location.href = '/main/html.php?htmid=main/livelist.html'
        }
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/main/html.php?htmid=main/livelist.html'
        }
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('broadcast-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>
```

{% endcode %}

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

{% code overflow="wrap" %}

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

{% endcode %}
{% endtab %}

{% tab title="A2 모듈 코드" %}

### 숏클립 목록 모듈

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

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

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

```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를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '숏클립 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'SHORTCLIP', 
		/**
        onClickBridge: function(e, cardInfo) {
          console.log('click bridge', cardInfo.broadcastId)
          window.location.href = '/main/html.php?htmid=main/livebridge.html' + cardInfo.broadcastId
        },
		*/        
        onClickMore: function(e) {
          window.location.href = '/main/html.php?htmid=main/livelist.html'
        }
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/main/html.php?htmid=main/livelist.html'
        }
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('shortclip-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>
```

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

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

{% endtab %}

{% tab title="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)
        },
      },
      documentTitle: { // 상단 타이틀 영역 설정
        title: {
          text: '전체 리스트', // 전체 타이틀명 입력 
          style: {
            fontColor: "#1E1E23",
            fontSize: "19px",
            fontFamily: "",
            fontWeight: "700",
            align: "left", // 전체 타이틀 스타일 
          },
        },
        subtitle: {
          text: '전체 라이브와 숏클립입니다.', // 서브타이틀명 입력 
          style: {
            fontSize: "13px",
            fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
          },
        },
      },
      style: { // 모듈 전체 영역 설정 
        mobileMargin: {
          left: '20px',
          right: '20px', // 모바일 좌우 여백
        },
        pcMargin: {
          left: '40px',
          right: '40px', // pc 좌우 여백
        },
        maxWidth: '1280px', // 영역 최대 너비
      },
      display: {
        standby: { // 예고 영역 설정 
          title: {
            text: '라이브 예고', // 예고 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 예고 영역 스타일 
            },
          },
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
		/**
        onClickBridge: function(e, cardInfo) {
          console.log('click bridge', cardInfo.broadcastId)
          window.location.href = '/main/html.php?htmid=main/livebridge.html' + cardInfo.broadcastId
        },
		*/  
        },
        onair: { // 온에어 영역 설정 
          title: {
            text: '지금 라이브 중', // 온에어 영역 타이틀명 
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 온에어 영역 스타일
            },
          },
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          title: {
            text: '지난 라이브 다시보기', // 다시보기 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 다시보기 영역 스타일 
            },
          },
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
        shortclip: { // 숏클립 영역 설정 
          title: {
            text: '숏클립 모아보기', // 숏클립 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 숏클립 영역 스타일 
            },
          },
          layout: 'grid', // 숏클립 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.liveListPage = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}

* 모듈 초기화 코드

{% code overflow="wrap" %}

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

{% endcode %}
{% endtab %}

{% tab title="C모듈 코드" %}

* 외부 스크립트에 등록하는 코드

{% code overflow="wrap" %}

```javascript
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>
<script>
//  var params = new URLSearchParams(location.search);
</script>

<div id="bridge-page"></div>

<script>
  // 예고 페이지 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBridgePage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/bridge-page/latest/real/',
      entry: 'index.js'
    },
    moduleConfig: {
      broadcastId: '123456', // params.get('broadcastId'),
      externalServiceId: '', // 전달받은 ID를 입력해주세요
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
        title: {
          text: '라이브 예고', // 헤더 타이틀명
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      products: {
        useFeature: true, // 상품 영역 사용 유무 (true/false)
      },
      style: {
        maxWidth: "1280px" // 영역 최대 너비
      },
      target: document.getElementById('bridge-page'),
      debug: true,
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.bridgePageModule = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>
```

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

### **고도몰 심화 연동 프로세스**

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

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

#### 2. 디자인 템플릿 생성

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

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

#### **3. 외부 스크립트 등록 >  원하는 자사몰 영역 및 페이지에 복사한 코드 붙여넣기**

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

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

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

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

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

* 서비스명 입력 (자유)
* 사용설정 "사용함" 설정
* 스크립트 삽입위치 선택 "하단 공통영역" 선택
* 하단 공통영역 스크립트 입력 PC/모바일 모두에 외부 스크립트 코드 동일하게 등록
* 서비스ID 입력 '

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

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

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

* 서비스명 입력 (자유)
* 사용설정 "사용함" 설정
* 스크립트 삽입위치 선택 "하단 공통영역" 선택
* 하단 공통영역 스크립트 입력 PC/모바일 모두에 외부 스크립트 코드 동일하게 등록
* 서비스ID 입력&#x20;

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

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

**3-2. 원하는 페이지 및 영역에 모듈 초기화 코드 삽입** \
디자인 > 좌측 하단 스킨 트리 > 원하는 페이지 선택 혹은 새로운 페이지 생성 > 디자인 페이지 수정 > 원하는 위치에 모듈 초기화 코드 붙여넣기&#x20;

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

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

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

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

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

A모듈 초기화 코드

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

<figure><img src="/files/rEfplZM17ehgvUaeAVhF" 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="info" %}
반드시 {#header} 와 {#footer} 사이에 넣어야 합니다.
{% endhint %}

B모듈 초기화 코드

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

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

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

**3-3. 모바일샵에 동일 적용**&#x20;

3-2. 원하는 페이지 및 영역에 모듈 초기화 코드 삽입 과정을 모바일샵에 한 번 더 반복하여 적용합니다.

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

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

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

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

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

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

A모듈 초기화 코드

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

<figure><img src="/files/Ro54LFUf28W9F2mkBc0U" 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="info" %}
반드시 {#header} 와 {#footer} 사이에 넣어야 합니다.
{% endhint %}

B모듈 초기화 코드

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

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

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

### 코드 적용 시 주의사항

네이버로부터 전달 받으신 외부연동용 서비스ID `externalServiceId`를 반드시 입력해주세요.

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

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

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

{% hint style="danger" %}

#### 개별 페이지는 본 가이드에서 약속된 이름으로 생성합니다.

약속된 이름으로 페이지를 생성하지 않는 경우, 라이브 모듈이 정상 동작하지 않습니다.&#x20;

* B. 전체 목록 모듈의 경우 페이지 파일명 `/livelist.html` 으로 생성
* C. 예고 모듈의 경우 페이지 파일명 `/livebridge.html` 으로 생성
  {% endhint %}

{% hint style="warning" %}
고도몰에서는 정책적으로 본 가이드에 따른 C. 예고 모듈의 사용이 불가합니다. 아래 코드를 참고하여, 개발이 가능한 경우 개발자에게 문의해주세요.

C. 예 모듈을 사용하기 위해서는 A, B 모듈에서 전달받은 `broadcastId`를 `moduleConfig`의 `broadcastId`에 주입해야합니다.
{% endhint %}