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

# 자사몰에 라이브 전시하기

## 라이브 모듈이란?

추가 개발 없이도 자사몰에서 내 라이브만 모아서 노출할 수 있도록, 이미 완성된 형태의 모듈 코드를 단순히 복사+붙여넣기로 제공할 수 있습니다. 

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

#### **A. 방송 목록 모듈**

자사몰 동시송출 설정된 라이브를 블럭형으로 페이지 중간 원하는 영역에 노출할 수 있는 목록 모듈입니다.\
어떤 형태로 노출할지(레이아웃), 어떤 방송을 노출할지(라이브만 노출, 다시보기만 노출, 전부 노출), 어떤 스타일로 노출할지 커스텀이 가능합니다.&#x20;

#### **B. 전체 목록 모듈**

자사몰 동시송출 설정된 라이브를 방송 상태(온에어/예고/다시보기)별 전체 리스팅 해주는 페이지형 모듈입니다. 헤더 노출 여부, 타이틀 스타일 등 설정값을 제어하여 자사몰 스타일에 맞는 페이지로 구성할 수 있습니다.&#x20;

#### **C. 예고 페이지 모듈**

네이버 쇼핑라이브 방송에 등록된 예고페이지를 자사몰용으로 커스텀하여 적용 가능한 페이지형 모듈입니다. \
(네이버 쇼핑라이브에서 제공하는 예고페이지와 구성요소가 다르며, 외부용으로 커스텀된 예고 모듈입니다.)

#### **D. 시청 뷰어 모듈**&#x20;

쇼핑라이브 방송이 재생되는 시청 뷰어를 자사몰용으로 커스텀하여 적용 가능한 페이지형 모듈입니다.\
(네이버 쇼핑라이브에서 제공하는 시청 뷰어와 구성요소가 다르며, 외부용으로 커스텀된 뷰어 모듈입니다.)

{% hint style="info" %}
시청 뷰어는 JS 시청 뷰어 모듈 혹은 단순 웹뷰어 랜딩 중 선택하여 적용할 수 있습니다. \
단순 웹뷰어 랜딩 선택 시 네이버 쇼핑라이브의 외부용 웹 시청 뷰어 페이지로 랜딩합니다.&#x20;
{% endhint %}

## 적용 가이드

라이브 모듈은 크게 간단 연동 / 심화 연동 두 가지 방법으로 추가할 수 있습니다. \
각 자사몰에서 원하는 연동 방식에 따라 연동 방법을 선택하여, 처음부터 끝까지 가이드에 맞게 적용해주셔야 자사몰에서 정상적으로 노출됩니다.

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

### **1. 간단 연동**

라이브 모듈 중 원하는 모듈만 개별적으로 자사몰에 삽입합니다.

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

해당 모듈만 각각 자사몰 페이지 내 삽입하고, 예고페이지와 라이브 시청 뷰어는 모듈로 설정하지 않습니다. 이 경우, 예고페이지와 라이브 시청 뷰어는 네이버 쇼핑라이브 페이지로 바로 연결됩니다.

### **2. 심화 연동**

라이브 모듈 전체를 자사몰에 삽입합니다.

> **A.** 방송 목록 모듈 \
> **B.** 전체 목록 모듈\
> **C.** 예고 페이지 모듈

{% hint style="warning" %}

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

* 코드 수정 시 `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해주세요. 코드 수정이 필요한 경우 따옴표 안의 값만 변경합니다.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해주세요.
* 만약 위와 같은 케이스로 잘못 적용되어 원인 파악이 어려운 경우, 코드를 다시 복사하여 시도해주세요.
* 간단 연동/심화 연동 모두 가이드대로 적용해야만 모듈이 정상적으로 동작합니다. 모듈을 개별적으로 취사 선택하여 개별 적용하는 것을 지양해주세요.
  {% endhint %}