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

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Interfaces conversationnelles Yokohama

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

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

# Ajouter le widget de messagerie instantanée portable Agent virtuel à un site Web tiers {#ariaid-title1}

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture

Pour utiliser le widget de messagerie instantanée 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](https://servicenow-prod.fluidtopics.net/J5syFvdImgGHvL2elag2ew "Configurez le widget de messagerie instantanée portable Agent virtuel pour qu’il s’exécute Agent virtuel sur des pages Web tierces.") avant de terminer les étapes de cette rubrique.

Pour plus d'informations, consultez l'article [Comment intégrer l'Agent virtuel 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) 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é en tant que 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
        }