> 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/advanced/imweb.md).
# 아임웹 심화 연동
본 문서는 아임웹 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다. 심화연동을 통해 적용하는 경우, 단순 노출 뿐만 아니라 자사몰 페이지간의 심리스한 탐색 및 예고페이지까지 제공해볼 수 있습니다.
최대한 HTML에 대한 이해가 없는 경우 다소 어려울 수 있으며, 적용이 어려우신 경우 [간단 연동](/livesolution/guide-for-sellers/old-displaymodule/simple/imweb.md)을 참고하여 적용하실 수 있습니다.
### 적용 순서
1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.
2. 아임웹 관리자 페이지 > 디자인 모드 > 코드 위젯 추가 > 코드설정에 복사한 코드를 붙여넣어주세요.
2. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.
4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.
5. 편집 사항을 저장하고 디자인을 게시합니다.
### 적용 케이스별 코드 블록 복사
적용하고 싶은 케이스에 따라 코드 블록 복사해주세요. \
코드 복사 이후에는 하단 메이크샵 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.
* A. 방송 목록 모듈
* A1 라이브 방송 목록
* A2 숏클립 목록
* B. 전체 목록 모듈
* C. 예고페이지 모듈
{% tabs %}
{% tab title="A1 모듈 코드" %}
### 라이브 방송 목록 모듈
다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)
B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.
{% code title="A1. 라이브 방송 목록 모듈" overflow="wrap" %}
```javascript
```
{% endcode %}
{% endtab %}
{% tab title="A2 모듈 코드" %}
### 숏클립 목록 모듈
다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)
{% code title="A2. 숏클립 목록 모듈" %}
```javascript
s
```
{% endcode %}
{% endtab %}
{% tab title="B 모듈 코드" %}
### 전체 목록 모듈
자사몰에 모든 라이브 및 숏클립 목록을 노출할 신규 페이지를 생성한 후, 다음 코드를 복사하여 붙여넣어주세요.
{% code title="전체 목록 모듈" overflow="wrap" %}
```javascript
```
{% endcode %}
{% endtab %}
{% tab title="C 모듈 코드" %}
### 예고페이지 모듈
자사몰 페이지 내에 `/livebridge` 을 생성한 후 해당 페이지에 아래 코드를 붙여넣어주세요. `/livebridge` 을 생성하는 방법은 하단 예고페이지 [모듈 적용 가이드](#undefined-9)를 참고해주세요.
{% code overflow="wrap" %}
```html
```
{% endcode %}
{% endtab %}
{% endtabs %}
### 방송 목록 모듈 적용 가이드
**`Step 1`**** 디자인 편집 화면 진입**
1. 관리자 페이지 > 좌측 메뉴의 \[디자인 모드] 클릭하여 편집화면 진입
2. 원하는 페이지의 원하는 영역에 마우스를 올려 노출되는 위젯추가 (+) 버튼을 클릭
**`Step 2`**** 코드 섹션 추가**
위젯 선택 화면에서 \[코드]를 클릭하여 추가한 후, 코드 위젯 우상단의 ⓘ를 클릭하여 노출되는 메뉴 내에서 \[코드 설정]을 선택하여 진입합니다.
**`Step 3`**** 모듈 코드 붙여넣기**
코드 수정창에서 제공드린 방송목록 모듈 전체 코드를 복사해서 붙여넣은 뒤, 코드 중 externalServiceId에 전달받은 id값을 입력한 후 저장합니다. (이 때 따옴표가 지워지지 않도록 유의해주세요)
### 전체 목록 모듈 적용 가이드
**`Step 1`**** 상단메뉴에 LIVE 메뉴 추가하기**
아임웹 관리자페이지 > 디자인모드에서 좌측 “상단메뉴” 옆 (+) 버튼을 클릭하여 새로운 메뉴를 추가합니다.
상단 메뉴바에 노출하고자 하는 메뉴명을 입력 후 확인을 클릭해주세요.
**`Step 2`**** 추가한 라이브 메뉴 설정하기**
1. 좌측 메뉴 리스트에서 앞서 생성한 라이브 메뉴 우측 ⓘ버튼을 클릭하여 메뉴 설정에 진입합니다.
2. URL 항목을 `livelist`로 설정해줍니다.
{% hint style="danger" %}
정상적으로 동작하기 위해서는 반드시 지정된 URL로 설정해야합니다.
{% endhint %}
**`Step 2`**** 추가한 라이브 메뉴 설정하기**
1. 앞서 생성한 라이브 라이브 메뉴를 선택한 뒤 빈 화면에 노출되는 위젯 추가 (+) 버튼을 클릭합니다.
2. 위젯 선택 창에서 “코드”를 선택하여 생성합니다.
**`Step 3`**** 메뉴 내 코드 위젯 추가하기**
코드 위젯 우상단의 ⓘ를 클릭하여 노출되는 메뉴 내에서 \[코드 설정]을 선택하여 진입합니다.
**`Step 4`**** 모듈 코드 붙여넣기**
코드 수정창에서 제공드린 방송목록 모듈 전체 코드를 복사해서 붙여넣은 뒤, 코드 중 externalServiceId에 전달받은 id값을 입력한 후 저장합니다. (이 때 따옴표가 지워지지 않도록 유의해주세요)
### 예고페이지 모듈 적용 가이드
**`Step 1`**** 상단메뉴에 예고페이지 메뉴 추가하기**
1. 아임웹 관리자페이지 > 디자인모드에서 좌측 “상단메뉴” 옆 (+) 버튼을 클릭하여 새로운 메뉴를 추가합니다.
2. 상단 메뉴바에 노출하고자 하는 메뉴명을 입력 후 확인을 클릭해주세요.
**`Step 2`**** 추가한 예고페이지 메뉴 설정하기**
1. 좌측 메뉴 리스트에서 앞서 생성한 라이브 메뉴 우측 ⓘ버튼을 클릭하여 메뉴 설정에 진입합니다.
2. URL 항목을 `livebridge`로 설정해줍니다.
3. 옵션에서 메뉴 숨김을 설정해주세요. (메뉴를 통해 예고페이지를 직접 진입하는 경우, 동작하지 않습니다.)
{% hint style="danger" %}
정상적으로 동작하기 위해서는 반드시 지정된 URL로 설정해야합니다.
{% endhint %}
**`Step 3`**** 메뉴 내 코드 위젯 추가하기**
1. 앞서 생성한 라이브 라이브 메뉴를 선택한 뒤 빈 화면에 노출되는 위젯 추가 (+) 버튼을 클릭합니다.
2. 위젯 선택 창에서 “코드”를 선택하여 생성합니다.
**`Step 4`**** 모듈 코드 붙여넣기**
코드 수정창에서 제공드린 방송목록 모듈 전체 코드를 복사해서 붙여넣은 뒤, 코드 중 externalServiceId에 전달받은 id값을 입력한 후 저장합니다. (이 때 따옴표가 지워지지 않도록 유의해주세요)