Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Étape 4 : Configurez votre site Web pour l'intégrer aux WorkSpaces applications Amazon
<a name="configure-website-for-integration"></a>

Les sections suivantes fournissent des informations sur la façon de configurer votre page Web pour héberger des sessions de streaming d' WorkSpaces applications intégrées.

**Topics**
+ [Importez le fichier appstream-embed JavaScript](#import-embed-javascript-file)
+ [Initialisation et configuration de l'objet d'interface `AppStream.Embed`](#initialize-configure-embed-interface-object)
+ [Exemples de masquage d'éléments dans l'interface utilisateur WorkSpaces des applications](#examples-hiding-user-interface-items)

## Importez le fichier appstream-embed JavaScript
<a name="import-embed-javascript-file"></a>

1. Sur la page Web sur laquelle vous prévoyez d'intégrer la session de streaming d' WorkSpaces applications, importez le fichier **appstream-embed.js** dans la page Web en ajoutant le code suivant :

   ```
   <script type="text/javascript" src="./appstream_embed.js"> </script>
   ```

1. Ensuite, créez un conteneur div vide. L'ID du div que vous avez défini est transmis au constructeur d'intégration WorkSpaces des applications. Il est ensuite utilisé pour injecter un iframe pour la session de streaming. Pour créer le conteneur div, ajoutez le code suivant :

   ```
   <div id="appstream-container"> </div>
   ```

## Initialisation et configuration de l'objet d'interface `AppStream.Embed`
<a name="initialize-configure-embed-interface-object"></a>

Pour initialiser l'objet d'`AppStream.Embed`interface JavaScript, vous devez ajouter du code qui crée un `AppStream.Embed` objet avec des options pour l'URL de diffusion et la configuration de l'interface utilisateur. Ces options, ainsi que l'ID div que vous avez créé, sont stockés dans un objet appelé `appstreamOptions`.

L'exemple de code suivant montre comment initialiser l'objet d'interface `AppStream.Embed`.

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
 appstreamEmbed = new AppStream.Embed("appstream-container", appstreamOptions);
```

Dans le code, remplacez *sessionURL* et *userInterfaceConfig* par vos propres valeurs. 

**Note**  
La valeur spécifiée pour *userInterfaceConfig* masque l'intégralité de la barre d'outils WorkSpaces Applications. Cette valeur, qui est incluse à titre d'exemple, est facultative.

***sessionUrl***  
URL de streaming que vous avez créée à l'aide de la console WorkSpaces Applications, de l'action API [CreateStreamingURL](https://docs.aws.amazon.com/appstream2/latest/APIReference/API_CreateStreamingURL.html) ou de la commande [create-streaming-url](https://docs.aws.amazon.com/cli/latest/reference/appstream/create-streaming-url.html) AWS CLI. Ce paramètre n'est pas sensible à la casse.  
**Type** : chaîne  
**Obligatoire** : oui

***userInterfaceConfig***  
Configuration qui génère l'état initial des éléments de l'interface utilisateur. La configuration est une paire clé-valeur.   
La clé,`AppStream.Embed.Options.HIDDEN_ELEMENTS`, spécifie les objets de l'interface utilisateur qui sont initialement masqués lors de l'initialisation de la session de streaming WorkSpaces des applications intégrées. Par la suite, vous pouvez renvoyer des objets masqués et visibles à l'aide du paramètre `getInterfaceState`.  
La valeur est un tableau de constantes (boutons de barre d'outils). Pour obtenir la liste des constantes que vous pouvez utiliser, consultez [Utilisation de l’option `HIDDEN_ELEMENTS`](constants-functions-events-embedded-sessions.md#constants-hidden-elements).  
**Type** : Carte (*key*:*value*)  
**Obligatoire** : non

## Exemples de masquage d'éléments dans l'interface utilisateur WorkSpaces des applications
<a name="examples-hiding-user-interface-items"></a>

Les exemples de cette section montrent comment masquer des éléments de l'interface utilisateur WorkSpaces des applications aux utilisateurs lors de leurs sessions de streaming d' WorkSpaces applications intégrées.

**Topics**
+ [Exemple 1 : masquer l'intégralité de la barre d'outils WorkSpaces des applications](#example-hide-the-entire-tooolbar)
+ [Exemple 2 : masquer un bouton spécifique dans la barre d'outils WorkSpaces des applications](#example-hide-a-specific-toolbar-button)
+ [Exemple 3 : masquer plusieurs boutons dans la barre d'outils WorkSpaces des applications](#example-hide-multiple-toolbar-buttons)

### Exemple 1 : masquer l'intégralité de la barre d'outils WorkSpaces des applications
<a name="example-hide-the-entire-tooolbar"></a>

Pour empêcher les utilisateurs d'accéder à n'importe quel bouton de la barre d'outils WorkSpaces des applications pendant les sessions de streaming intégrées, utilisez la `AppStream.Embed.Elements.TOOLBAR` constante. Cette constante permet de masquer tous les boutons de la barre d'outils des WorkSpaces applications.

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
```

### Exemple 2 : masquer un bouton spécifique dans la barre d'outils WorkSpaces des applications
<a name="example-hide-a-specific-toolbar-button"></a>

Vous pouvez afficher la barre d'outils WorkSpaces Applications, tout en empêchant les utilisateurs d'accéder à un bouton de barre d'outils spécifique pendant les sessions de streaming intégrées. Pour ce faire, spécifiez la constante du bouton que vous souhaitez masquer. Le code suivant utilise la constante `AppStream.Embed.Elements.FILES_BUTTON` pour masquer le bouton **Mes fichiers**. Cela empêche les utilisateurs d'accéder aux options de stockage persistant pendant les sessions de streaming intégrées.

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.FILES_BUTTON]}
 };
```

### Exemple 3 : masquer plusieurs boutons dans la barre d'outils WorkSpaces des applications
<a name="example-hide-multiple-toolbar-buttons"></a>

Vous pouvez afficher la barre d'outils WorkSpaces Applications, tout en empêchant les utilisateurs d'accéder à plusieurs boutons de barre d'outils pendant les sessions de streaming intégrées. Pour ce faire, spécifiez les constantes des boutons que vous souhaitez masquer. Le code suivant utilise les constantes `AppStream.Embed.Elements.END_SESSION_BUTTON` et `AppStream.Embed.Elements.FULLSCREEN_BUTTON` pour masquer les boutons **End Session (Fin de session)** et **Fullscreen (Plein écran)**. 

**Note**  
Séparez chaque constante par une virgule, sans espace devant ou après.

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode... (https://appstream2.region.aws.amazon.com/#/)',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.END_SESSION_BUTTON,AppStream.Embed.Elements.FULLSCREEN_BUTTON]}
 };
```