Fügen Sie das tragbare Element hinzu Virtual Agent Chat-Widget zu einer Drittpartei-Website

Dient zur Verwendung des Widgets für tragbare Chats Virtual Agent Fügen Sie Ihrer Webseite auf Webseiten von Drittparteien den erforderlichen Code hinzu.

Vorbereitungen

Konfigurieren Sie das tragbare Gerät Virtual Agent Chat-Widget Vor Abschluss der Schritte dieses Themas.

Weitere Informationen finden Sie unter Einbetten von Virtual Agent in eine externe Website artikel in ServiceNow Community Website.

Erforderliche Rolle: virtual_agent_admin oder admin

Prozedur

Importieren und instanziieren Sie diese Skriptreferenz für den Seitenheader, um eine zu erstellen ServiceNow Chat-Instanz in Ihrem externen Seitenheader:

Hinweis:

Im Skriptreferenzbeispiel bezieht sich site1.example.com auf die URL für Ihren ServiceNow Instanz.

<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>

Tipp:

Wenn Ihre Organisation einen anwenderdefinierten Domänennamen verwendet, geben Sie den anwenderdefinierten Domänennamen als Instanzeigenschaft und nicht als ein ServiceNow Domänenname, um sicherzustellen, dass die Browserergebnisse für mehrere Browser konsistent sind.

Beispiel mit Konfiguration

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-Konfigurationsschema

{
    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
}