학습서: 웹 대화의 크기 및 위치 사용자 정의

이 학습서에서는 웹 대화를 사용자 정의 요소에 렌더링하여 웹 대화의 크기와 위치를 변경하는 방법을 보여줍니다.

이 학습서에서 설명하는 예제의 전체 작업 버전은 watsonx Assistant 웹 대화에 대한 사용자 정의 요소의 내용을 참조하십시오.

기본적으로 웹 사이트의 웹 대화 인터페이스는 스타일이 지정된 호스트 div 요소에서 렌더링되어 페이지의 고정 위치에 표시됩니다. 웹 대화의 크기 또는 위치를 변경하려면 사용자 정의 요소를 웹 대화의 호스트 위치로 지정할 수 있습니다. 이 호스트 요소는 기본 웹 대화 인터페이스 및 웹 대화 실행기 모두의 위치로 사용됩니다 (사용자 정의 실행기를 사용하지 않는 경우).

사용자 정의 요소를 사용하는 경우, 웹 대화가 열리거나 닫힐 때 (예: 고객이 실행 프로그램 아이콘 또는 최소화 단추를 클릭하는 경우) 웹 대화를 표시하고 숨기는 것도 제어할 수 있습니다. 이를 통해 애니메이션 열기 및 닫기와 같은 추가 효과를 적용할 수 있습니다. addClassName () 및 removeClass이름 () 함수를 사용하여 기본 창을 표시하고 숨기는 것을 제어할 수 있습니다.

사용자 정의 요소를 사용하려면 다음 단계를 수행하십시오.

웹 사이트 코드에서 웹 대화를 렌더링할 사용자 정의 요소를 정의하십시오. 사용 중인 프레임워크에 따라 이를 수행하는 많은 방법이 있습니다. 간단한 예제는 ID를 가진 빈 HTML 요소를 정의하는 것이다.
```
<div id="WebChatContainer"></div>
```
웹 대화 구성에서 참조할 수 있도록 사용자 정의 요소에 대한 참조를 가져오십시오. 참조를 얻으려면, 사용 중인 라이브러리에 대해 어떤 메커니즘이든 의미가 있는 모든 메커니즘을 사용하십시오. 예를 들어, document.createElement()에서 리턴된 참조를 저장하거나 쿼리 함수를 사용하여 DOM에서 요소를 찾아볼 수 있습니다. 이 예제에서는 지정한 ID를 사용하여 요소를 검색한다.
```
const customElement = document.querySelector('#WebChatContainer');
```

웹 대화 임베드 스크립트에서 사용자 정의 요소에 대한 참조를 지정하여 element 특성을 설정하십시오.

window.watsonAssistantChatOptions = {
  integrationID: "YOUR_INTEGRATION_ID",
  region: "YOUR_REGION",
  serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",

  // The important piece.
  element: customElement,

  onLoad: function(instance) {
    instance.render();
  }
};

기본적으로 기본 웹 대화 창이 숨겨져 있는지 확인하십시오. render 가 호출된 후 onLoad 이벤트 핸들러에서 이를 수행할 수 있습니다. 또한 고객이 페이지를 로드한 후에 웹 대화를 열고 닫을 수 있도록 view:change 이벤트를 청취하는 핸들러를 추가해야 합니다. 이 예제에서는 HideWebChat 라는 CSS 클래스를 사용하여 이를 수행합니다 (이 클래스의 정의는 전체 예제 참조).
```
function onLoad(instance) {
  instance.render();
  instance.on({ type: 'view:change', handler: viewChangeHandler });
  instance.elements.getMainWindow().addClassName('HideWebChat');
}
```
view:change 이벤트에 대한 응답으로 기본 웹 대화 창을 숨기고 표시하려면 핸들러를 작성하십시오. 이 예제는 단순히 요소를 표시하고 숨깁니다. 전체 예제 는 애니메이션 효과를 추가할 수 있는 방법을 보여줍니다.
```
function viewChangeHandler(event, instance) {
  if (event.newViewState.mainWindow) {
    instance.elements.getMainWindow().removeClassName('HideWebChat');
  } else {
    instance.elements.getMainWindow().addClassName('HideWebChat');
  }
}
```

전체 작업 코드는 watsonx Assistant 웹 대화에 대한 사용자 정의 요소 예제를 참조하십시오.