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

# 아임웹

본 문서에서는 아임웹 호스팅 서비스를 이용하는 자사몰에서 코드를 몰라도 비교적 쉽게 적용할 수 있는 방법을 가이드합니다. 다만, 간단하게 연동하는만큼 부가적인 커스텀이나 개별 화면에 대한 자사몰 내 이동은 다소 제약됩니다.

모든 기능을 연동하고 싶은 경우, [아임웹 심화 연동](/livesolution/guide-for-sellers/old-displaymodule/advanced/imweb.md)을 진행해주세요.

### &#x20;    <mark style="color:blue;">적용 순서</mark>

1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.

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

2. 아임웹 관리자 페이지 > 디자인 모드 > 코드 위젯 추가 > 코드설정에 복사한 코드를 붙여넣어주세요.

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

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

2. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.

<figure><img src="/files/03yqlFyzGrBX9JtqDqHR" alt=""><figcaption></figcaption></figure>

4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.

5. 편집 사항을 저장하고 디자인을 게시합니다.

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

### &#x20;    <mark style="color:blue;">적용 케이스별 코드 블록 복사</mark>

적용하고 싶은 케이스에 따라 코드 블록 복사해주세요. \
코드 복사 이후에는 하단 메이크샵 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.

* A. 방송 목록 모듈
  * A1 라이브 방송 목록
  * A2 숏클립 목록
* B. 전체 목록 모듈

{% tabs %}
{% tab title="A1 모듈만 적용" %}

### 라이브 방송 목록 모듈

다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.

{% code title="A1. 라이브 방송 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='broadcast-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      target: document.getElementById('broadcast-list'),
    },
  })
</script>
```

{% endcode %}
{% endtab %}

{% tab title="A2 모듈만 적용" %}

### 숏클립 목록 모듈

다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

{% code title="A2. 숏클립 목록 모듈" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='shortclip-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      broadcasts : {displayType : "shortclip"},
      target: document.getElementById('shortclip-list'),
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="B모듈만 적용" %}

### 전체 목록 모듈

자사몰에 모든 라이브 및 숏클립 목록을 노출할 신규 페이지를 생성한 후, 다음 코드를 복사하여 붙여넣어주세요.

{% code title="전체 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!-- 모듈 초기화 영역 -->
<div id="broadcast-list-page"></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastListPage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-page/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      header: {
        useFeature: true, // 헤더 노출 여부 (true/false)
        title: {
          text: '전체 라이브', // 헤더명 입력
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      display: {
        standby: { // 예고 영역 설정 
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
        },
        onair: { // 온에어 영역 설정 
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    }
  })
</script>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### &#x20;    <mark style="color:blue;">방송 목록 모듈 적용 가이드</mark>

<mark style="color:blue;">**`Step 1`**</mark>**&#x20; 디자인 편집 화면 진입**

1. 관리자 페이지 > 좌측 메뉴의 \[디자인 모드] 클릭하여 편집화면 진입
2. 원하는 페이지의 원하는 영역에 마우스를 올려 노출되는 위젯추가 (+) 버튼을 클릭

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

<mark style="color:blue;">**`Step 2`**</mark>**&#x20; 코드 섹션 추가**

위젯 선택 화면에서 <mark style="color:blue;">\[코드]</mark>를 클릭하여 추가한 후, 코드 위젯 우상단의 ⓘ를 클릭하여 노출되는 메뉴 내에서 <mark style="color:blue;">\[코드 설정]</mark>을 선택하여 진입합니다.

<figure><img src="/files/6Z3GjuPOLr1OmVqixNye" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/0QkMH7hoigVUbEMsWKN1" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 3`**</mark>**&#x20; 모듈 코드 붙여넣기**

코드 수정창에서 제공드린 방송목록 모듈 전체 코드를 복사해서 붙여넣은 뒤, 코드 중 externalServiceId에 전달받은 id값을 입력한 후 저장합니다. (이 때 따옴표가 지워지지 않도록 유의해주세요)

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

### &#x20;    <mark style="color:blue;">전체 목록 모듈 적용 가이드</mark>

<mark style="color:blue;">**`Step 1`**</mark>**&#x20; 상단메뉴에 LIVE 메뉴 추가하기**

아임웹 관리자페이지 > 디자인모드에서 좌측 “상단메뉴” 옆 (+) 버튼을 클릭하여 새로운 메뉴를 추가합니다.

상단 메뉴바에 노출하고자 하는 메뉴명을 입력 후 확인을 클릭해주세요.

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

<mark style="color:blue;">**`Step 2`**</mark>**&#x20; 상단메뉴에 LIVE 메뉴 추가하기**

1. 앞서 생성한 라이브 라이브 메뉴를 선택한 뒤 빈 화면에 노출되는 위젯 추가 (+) 버튼을 클릭합니다.
2. 위젯 선택 창에서 “코드”를 선택하여 생성합니다.

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

<mark style="color:blue;">**`Step 3`**</mark>**&#x20; 코드 설정 선택하여 코드 편집 진입**

코드 위젯 우상단의 ⓘ를 클릭하여 노출되는 메뉴 내에서 \[코드 설정]을 선택하여 진입합니다.

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

<mark style="color:blue;">**`Step 4`**</mark>**&#x20; 모듈 코드 붙여넣기**

코드 수정창에서 제공드린 방송목록 모듈 전체 코드를 복사해서 붙여넣은 뒤, 코드 중 externalServiceId에 전달받은 id값을 입력한 후 저장합니다. (이 때 따옴표가 지워지지 않도록 유의해주세요)

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