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

# 예고 페이지 모듈

아래 제공하는 샘플코드를 복사하신 후, 필요한 설정에 따라 변경하여 적용합니다. \
샘플코드 내 `moduleId입력`으로 표기된 영역에 적용하고자 하는 [moduleId를 확인](/livesolution/module-developers.md#moduleid)해 주입해주세요.\
샘플코드 내 `externalServiceId`입력 으로 표기된 영역에 [솔루션 연동 ID를 확인](/livesolution/module-developers.md#externalserviceid)해 주입해주세요.

예시) `externalServiceId`와 `moduleId`는 아래와 같이 입력합니다.

<pre><code><strong>&#x3C;!--모듈 초기화 영역-->
</strong>&#x3C;div id="broadcast-list-286">&#x3C;/div>

    moduleConfig: {
      moduleId: '286',
      externalServiceId: 'jasamall',
</code></pre>

### 샘플코드 <a href="#undefined" id="undefined"></a>

{% hint style="warning" %}
`externalServiceId`와 `moduleId`를 주입하지 않는 경우 동작하지 않습니다.&#x20;
{% endhint %}

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

<!--모듈 초기화 영역-->
<div id="bridge-page-moduleId입력"></div>

<!--모듈 초기화 코드-->
<script>
  lico.launcher({
    name: 'ShoppingLiveBridgePage',
    module: {
      resourcePath:
        'https://im.pstatic.net/live-commerce/products/bridge-page/latest/real/',
      js: 'index.js',
     css: 'bundle.css',
    },
    moduleConfig: {
      moduleId: 'moduleId입력',
      externalServiceId: 'externalServiceId입력',
      broadcasts: {
          onClickLive: (broadcastInfo) => {
            console.log('click 라이브', broadcastInfo.id)
          },
          onClickReplay: (broadcastInfo) => {
            console.log('click 다시보기', broadcastInfo.id)
          },
        },
        shortclips: {
          onClickShortclip: (broadcastInfo) => {
            console.log('click 숏클립', broadcastInfo.id)
          },
        },
      target: document.getElementById('bridge-page-moduleId입력'),
    },
    onLoad: function (instance) {
      // 모듈 로딩 후 처리부분 입니다.
    },
    onError: function () {
      // 모듈 로딩 실패 처리부분 입니다.
    },
  })
</script>

```

### 이벤트 핸들러 <a href="#undefined" id="undefined"></a>

예고 페이지에서 발생하는 클랙 액션에 대한 핸들러를 제공합니다. 라이브 혹은 다시보기 방송으로 랜딩하는 경우의 동작을 설정할 수 있습니다.&#x20;

**코드 예시**

```javascript
      broadcasts: {
        onClickLive: function (broadcastInfo) {
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id
        },
        onClickReplay: function (broadcastInfo) {
          // 다시보기 페이지 따로 있으면 연결
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id + 'status=replay'
        },
      },
      shortclips: {
        useFeature : true, // 연관 숏클립 노출 여부
        onClickShortclip: function (broadcastInfo) {
          // 숏클립 카드 클릭시 동작 설정
          window.location.href = '/shortsviewer.html?broadcastId=' + broadcastInfo.id
        },
      },
```

**이벤트 정의**

<table><thead><tr><th width="191">handler</th><th>이벤트 조건</th></tr></thead><tbody><tr><td>broadcasts.onClickLive</td><td>방송진입 버튼 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>broadcasts.onClickReplay</td><td>방송 다시보기 버튼 클릭시 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>shortclips.onClickShortclip</td><td>연관 숏클립 보기 내 카드 클릭시 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr></tbody></table>

커스텀을 희망하지 않는 경우, 핸들러를 제거하면 네이버에서 제공하는 페이지로 랜딩합니다.

### 테스트 가이드 <a href="#test" id="test"></a>

{% hint style="warning" %}
예고페이지 html 페이지로 테스트 진행 시 아래 내용을 꼭 확인해주세요.
{% endhint %}

예고페이지 모듈은 개별 html 페이지로 확인할 경우, 확인하시는 url 뒤에 contentId를 추가로 기입해주셔야 정상 동작합니다.\
contentId로는 해당 채널에서 예고페이지 등록이 완료된 라이브ID를 기입해주세요.\
\
ex) \
URL?contentId=해당 채널에서 예고페이지 등록 완료된 라이브ID

html URL<mark style="color:red;">**?contentId=1163484**</mark>

<figure><img src="/files/IWhjqBosEJsFfZKH8iFW" alt=""><figcaption><p>예고페이지 생성된 라이브ID 확인 방법</p></figcaption></figure>