외부 공급업체 웹 사이트에 휴대용 가상 에이전트 채팅 위젯 추가

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 3분

    • 외부 공급업체 웹 페이지에서 휴대용 채팅 위젯 가상 에이전트 을 사용하려면 웹 페이지에 필요한 코드를 추가하십시오.

    시작하기 전에

    휴대용 가상 에이전트 채팅 위젯 구성 이 주제의 단계를 완료하기 전에.

    자세한 내용은 사이트에서 외부 사이트에 Virtual Agent를 포함하는 방법 문서를 ServiceNow 커뮤니티 참조하십시오.

    필요한 역할: virtual_agent_admin 또는 admin

    프로시저

    페이지 헤더에 대한 이 스크립트 참조를 임포트하고 인스턴스화하여 외부 페이지 헤더에 채팅 인스턴스를 ServiceNow 생성합니다.
    주:
    스크립트 참조 예시에서 site1.example.com 은 인스턴스의 ServiceNow URL을 참조합니다.
    <script type="module" >
      import ServiceNowChat from "https://site1.example.com/uxasset/externals/now-requestor-chat-popover-app/index.jsdbx?sysparm_substitute=false";
      var chat = new ServiceNowChat({ instance: "https://site1.example.com/", });
    </script>
    팁:
    조직에서 사용자 지정 도메인 이름을 사용하는 경우 여러 브라우저 간에 브라우저 결과가 일관되게 유지되도록 도메인 이름이 아닌 ServiceNow 인스턴스 속성으로 사용자 지정 도메인 이름을 입력하십시오.
    구성 예
    const chat = new ServiceNowChat({
	instance: 'https://site1.example.com',
	context: {
		skip_load_history: 1
	},
	branding: {
		bgColor: '#333',
		primaryColor: '#000',
		hoverColor: '#EFEFEF',
		activeColor: '#AAA',
		openIcon: 'custom-open.svg',
		closeIcon: 'custom-close.svg',
		sizeMultiplier: 1.6
	},
	offsetX: 50,
	offsetY: 50,
	position: 'left',
	translations: {
		'Open dialog': 'Open chat',
		'Open Chat. {0} unread message(s)': 'Click to open',
		'Close chat.': 'Click to close',
	},
});
    JSON 구성 스키마
    {
    instance: <string> - url to your instance, must be of the same domain (sub-domain)
    context: <object> - sys_parm variables to pass into the iframe
    branding: <object> - branding settings
          bgColor: <rgb|hex> - can take an rgb tuple, ie: '56,56,56' or a 3 or 6 hex color code, ie: #333 or #efefef.  background color of button
   	primaryColor: <rgb|hex> - font color
   	hoverColor: <rgb|hex> - hover background color of button
   	activeColor: <rgb|hex> - click / active background color of button
   	openIcon: <string> - name of the uploaded custom icon in settings
   	closeIcon: <string> - name of the uploaded custom icon in settings
   offsetX: <integer> - distance in pixels the button moves along the x-axis
   offsetY: <integer> - distance in pixels the button moves along the y-axis
   position: <enum: left|right> - position left or right side of screen
   translations: <object> - contains label mappings for translations or label changes
   	'Open dialog': <string> - replacement text for accessibility
   	'Open Chat. {0} unread messages(s)': <string> - replacement text for tooltip
   	'Close chat.': <string> - replacement text for tooltip
}