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

# 웹 랜딩

서드파티 페이지 내에 웹뷰어를 적용하지 않고, 단순히 웹뷰어의 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>

단순 웹뷰어 랜딩으로도 다음 사항을 제외한 모든 커스텀이 가능합니다. 다음 기능이 필요한 경우에는, iframe 임베딩 혹은 javascript 모듈을 통해 서드파티 웹페이지 내에 적용해주세요.

* 뷰어 상 서드파티 서비스 고유의 컴포넌트를 추가 노출 (ex. 이벤트 배너 노출, 자체 시청시간 타이머 노출 외)
* 뷰어와 통신이 필요한 비즈니스 로직 (ex. 특정 유저액션을 받아서 처리 등)

### 회원정보 연동 <a href="#member" id="member"></a>

랜딩할 뷰어 URL에 쿼리 스트링으로 회원정보를 추가합니다.

<table><thead><tr><th width="118.33333333333331">params</th><th width="109">type</th><th>desc</th></tr></thead><tbody><tr><td>esuk</td><td>string</td><td>서드파티 유저의 유니크키 : 없는 경우 비로그인으로 식별합니다.</td></tr><tr><td>esun</td><td>string</td><td>서드파티 유저의 닉네임(UTF-8 encode) 없는 경우 <a data-footnote-ref href="#user-content-fn-3">랜덤 닉네임</a>을 부여합니다.</td></tr><tr><td>loginUrl</td><td>string</td><td><p>뷰어 이용중 유저가 로그인이 필요한 액션을 하는 경우, 본 <code>loginUrl</code> 설정값으로 랜딩합니다. 이 때 다음과 같이 <code>returnUrl</code> 파라미터로 진입한 뷰어 URL을 전달합니다.</p><pre><code>https://yourservice.com/login?returnUrl={뷰어주소}
</code></pre><p>로그인 처리가 완료되면, 뷰어URL에 esuk, enum을 포함하여 랜딩처리합니다.</p><pre><code>{뷰어주소}?esun=%EB%8B%89%EB%84%A4%EC%9E%84&#x26;esuk=3f1ced532b187eb8a691371
</code></pre></td></tr></tbody></table>

> **예시** view\.shoppinglive.naver.com/externals/{externalServiceId}/lives/{broadcastId}?<mark style="color:blue;">esuk</mark>=a8fYfb1ifFs88&<mark style="color:blue;">esun</mark>=%EB%8B%89%EB%84%A4%EC%9E%84&<mark style="color:blue;">loginUrl</mark>=<https://yourservice.com/member/login>

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

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

[^3]: 형용사 + 명사 조합 (ex. 귀여운+고양이)