---
sourceDocument: 호주 고객 서비스 관리
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/customer-service-management

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 고객 서비스 관리

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# 카탈로그 항목 구성요소 인스턴스 구성

# 카탈로그 항목 구성요소 인스턴스 구성 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 10분

사용자가 웹 사이트에 임베드하여 웹 사이트에서 항목이나 서비스를 요청할 수 있도록 카탈로그 항목 구성요소 인스턴스를 구성합니다.

## 시작하기 전에

카탈로그 항목 구성요소 인스턴스를 구성하려면 다음 설정이 있어야 합니다.

* 인스턴스에서 활성화합니다 Web Embeddables . 자세한 내용은 [Web Embeddables 활성화](https://servicenow-prod.fluidtopics.net/BxTK1IF95tkE3r063sRTyQ "고객 서비스용 구성요소(sn_cx_components), 게스트용 웹 구성요소(sn_guest_component) 및 웹 내장 가능 코어(sn_embeddable_core)를 활성화 ServiceNow 하여 인스턴스에서 활성화 Web Embeddables 할 수 있습니다. 이 애플리케이션은 관련 플러그인이 아직 설치되어 있지 않으면 이를 설정합니다.") 문서를 참조하십시오.
* [사용자 지정 URL을 인스턴스 URL로 설정](https://servicenow-prod.fluidtopics.net/Te2y_OXHzO2zA~_40_tXWw "URL 대신 ServiceNow 사용할 사용자 지정 URL을 인스턴스 구성에 추가합니다. 이 사용자 지정 URL을 사용하면 타사 쿠키가 꺼져 있는 경우에도 브라우저에서 포함된 구성 요소에 계속 액세스할 수 있습니다.").
* OIDC(OpenID Connect) 인증 또는 비 OIDC 인증을 사용하여 구성요소를 인증합니다 ServiceNow . 자세한 내용은 [OIDC를 사용하여 구성요소 인증 ServiceNow](https://servicenow-prod.fluidtopics.net/d9G94qvBWbvkKycW57bEkw "OIDC(OpenID Connect) 인증을 사용하여 자동 로그인 및 로그아웃을 설정하여 웹 사이트 및 포함된 구성요소에서 단일 및 동시 로그인 및 로그아웃을 활성화합니다.") 및 [구성요소에 대한 ServiceNow 비 OIDC 인증](https://servicenow-prod.fluidtopics.net/T4gRI0jDvbE9GaWF3HRpbw "웹 사이트에서 OIDC(OpenID Connect) 인증을 사용하지 않는 경우 구성요소를 인증 ServiceNow 하기 위한 JSON 웹 토큰(JWT) 토큰을 생성합니다.") 문서를 참조하십시오.
{#configure-catalog-item-component-on-instance__ul_brf_cqf_ccc}

필요한 역할: sn_embeddable_core.emb_admin

## 프로시저

1. 다음으로 이동 모두Web Embeddable홈페이지.
2. 홈페이지에서 모듈 만들기를 선택하거나 기존 모듈을 사용합니다.  
   모듈 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 [모듈 생성](https://servicenow-prod.fluidtopics.net/fAAXjp2YgZAfUHkm17Y35A "웹 사이트에서 사용되는 구성요소 인스턴스를 관리하는 모듈을 생성합니다. 모듈을 만들거나 사전 빌드된 모듈을 사용하고 요구 사항에 따라 편집할 수 있습니다.").
3. 모듈 페이지의 구성요소 탭에서 카탈로그 항목 구성요소 인스턴스를 기존 또는 새 그룹에 추가합니다.  
   그룹을 만든 다음 구성 요소 인스턴스를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 [그룹 생성 및 구성요소 인스턴스 추가](https://servicenow-prod.fluidtopics.net/06V5uuh3tbtsBxEab2XCIQ "그룹을 생성하여 페이지 또는 섹션과 같은 외부 공급업체 웹 사이트 구조를 모델링합니다. 기본 그룹을 사용하거나 새 그룹을 생성하여 해당 페이지 또는 섹션에서 구성요소 인스턴스를 관리합니다.").
4. **옵션:** 실시간 미리 보기를 사용할 수 없는 경우 구성요소의 시각적 표현을 보려면 정적 미리 보기 표시 옵션을 전환하십시오.  
   주:  
   활성화하면 전역 속성 또는 구성요소 속성에 대한 변경 사항이 미리 보기 탭에 실시간으로 표시되지 않습니다.
5. 카탈로그 항목 구성요소 인스턴스 속성을 구성합니다.  
   * 미리 보기 탭에는 구성요소 속성에 설정된 선택 항목에 따라 실시간 데이터가 표시됩니다.
   * 카탈로그 항목 구성 요소 인스턴스와 관련된 구성요소 속성에 대한 설명은 다음 문서를 참조하십시오 [카탈로그 항목의 구성요소 속성](https://servicenow-prod.fluidtopics.net/nQTKm2cd62nD2yzwpbeXfQ "구성요소 속성을 사용하면 외부 공급업체 웹 사이트에서 카탈로그 항목 구성요소 인스턴스의 동작을 구성할 수 있습니다.").
   {#configure-catalog-item-component-on-instance__ul_jlw_yjw_cfc}
6. CORS 규칙 탭을 선택하여 CORS 규칙을 구성합니다.  
   CORS 규칙 구성에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소를 포함 ServiceNow 하기 전에 CORS(Cross-Origin Resource Sharing) 규칙 구성](https://servicenow-prod.fluidtopics.net/RSIuXf5EDl_R6a6taJVn7A "웹 구성요소를 포함하려는 웹 사이트와 구성요소 간에 ServiceNow 도메인 간 요청을 사용하도록 CORS 규칙을 구성합니다.").
7. 구성 요소 탭을 선택합니다.  
   애플리케이션 범위에 대한 메시지가 나타나면 범위를 고객 서비스용 웹 구성 요소로 변경하여 기록을 편집할 수 있도록 합니다.
8. Embed 코드 가져오기를 선택합니다.  
   전역 코드와 구성요소 코드가 모두 표시되는 팝업 창이 나타납니다.
9. 전역 코드 탭에서 생성된 코드를 검토하고 전역 코드 복사를 선택합니다.  
   전역 코드는 외부 공급업체 웹 페이지에 한 번만 추가해야 합니다.

       import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';

       await init({
           theme: 'fad87d2ca304121029a4d1aed31e610f',  /* sys_id of the theme to use for the embeddable components in your website */
           baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
           authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
           module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
           pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
           guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
           cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
       });

       function getTokenCallBack() {
           var idToken; /* Get the id token for the current user */
           return Promise.resolve(idToken);
       }

       function getGuestJWTTokenCallBack() {
           var guestToken; /* Get the guest token for the current user */
           return Promise.resolve(guestToken);
       }

       /* Uncomment below function to handle guest session */
       // await startGuestSession();

       /* Uncomment below functions to handle login and logout once the user logs into your website */
       // await login();
       // await logout();

10. **옵션:** 구성 요소 코드 탭에서 이벤트 처리기 사용 토글 스위치를 밀어 웹 페이지의 사용자 상호 작용에 의해 트리거되는 이벤트를 처리합니다.  
    주:  
    이벤트 핸들러를 활성화하면 구성요소 코드도 수정됩니다. 의 이벤트 핸들러 Web Embeddables에 대한 자세한 내용은 다음 문서를 참조하십시오 [카탈로그 항목 구성요소의 이벤트 핸들러](https://servicenow-prod.fluidtopics.net/5EdR1EIjO8vUWIxgpY8E7g "구성요소는 특정 조건이 충족되거나 사용자 상호작용이 있을 때 이벤트를 트리거합니다. 이벤트를 사용하여 외부 공급업체 웹 페이지의 코드를 통해 작업을 실행할 수 있습니다.").
11. 구성요소 코드 탭에서 생성된 코드를 검토하고 구성요소 코드 복사를 선택합니다.  
    이 생성된 코드에는 이벤트 처리기도 포함됩니다.

        <!--  
            Module: Demo module
            Group: Group 1
            Instance: Catalog item 1
        -->
        <sn-embedx-catalog-item-form
        	sys-id="56c62944c30102003d3b7bfaa2d3ae36"
        	confirmation-text="Request submitted successfully!"
        	confirmation-sub-text="Estimated resolution in 24 hours"
        	reference-number-label="Reference Number :"
        	primary-button-label="View details"
        	secondary-button-label="Browse services">
        </sn-embedx-catalog-item-form>
        <!--
         The component also includes the following additional properties:
         hide-reference-number
         hide-primary-button
         hide-secondary-button
         hide-record-created-confirmation
         hide-errors
         hide-notifications
        -->

        <script type="module">
        	import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
        	
        	const snEmbedxCatalogItemForm = document.querySelector('sn-embedx-catalog-item-form');

        	/* Uncomment this code for the default behaviour of the Catalog item component.

        	// Get the catalog item record id from the current URL.
        	// Optionally, get query to pre fill the form.
        	const currentURL = new URL(window.location.href);
        	const urlParams = new URLSearchParams(currentURL.search);
        	const account = urlParams.get('emb_account');
        	const preferred_language = urlParams.get('emb_preferred_language');
        	// Update the sysId of the component property.
        	// Optionally, update the prefill fields property
        	const prefillConfig = {
        			account: account,
        			preferred_language: preferred_language
        	};
        	setProperties(snEmbedxCatalogItemForm,{
        		prefillFields: prefillConfig
        	});
        */

        	getEmbeddables(["sn-embedx-catalog-item-form"]);

        	const eventHandlers = {
        		'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_FAILED' : (e) => {
        			// This event is dispatched if the record creation has failed.
        		},
        		'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_NOTIFICATION_SENT' : (e) => {
        			// This event is dispatched when the component provides a notification for the end user.
        			var {items} = e.detail.payload;
        			console.log(items);
        		},
        		'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_READY' : (e) => {
        			// This event is dispatched when a component is ready and usable.
        		},
        		'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_SUCCEEDED' : (e) => {
        			// This event is dispatched if the record was successfully created.
        			var {table, record_sys_id} = e.detail.payload;
        			console.log(table, record_sys_id);
        		},
        		'SN_EMBEDX_CATALOG_ITEM_FORM#BUTTON_CLICKED' : (e) => {
        			// This event is dispatched if any button is clicked on the confirmation message.
        			var {table, record_sys_id, button_variant} = e.detail.payload;
        			var primaryURL =  '/caseview'; // Replace with the URL of the case view page
        			var secondaryURL = '/browse'; // Replace with the URL of the secondary page

        			if(button_variant == 'primary') {
        				// Construct the URL for the Case View component with URL parameters
        				const caseViewURL = primaryURL+'?emb_table='+table+'&emb_recordid='+record_sys_id;
        				open(caseViewURL,'_self'); // Open case record when primary button is clicked
        			}
        			else {
        				// Open the Case View component in the same tab
        				open(secondaryURL,'_self');
        			}
        		},
        		'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_ERROR' : (e) => {
        			// This event is dispatched when a property validation or internal error occurs.
        			var {errorMessage, errorType} = e.detail.payload;
        			console.log(errorMessage, errorType);
        		}
        	};

        	setEvents(snEmbedxCatalogItemForm, eventHandlers);
        </script>

{#configure-catalog-item-component-on-instance__steps_kkl_1fn_ccc}

## 결과

전역 및 구성요소 코드를 외부 공급업체 관리자와 공유하여 외부 공급업체 웹 사이트에 카탈로그 항목 구성요소 인스턴스를 포함할 준비가 되었습니다.

## 다음에 수행할 작업

[외부 공급업체 웹 사이트에 카탈로그 항목 구성요소 인스턴스 포함](https://servicenow-prod.fluidtopics.net/llV0wR0B1Z3QAeGhe2pzGw "고객이 외부 공급업체 웹 사이트에서 카탈로그 항목 구성요소 인스턴스를 사용할 수 있도록 구성한 카탈로그 항목 구성요소 인스턴스의 전역 코드와 구성요소 코드를 포함합니다.")
**관련 참조**   

* [카탈로그 항목의 구성요소 속성](https://servicenow-prod.fluidtopics.net/nQTKm2cd62nD2yzwpbeXfQ "구성요소 속성을 사용하면 외부 공급업체 웹 사이트에서 카탈로그 항목 구성요소 인스턴스의 동작을 구성할 수 있습니다.")
* [카탈로그 항목 구성요소의 이벤트 핸들러](https://servicenow-prod.fluidtopics.net/5EdR1EIjO8vUWIxgpY8E7g "구성요소는 특정 조건이 충족되거나 사용자 상호작용이 있을 때 이벤트를 트리거합니다. 이벤트를 사용하여 외부 공급업체 웹 페이지의 코드를 통해 작업을 실행할 수 있습니다.")
* [카탈로그 항목 구성요소에 대한 샘플 코드](https://servicenow-prod.fluidtopics.net/abAvISUsCtg6Dizy0ebM5g "이벤트가 트리거될 때 작업을 정의하기 위해 샘플 코드가 제공됩니다. 웹 페이지에 구성요소를 포함하기 전에 사용 사례에 대한 샘플 코드를 업데이트합니다.")