Fügen Sie den tragbaren Webclient Virtual Agent einer Drittanbieter-Website hinzu

Freigeben Version: Washingtondc

Aktualisiert 1. Februar 2024

1 Minute Lesedauer

Um das Chat-Widget von Portable Web Client für Virtual Agent auf Webseiten von Drittanbietern zu verwenden, fügen Sie Ihrer Webseite den erforderlichen Code hinzu.

Vorbereitungen

Konfigurieren Sie den tragbaren Webclient Virtual Agent . bevor Sie die Schritte dieses Themas abschließen.

Weitere Informationen finden Sie im Artikel How to embed Virtual Agent in an external site (Wie man Virtual Agent in eine externe Website einbettet) auf der Website ServiceNow Community.

Erforderliche Rolle: virtual_agent_admin oder admin

Prozedur

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

Hinweis:

Im Skriptreferenzbeispiel verweist site1.example.com auf die URL für Ihre Instanz ServiceNow.

<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 benutzerdefinierten Domänennamen verwendet, geben Sie den benutzerdefinierten Domänennamen als Instanzeigenschaft und nicht den Domänennamen ServiceNow ein, 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
}