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

# 전시 모듈 개발 가이드

쇼핑라이브 REST API 연동을 통해 직접 전시페이지를 구현하실 수도 있지만, 본 장에서 가이드하는 전시모듈을 임포트하여 별도의 개발 구현 없이도 즉시 전시페이지 구성이 가능합니다.

### 네이버 쇼핑라이브 모듈 <a href="#undefined" id="undefined"></a>

본 문서에서는 네이버 쇼핑라이브 솔루션을 통해 제공되는 모듈의 스펙 및 적용에 대해 가이드합니다.

네이버 쇼핑라이브 모듈은 크게 다음과 같이 제공됩니다.

> 모듈 구성 A. 방송목록 모듈 B.전체 방송목록 모듈 C. 예고페이지 모듈 D. 뷰어 모듈

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

#### externalServiceId <a href="#externalserviceid" id="externalserviceid"></a>

`externalServiceId`는 쇼핑라이브 솔루션 연동을 위해 발급되는 업체별 고유 ID입니다. 모든 모듈은 `externalServiceId`를 기준으로 동작하며, 모듈 초기화를 위해 id외에 별도의 인증은 불필요합니다.

적용할 모든 모듈에 대해 스크립트 내 `moduleConfig` 하위에 `externalServiceId`를 주입합니다.

```javascript
    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: 'yourservice',
    ...
	...
```

{% hint style="warning" %}
모듈에는 "자사몰 동시송출"로 설정된 라이브만 노출됩니다. 라이브솔루션을 처음 연동하셨다면, **관리툴>라이브 수정**에서 개별 라이브의 "자사몰 동시송출" 설정을 "송출함"으로 변경해주세요. [자사몰 동시송출하기](/livesolution/welcome/broadcast.md#undefined)
{% endhint %}