페이지에 웹 대화 임베드

웹사이트에 웹 채팅 위젯을 추가하려면 HTML 소스에 생성된 스크립트 요소를 임베드해야 합니다.

웹 채팅 통합 기능은 모든 AI 어시스턴트에 자동으로 포함되며, 각 환경에 따라 별도로 구성됩니다.

React 기반 애플리케이션과의 웹챗 연동에 대해서는 여기에서 다른 방법을 확인해 주세요.

웹사이트에 웹 채팅을 추가하려면 다음과 같이 하세요:

‘연동’ 페이지에서 ‘웹 채팅’ 타일을 찾아 ‘열기’를 클릭하세요. 웹 대화 열기 창이 열립니다.
환경 필드에서 웹 채팅 위젯을 연결할 환경을 선택합니다. ‘확인’을 클릭하세요.

선택된 환경에서 웹 대화 통합에 대한 설정을 표시하는 웹 대화 페이지가 열립니다.

미리보기 창에는 웹 채팅이 웹 페이지에 임베드되었을 때 어떤 모습일지 표시됩니다. 메시지가 “로 시작한다면, 아직 AI 비서에게 어떤 There is an error작업도 추가하지 않은 것 같습니다. 조치를 추가한 후에 미리보기 분할창에서 대화를 테스트할 수 있습니다.

퍼가기 탭을 클릭합니다.

코드 스니펫은 웹 대화 구성을 기반으로 생성됩니다. 사용자(또는 웹 개발자)는 웹 대화를 표시할 웹 페이지에 이 코드 스니펫을 추가합니다.

이 코드 스니펫에는 HTML script 요소가 포함되어 있습니다. 이 스크립트는 IBM 사이트에 호스팅된 JavaScript 코드를 호출하여, AI 어시스턴트와 통신하는 위젯 인스턴스를 생성합니다.

‘클립보드에 복사’ 아이콘을 클릭하여 삽입 스크립트를 클립보드에 복사하세요.
웹 대화 위젯을 표시할 웹 페이지의 HTML 소스를 편집하십시오. 코드 스니펫을 이 페이지에 붙여넣으십시오. 페이지가 더 빨리 렌더링되도록 코드를 닫기 </body> 태그에 가능한 가깝게 붙여넣으십시오.

생성된 임베드 스크립트에서 integrationID 또는 region 특성 값을 수정하지 마십시오.

웹 대화를 라이브 웹 사이트에 추가할 준비가 되어 있지 않으면 로컬 HTML 파일을 사용하여 빠르게 테스트할 수 있습니다. 이 HTML 코드를 테스트 페이지의 소스로 사용하십시오.

    <html>
    <head></head>
    <body>
        <title>My Test Page</title>
        <p>The body of my page.</p>
        &lt;!-- copied script elements --&gt;
        </body>
    </html>

이 코드를 확장자가 ' .html '인 파일에 복사하고 ' script ' 요소를 이전 단계에서 복사한 임베드 스크립트로 바꿉니다.

임베드 스크립트의 식별자(예: ' integrationID ' serviceInstanceID)는 비밀로 간주되지 않으며 웹사이트에 액세스할 수 있는 모든 사람이 볼 수 있습니다. 자세한 내용은 보안을 참조하세요.

웹사이트를 호스팅하는 시스템에 인터넷 액세스가 제한된 경우(예: 프록시 또는 방화벽을 사용하는 경우)에는 웹 채팅을 호스팅하는 URL에 액세스할 수 있는지 확인하세요. 자세한 내용은 웹 채팅 호스트에 액세스하기를 참조하세요.
브라우저에서 웹 페이지(또는 로컬 테스트 파일)를 여십시오. 페이지에 런처 아이콘이 표시되는 것을 확인할 수 있을 것입니다.
실행기 아이콘을 클릭하여 대화 창을 여십시오.
고객이 AI 어시스턴트를 이용할 수 있도록 하려는 각 웹 페이지에 동일한 임베드 스크립트를 붙여넣으세요.

동일한 스크립트 태그를 웹 사이트의 원하는 페이지에 얼마든지 붙여넣을 수 있습니다. 사용자가 AI 비서에게 도움을 요청할 수 있도록 원하는 곳에 이 기능을 추가하세요. 그러나 각 페이지에서 한 번만 추가하십시오.

이제 고객과 똑같은 방식으로 AI 어시스턴트를 테스트하고 응답 내용을 확인할 수 있습니다.

그러나 웹 대화를 사용하여 프로덕션으로 이동하기 전에 사이트 및 고객의 요구에 맞게 사용자 정의할 수 있습니다. 자세한 내용은 웹 채팅 개발 개요를 참조하십시오.