> 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/display-module-guide/imweb.md).

# 아임웹 가이드

본 문서는 아임웹 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다.

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

1. 관리툴에서 [`전시모듈 코드를 복사`](/livesolution/guide-for-sellers/display-module-management.md#codecpoy)해 주세요.&#x20;
2. 아임웹 관리자 페이지 > 디자인 모드에 진입하여 원하는 위치에 \</>코드 위젯을 추가해주세요.
3. \</>코드 위젯의 코드설정에 복사한 전시모듈 코드를 붙여넣어주세요.
4. 편집 사항을 저장하고 디자인을 게시합니다.
5. 자사몰에 적용된 내용을 확인합니다.

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

{% hint style="danger" %}
아임웹 내부 정책으로 인해 Free 버전을 이용하시는 경우, 아래 가이드를 따라 전시모듈을 삽입하여도 자사몰 전시페이지에 노출되지 않으니 주의해주세요.
{% endhint %}

### <mark style="color:blue;">**`Step 1`**</mark>**&#x20; 아임웹 쇼핑몰 관리자 로그인**

아임웹 쇼핑몰 관리자 로그인 페이지에 진입하여 로그인 혹은 회원가입을 진행합니다. \
쇼핑몰 관리 페이지로 진입합니다.

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

### <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 모드 진입**

관리자 페이지의 좌측 메뉴트리에서 \[디자인모드] 클릭 > 디자인 모드 새창으로 진입해 주세요.

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

### <mark style="color:blue;">**`Step 3`**</mark>**&#x20; 코드 편집 영역에 복사한 전시 모듈 코드 붙여넣기**

{% hint style="warning" %}
전시 모듈은 총 네 가지 케이스로 붙여 넣기가 가능합니다. 원하는 케이스에 맞는 적용 방법을 확인해 주세요.

1. [방송 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-broadcastlist)
2. [전체 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-livelist)
3. [방송 목록 모듈 + 전체 목록 모듈 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#broadcastlist-and-livelist)
4. [방송 목록 모듈 + 전체 목록 모듈 + 예고 페이지 모듈 모두 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#all)
   {% endhint %}

{% tabs %}
{% tab title="방송 목록 모듈 적용하기" %}
**코드 위젯 추가하기**

1. 좌측 메뉴 트리에서 모듈을 삽입하고 싶은 화면 클릭하기
2. 선택한 화면의 우측 미리보기 영역에서 모듈을 삽입할 위치에 마우스를 \</>코드 위젯 추가하기

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

**코드 설정하기**

3. 우측 미리보기 영역에 추가된 코드 위젯 영역에서 마우스 우클릭하여 코드설정으로 진입하기
4. 코드 입력창에 관리툴에서 복사한 "방송 목록 모듈" 코드를 붙여넣고 저장하기

<figure><img src="/files/02kjMOtr2e7qLxL3Uk9t" alt=""><figcaption></figcaption></figure>

3. 자사몰 전시페이지에서 정상적으로 노출되는지 확인하기
   {% endtab %}

{% tab title="전체 목록 모듈 적용하기" %}
**전체 목록 모듈 페이지가 노출될 상단메뉴 추가하기**

1. 좌측 메뉴트리에서 \[상단메뉴 추가] 버튼 클릭
2. 원하는 메뉴명으로 입력하여 LIVE 메뉴 추가하기

<figure><img src="/files/7wxfdBWE63f2TAkgWvrl" alt=""><figcaption></figcaption></figure>

**전체 목록 모듈 상단메뉴 URL 지정하기**

3. 추가한 LIVE메뉴의 ⓘ 버튼을 클릭
4. 메뉴 설정 > URL입력 영역에 `livelist`로 설정

{% hint style="warning" %}
정상적으로 동작하기 위해서는 반드시 지정된 URL로 설정해 주세요.
{% endhint %}

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

**코드 위젯 추가하고 코드 설정하기**

5. 추가된 메뉴 페이지 진입하여, 위젯 추가 버튼을 통해 \</> 코드 위젯 추가
6. 우측 미리보기 영역에 추가된 코드 위젯 영역에서 마우스 우클릭하여 코드설정으로 진입하기

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

7. 코드 입력창에 관리툴에서 복사한 "전체 목록 모듈" 코드를 붙여넣고 저장하기

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

8. 자사몰 전시페이지에서 정상적으로 노출되는지 확인하기
   {% endtab %}

{% tab title="예고페이지 모듈 적용하기" %}
**예고 페이지 모듈이 노출될 상단메뉴 추가하기**

1. 좌측 메뉴트리에서 \[상단메뉴 추가] 버튼 클릭
2. 원하는 메뉴명으로 입력하여 예고페이지 메뉴 추가하기

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

**예고페이지 상단메뉴 설정하기**

3. 추가한 예고페이지 메뉴의 ⓘ 버튼을 클릭
4. 메뉴 설정 > URL입력 영역에 `livebridge`로 설정하고, 메뉴 숨김 옵션 선택하기

{% hint style="warning" %}
정상적으로 동작하기 위해서는 반드시 지정된 URL로 설정해 주세요.

예고페이지의 경우 옵션에서 메뉴 숨김을 설정해 주세요. (메뉴를 통해 예고페이지를 직접 진입하는 경우, 동작하지 않습니다.)
{% endhint %}

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

**코드 위젯 추가하고 코드 설정하기**

5. 추가된 메뉴 페이지 진입하여, 위젯 추가 버튼을 통해 \</> 코드 위젯 추가
6. 우측 미리보기 영역에 추가된 코드 위젯 영역에서 마우스 우클릭하여 코드설정으로 진입하기

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

7. 코드 입력창에 관리툴에서 복사한 "전체 목록 모듈" 코드를 붙여넣고 저장하기

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

8. 자사몰 전시페이지에서 정상적으로 노출되는지 확인하기
   {% endtab %}
   {% endtabs %}

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

### &#x20;    <mark style="color:red;">코드 적용 시 주의사항</mark>&#x20;

* `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해 주세요.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해 주세요.
* **코드에 기재된 externalServiceId와 moduleId가 변경되지 않도록 유의해 주세요.**

{% hint style="danger" %}
개별 페이지는 본 가이드에서 약속된 이름으로 생성합니다.\
약속된 이름으로 페이지를 생성하지 않는 경우, 전시 모듈이 정상 동작하지 않습니다.&#x20;

* 전체 목록 모듈의 경우 신규 메뉴 URL은 <mark style="color:red;">`livelist`</mark>으로 생성
* 예고 페이지 모듈의 경우 신규 메뉴 URL은 <mark style="color:red;">`livebridge`</mark>으로 생성
  {% endhint %}