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

# 카페24

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F7RYXzuEwoxNlGU0JJjQw%2F%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%20%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%20%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5.png?alt=media&amp;token=e027e440-1c6d-4049-b704-3c7efc9d5bf8" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FLCvnB9D4Pvw01B1YrhnM%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%201.png?alt=media&amp;token=54f8f150-8ba8-48fb-93c9-49b6311f572d" alt=""><figcaption></figcaption></figure>

2. 카페24 디자인 편집창에 붙여 넣으세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F6a2gNKCvj8MultwdpfZq%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%202.png?alt=media&amp;token=e0a96e54-709b-4f16-87e4-ac00d9e7eab4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Ft8NIdc6v4UO94k8PYRlN%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%203.png?alt=media&amp;token=48810866-c177-4266-9978-274697b2f46e" alt=""><figcaption></figcaption></figure>

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

5. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Ft7RK9Gu1Ms0lsfnQfceZ%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%204.png?alt=media&amp;token=7e8f3de7-0f9a-4c9b-a408-4ed0a1954582" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FXaOQP8q6GSBVpmmMfkuw%2F%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%20%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%20%E1%84%8F%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B3%E1%84%87%E1%85%A7%E1%86%AF%20%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%20%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%A8%20%E1%84%87%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A1.png?alt=media&amp;token=22875e82-f5fd-4206-a38a-24e8a49f936f" alt=""><figcaption></figcaption></figure>

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

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

* 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 %}

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FCzCzJpJDHeQ1ygq9NcJP%2F%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%20%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%3E%20%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%83%E1%85%B5%E1%84%8C%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%20%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%E1%84%8E%E1%85%A1%E1%86%BC%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%20%E1%84%80%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3.png?alt=media&amp;token=d900c34a-9bce-4aa0-90a3-e769589b3c6a" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">카페24 디자인 편집창 적용 가이드</mark>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Feo43mOuKMiNWHWHTEegH%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%83%E1%85%B5%E1%84%8C%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%20%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%E1%84%8E%E1%85%A1%E1%86%BC%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%20%E1%84%80%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3.png?alt=media&amp;token=53532192-25ff-4e5a-9b4e-e81ac1159a72" alt=""><figcaption></figcaption></figure>

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

카페24 쇼핑몰 관리자 로그인 페이지(<https://eclogin.cafe24.com/Shop/>) 에 진입하여 로그인 혹은 회원가입을 진행합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FjFwtFux5WfVyu6NTRqlJ%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%201.png?alt=media&amp;token=2b205633-bd9b-4681-8510-f5a0511df911" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 템플릿 생성**

<mark style="color:blue;">**2-1**</mark>  새로운 디자인 템플릿 생성\
디자인 (PC/모바일) > 디자인 보관함 > 기본 디자인 추가 혹은 카페24 디자인 센터에서 디자인 템플릿 구입 > 디자인명 입력 및 디자인 템플릿 선택 > 추가 버튼 클릭&#x20;

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FzT56Mgh7TTP6V18nUHMg%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%202-1.png?alt=media&amp;token=1804c8d0-a850-442e-95d5-e1f077121aec" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**2-2**</mark>  기존에 있던 디자인 템플릿 복사하여 사용\
디자인(PC/모바일) > 디자인 보관함 > 기존 템플릿 선택 > 복사 버튼 클릭 > 복사 디자인명 입력 > 저장 버튼 클릭

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FSaQezYNRGGrTZ4ZZ5I1j%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%202-2.png?alt=media&amp;token=9c184e5f-06c4-4cb7-a52c-36b54abbd36d" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 3`**</mark>**&#x20; 디자인 템플릿 편집**\
생성된 디자인의 편집 버튼 클릭 > 스마트 디자인 편집창 열기

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FLeF9K8movdZDnh8jJIZk%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%203.png?alt=media&amp;token=7aa04574-6cc7-44f5-a80a-6749d164b75a" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 4`**</mark>**&#x20; 모듈 코드 복사 > 원하는 자사몰 영역 및 페이지에 복사한 코드 붙여넣기**

* A모듈: 방송 목록 모듈
* B모듈: 전체 목록 모듈

{% tabs %}
{% tab title="A모듈 적용 방법" %}
카페24 스마트 디자인 편집창에서

1. 자주 쓰는 화면 혹은 전체 화면 보기 탭 클릭
2. 모듈을 삽입하고 싶은 화면 선택 & 확인
3. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기
4. 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FqDzNo1wU7zZrC2zfMt30%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%204%20%3E%20A-1.png?alt=media&amp;token=3e8b4bfd-51f0-45d1-a13f-3fb0fbf30b01" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FuHkdjxUz2KuoZe5wTdKc%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%204%20%3E%20A-2.png?alt=media&amp;token=c66d4fd5-886e-4089-8322-6113bf867e88" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F68oU0FQfvMvB5yd0oq2u%2F(%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC)%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5.png?alt=media&amp;token=f1bdae64-3a44-4479-99b5-74b242947bc4" alt=""><figcaption></figcaption></figure>

쇼핑몰 메인 페이지에 A. 방송 목록을 넣는 경우, \ <mark style="color:purple;">●</mark> 메인 페이지 화면 클릭 후 > <mark style="color:orange;">●</mark> 메인 페이지 안, <mark style="color:green;">●</mark> 원하는 영역에 복사한 A모듈 코드를 붙여 넣어 주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FdALAGjYE38gG2KoHd2FJ%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20Step%204%20%3E%20A-3.png?alt=media&amp;token=1132e127-2544-4e9d-9839-975831697a4d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="B모듈 적용 방법" %}
카페24 스마트 디자인 편집창에서

1. 전체 화면 보기 탭 클릭
2. 화면 추가 버튼 클릭
3. 파일명 `/livelist.html` 입력 > 저장
4. `/livelist.html` 페이지 생성 확인
5. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기
6. 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

B모듈을 넣을 `/livelist.html` 페이지를 먼저 생성 후, \
해당 페이지의 원하는 영역에 복사한 B모듈 코드를 붙여 넣어 주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F6QeEgxwUgbSmmv9aIK6k%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-12-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.18.08.png?alt=media&amp;token=75ebdd42-82ce-4629-bd43-e1433edaec5b" alt=""><figcaption></figcaption></figure>
{% 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;

{% hint style="info" %}
네이버로부터 전달 받으신 외부연동용 서비스ID `externalServiceId`를 반드시 입력해주세요.
{% endhint %}

예) 전달 받은 서비스ID가 `yourservice`인 경우, 다음과 같이 입력합니다.

```javascript
moduleConfig: {
      externalServiceId: 'yourservice', // 전달 받은 ID를 입력해주세요.
```

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