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

# 웹 뷰어

서드파티 서비스에 커스텀된 웹뷰어를 제공합니다. 발급된 솔루션 연동 ID에 따라, 좌상단 서비스로고부터 개별 비즈니스로직까지 커스텀하여 기존 쇼핑라이브 뷰어와는 다른 서드파티에 네이티브한 사용성을 제공할 수 있습니다.

## 최소지원 환경

* iOS 10 \~ 15 (iOS 10의 경우 onair 진입 불가 / 다시보기만 진입가능)
* Android 5 \~ 11 (5,6,7은 onair 진입불가 / 다시보기 진입가능)

## 솔루션 웹뷰어 URL

솔루션 웹뷰어는 네이버 도메인 내에서 다음과 같은 패턴을 가집니다. 

> * **라이브** : <https://view.shoppinglive.naver.com/externals/[><mark style="color:blue;">{externalServiceId}</mark>]\(#user-content-fn-1)[^1]/lives/[<mark style="color:blue;">{broadcastId}</mark>](#user-content-fn-2)[^2]
> * **다시보기** : <https://view.shoppinglive.naver.com/externals/><mark style="color:blue;">{externalServiceId}</mark>/replays/<mark style="color:blue;">{broadcastId}</mark>
> * **숏클립** : <https://view.shoppinglive.naver.com/externals/><mark style="color:blue;">{externalServiceId}</mark>/shortclips/<mark style="color:blue;">{shortclipId}</mark>

{% hint style="warning" %}
단, 이 때 URL은 직접 구성하지 않고, [broadcast API의 응답값](#user-content-fn-3)[^3]으로 제공합니다. 뷰어 파라미터는 상태 등에 따라 동적으로 변경되기 때문에 자체적으로 URL패턴으로 구현하시는 경우, 유저 혜택, 통계 집계 등에 오류가 발생할 수 있습니다.
{% endhint %}

## 웹뷰어 적용 방법&#x20;

적용하고자하는 스펙 및 환경에 따라 다음과 같은 세 가지 방법으로 가이드합니다. 자세한 내용은 각 페이지를 참고해주세요.

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>웹 랜딩 뷰어</strong></td><td>네이버 서비 자사몰 페이지 내에 삽입하지 않고, 네이버 도메인으로 이동합니다.</td><td></td><td></td><td><a href="/pages/JRYOjUwfxpfLwqNLybbC">/pages/JRYOjUwfxpfLwqNLybbC</a></td><td></td></tr><tr><td><strong>iframe 임베딩</strong></td><td>솔루션 뷰어를 서드파티 페이지 내에 iframe으로 임베딩합니다.</td><td></td><td></td><td><a href="/pages/MFqUWchaEXrf2AFaEA54">/pages/MFqUWchaEXrf2AFaEA54</a></td><td></td></tr><tr><td><strong>javscript 모듈</strong></td><td>서드파티 페이지 내에 javascript 모듈을 삽입하여 초기화합니다.</td><td></td><td></td><td><a href="/pages/qplEDHvqHpk2S0loyHW9">/pages/qplEDHvqHpk2S0loyHW9</a></td><td></td></tr></tbody></table>

[^1]: 발급받은 서비스 연동 ID

[^2]: 방송번호, 라이브 고유 ID

[^3]: 방송 조회 API 응답 필드 중 activeLinkUrl로 적용하시면,-별도의 방 송 상태에 따른 분기처리 없이도 라이브/ 다시보기 뷰어로 랜딩하도록 구현이 가 능합니다.