> 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).

# 아임웹 가이드

MODULE APPLICATION (아임웹)

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FFEBngim3G1ec5kFtrKwC%2Fimage.png?alt=media&amp;token=9642c8b9-ad24-44af-b5f5-93655ba57bf1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FY08yVwDl59pM6vIx94uq%2Fimage.png?alt=media&amp;token=09ee99a3-7887-40fd-b6c7-381f439c7434" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FX4T4wxJWWFf8aVsqpZ16%2Fimage.png?alt=media&amp;token=3b0ac4cc-a676-446f-a9d6-6bde3ced112a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F1Vq90Vl8ssXI8j82hduo%2Fimage.png?alt=media&amp;token=cb90539e-8759-42cd-b900-30578721709e" 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="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F8WgOkwE0Wgl4uLGZ8vQM%2Fimage.png?alt=media&amp;token=2ba8ab05-5f8b-4118-8d30-823f610a1d20" alt=""><figcaption></figcaption></figure>

**코드 설정하기**

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F0j5axT5FV5mGAZCTRBS1%2Fimage.png?alt=media&amp;token=4810a3fa-db30-4f52-9ac4-48e3369c7b95" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F3wr42mW1iZfV8PcEzgma%2Fimage.png?alt=media&amp;token=a6089ff6-0789-410b-b51d-46cef948904a" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FFjJ8QFIGujlTDLjhxzAk%2Fimage.png?alt=media&amp;token=15a87198-3ce1-42e1-a04c-16ef86bb063a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FnPxMiS97JVjN206Q7eVy%2Fimage.png?alt=media&amp;token=491177f8-ceb2-43da-b916-51c2fac94798" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fzacxcxc9ll60hmd8laEc%2Fimage.png?alt=media&amp;token=76df35c8-5ace-46f3-84c5-2ca84afb259d" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FAStkWFz9Cs0a1CZz7DeS%2Fimage.png?alt=media&amp;token=42a5d2f9-ebe4-4cab-b917-a36a620653e5" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FwifC30rFHW94lIU0Lt4M%2Fimage.png?alt=media&amp;token=59130d35-4866-4d3c-bee1-ab4ce59bd00b" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FoTu4RazN9SFug1tq5nYN%2Fimage.png?alt=media&amp;token=3ee8f676-fad1-42a0-912f-701c50dee70f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FqtdEP7Zqwrnc8Dmg3tzI%2Fimage.png?alt=media&amp;token=aa5ab279-7525-4c83-a3c2-fab1c2e61e71" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fbvuot0sovtpN0jwBM3sA%2F(%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC)%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%B4%E1%84%89%E1%85%A1%E1%84%92%E1%85%A1%E1%86%BC.png?alt=media&amp;token=96817fba-ab22-4522-aa2d-5246eb83d29e" 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 %}