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

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 1 Minute Lesedauer
  • Um das tragbare Chat-Widget für Virtual Agent auf Webseiten von Drittanbietern zu verwenden, fügen Sie Ihrer Webseite den erforderlichen Code hinzu.

    Vorbereitungen

    Konfigurieren Sie das Chat-Widget Virtual Agent tragbar bevor Sie die Schritte dieses Themas abschließen.

    Weitere Informationen finden Sie im Artikel So betten Sie Virtual Agent in eine externe Website ein auf der Website ServiceNow Community.

    Erforderliche Rolle: virtual_agent_admin oder admin

    Prozedur

    Importieren und instanziieren Sie diese Skriptreferenz für den Seitenheader, um eine ServiceNow -Chatinstanz für den externen Seitenheader zu erstellen:
    Hinweis:
    Im Skriptreferenzbeispiel bezieht sich „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 anwenderdefinierten Domänennamen verwendet, geben Sie den anwenderdefinierten Domänennamen und nicht den Domänennamen ServiceNow als Instanzeigenschaft ein, um sicherzustellen, dass die Browser-Ergebnisse 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
    }