---
sourceDocument: Interfaces conversationnelles Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/conversational-interfaces

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interfaces conversationnelles Xanadu

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# Ajouter le client Web portable Agent virtuel à un site Web tiers

# Ajouter le client Web portable Agent virtuel à un site Web tiers {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture

Pour utiliser le widget de messagerie instantanée Client Web portable sur Agent virtuel des pages Web tierces, ajoutez le code nécessaire à votre page Web.

## Avant de commencer

[Configurer le client Web portable Agent virtuel](https://servicenow-prod.fluidtopics.net/2m5k_jjlgTOdYeQFC2__kg "Configurez le widget de messagerie instantanée Client Web portable pour qu’il s’exécute Agent virtuel sur les pages Web tierces.") avant d'effectuer les étapes de cette rubrique.

Pour plus d'informations, consultez l'article [Comment intégrer Virtual Agent dans un site externe](https://www.servicenow.com/community/virtual-agent-nlu-articles/how-to-embed-virtual-agent-in-an-external-site-updated-for-tokyo/ta-p/2308092) sur le 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 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é d'instance, plutôt que le ServiceNow nom de domaine, pour vous assurer que les 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
        }