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

# 예고 페이지 모듈

본 가이드는 C. 예고 페이지 모듈에 적용되는 커스터마이징 가이드입니다.

{% hint style="info" %}
**C. 예고 페이지 모듈이란?**\
네이버 쇼핑라이브 방송에 등록된 <mark style="background-color:yellow;">예고페이지를 자사몰용으로 커스텀하여 적용 가능한 페이지형 모듈</mark>
{% endhint %}

### 1.  헤더 노출 여부

예고 페이지 모듈의 헤더 노출 여부를 설정할 수 있습니다.&#x20;

* 노출함 (true)\
  ![](/files/UbtAjLzo1FPsf56UN1lC)
* 노출하지 않음 (false)\
  ![](/files/3d8uKZCWusTReGZqCL5m)

**설정 방법**

C. 예고 페이지 코드 내 `moduleconfig` 내 `header useFeature` 값을 변경해주세요.

{% hint style="info" %}
따옴표(' ') 안의 값만 영어로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.&#x20;
{% endhint %}

{% code overflow="wrap" %}

```javascript
  moduleConfig: {
    broadcastId: params.get('broadcastId'),
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
```

{% endcode %}

### 2. 헤더명 입력

예고 페이지 모듈의 헤더명을 변경할 수 있습니다.&#x20;

**설정 방법**

C. 예고 페이지 코드 내 `moduleconfig` 내 `header title text` 값을 변경해주세요.

* 헤더명 변경하는 경우\
  ![](/files/aeZfx4XJKn5cr1RiSpbP)

{% code overflow="wrap" %}

```javascript
 moduleConfig: {
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
        title: {
          text: '라이브 예고', // 헤더 타이틀명
```

{% endcode %}

* 헤더명 빈 값 입력하는 경우 \
  ![](/files/tAbcPJuhYaTQDCYScr2v)

```javascript
moduleConfig: {
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
        title: {
          text: '', // 헤더 타이틀명
```

### 3. 백버튼 노출 여부

예고 페이지 모듈의 백버튼 노출 여부를 설정할 수 있습니다.&#x20;

* 노출함 (true)\
  ![](/files/prEOQwxud2n42FWs8MsF)
* 노출하지 않음 (false)\
  ![](/files/4okqynWSRX5RR3BsXkDe)

**설정 방법**

C. 예고 페이지 코드 내 `moduleconfig` 내 `backButton useFeature` 값을 변경해주세요.

{% hint style="info" %}
콤마(,) 및 괄호({ })등은 삭제하지 마세요.&#x20;
{% endhint %}

{% code overflow="wrap" %}

```javascript
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
```

{% endcode %}

### 4. 상품 영역 노출 여부

예고 페이지 모듈의 상품 영역 노출 여부를 설정할 수 있습니다.&#x20;

* 노출함 (true)\
  ![](/files/GdBuD5LlazAx32E7f9Hy)
* 노출하지 않음 (false)\
  ![](/files/7kh2SE3SPa6n15d6Iovf)

**설정 방법**

C. 예고 페이지 코드 내 `moduleconfig` 내 `products useFeature` 값을 변경해주세요.

{% hint style="info" %}
콤마(,) 및 괄호({ })등은 삭제하지 마세요.&#x20;
{% endhint %}

{% code overflow="wrap" %}

```javascript
       products: {
        useFeature: true, // 상품 영역 사용 유무 (true/false)
      },
```

{% endcode %}

### 5. 영역 최대 너비

예고 페이지 영역의 최대 너비값을 설정할 수 있습니다.\
해당 너비를 설정하는 이유는 자사몰 헤더의 너비와 맞추어야, 라이브 모듈 영역이 자사몰 스타일과 자연스럽게 어울릴 수 있기 때문입니다. 최대 너비를 설정하면, 라이브 모듈의 너비가 maxWidth로 설정한 값보다 커지는 것을 방지합니다.

{% hint style="info" %}

* 최대 너비는 px 값으로 넣을 수 있습니다.
* 자사몰 헤더/영역의 너비가 정해져있는 경우, 라이브 모듈의 최대 너비도 동일하게 설정하여 자사몰 헤더 너비와 라이브 모듈의 사이즈를 맞출 수 있습니다
  {% endhint %}

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

**설정 방법**

C. 예고 페이지 코드 내 `moduleconfig` 내 `style maxWidth` 값을 변경해주세요.

{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.&#x20;
{% endhint %}

{% code overflow="wrap" %}

```javascript
      style: {
        maxWidth: "1280px" // 영역 최대 너비
      },
```

{% endcode %}