Ajouter le widget de messagerie instantanée portable Agent virtuel à un site web tiers

Pour utiliser le widget Chat portable sur Agent virtuel des pages Web tierces, ajoutez le code nécessaire à votre page Web.

Avant de commencer

Configurer le widget de messagerie instantanée portable Agent virtuel avant de terminer les étapes de cette rubrique.

Pour plus d’informations, consultez l’article Comment incorporer l’Agent virtuel dans un site externe du ServiceNow Community site.

Rôle requis : virtual_agent_admin ou admin

Procédure

Importez et instanciez cette référence de script dans l’en-tête de la page pour créer une instance de ServiceNow messagerie instantanée sur votre en-tête de page externe :

Remarque :

Dans l’exemple de référence de script, site1.example.com fait référence à l’URL de votre ServiceNow instance.

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

Conseil :

Si votre organisation utilise un nom de domaine personnalisé, saisissez le nom de domaine personnalisé comme propriété de l’instance, plutôt que le nom de domaine, afin de vous assurer que les ServiceNow résultats du navigateur sont cohérents entre plusieurs navigateurs.

Exemple avec configuration

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',
	},
});

Schéma de configuration 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
}