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

# 전시 모듈 추가 구현

### 직접 구현하기

{% hint style="warning" %}
개발적 이해가 없다면 활용하기 어려울 수 있습니다.
{% endhint %}

웹뷰어를 [iframe 임베딩](/livesolution/viewer/web/iframe.md) 혹은 [JS모듈](/livesolution/viewer/web/javascript.md)을 통해 서드파티 페이지 내에 적용한 판매자라면 본 장에서 제공하는 이벤트 핸들러가 포함된 전시모듈 샘플코드를 활용해 자사몰에 필요한 설정을 추가적으로 구현할 수 있습니다.\
방송 목록 모듈과 전체 목록 모듈, 예고 페이지 모듈에 대해 샘플 코드가 제공되며, 샘플코드를 복사하여 사용해 주시면 됩니다.\
핸들러를 제거하는 경우, 디폴트로 각 이벤트에 해당하는 쇼핑라이브 페이지로 이동합니다. 커스텀을 희망하지 않는 이벤트에 대해서는 핸들러를 완전히 제거해주세요.

#### moduleId란? <a href="#moduleid" id="moduleid"></a>

`moduleId`는 쇼핑라이브 솔루션 전시모듈에 부여되는ID 입니다. 전시모듈의 설정은 `moduleId`를 기준으로 동작합니다.\
`moduleId`는 \[관리툴 > 솔루션 > 전시 모듈 관리]메뉴의 "모듈 아이디"에서 확인할 수 있습니다.

<figure><img src="/files/1nAu8Rx38TQYuLDUJVcC" alt=""><figcaption></figcaption></figure>

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

`externalServiceId`는 쇼핑라이브 솔루션 연동을 위해 발급되는 업체별 고유 ID입니다.\
모든 모듈은 `externalServiceId`를 기준으로 동작하며, 모듈 초기화를 위해 id외에 별도의 인증은 불필요합니다.\
`externalServiceId`는 \[관리툴 > 솔루션 > 솔루션 정보]메뉴의 "솔루션 연동 ID"에서 확인할 수 있습니다.

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