---
description: >-
  Avec le composant Web Viewer, vous pouvez ouvrir n'importe quel site web dans
  votre application pour l'afficher.
---

# Web Viewer (Visionneuse Web)

## Video Tutorielle <a href="#video-tutorial" id="video-tutorial"></a>

{% embed url="https://youtu.be/MDMM0cHvpUA" %}

{% hint style="info" %}
Certains sites web peuvent ne pas apparaître lorsque vous testez votre application sur le web. Vous devrez peut-être [tester ](https://docs.thunkable.com/get-started/live-test#live-test)l'application en direct sur un appareil, ou [télécharger](https://docs.thunkable.com/download) et installer l'application, pour voir votre page web.
{% endhint %}

## Vue d'ensemble <a href="#overview" id="overview"></a>

* [Définir l'URL](#set-url)
* [Modifier la taille du composant Web Viewer](#edit-web-viewer-size)
* [Ajouter un espacement](#add-spacing)
* [Gérer les autorisations](#manage-permissions)
* [Envoyer un message / Recevoir un message](#post-message-receive-message)
* [Voir Aussi](#see-also)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6CTgg5F9NZvzgso2%2Fweb-viewer-%E2%9C%95-fig-1.png?alt=media)

## Définir l'URL <a href="#set-url" id="set-url"></a>

Pour ouvrir un site web dans votre application, vous devez fournir une URL au composant Web Viewer.

Une URL est un peu comme une adresse de rue - elle indique à l'internaute l'emplacement du site web sur Internet.

* **URL:** Saisissez le lien vers le site web ou une image. L'URL doit comprendre https://

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MBsWlkJvf7VJqZxEMYn%2F-MBsZaD-WTDz66A-jHcq%2Fwebviewerseturl.png?alt=media\&token=15fba6ea-c711-4098-8252-85458f0f4937)

Note: Peut également accepter les fichiers .html qui ont été téléchargés dans l'application (idéal pour une utilisation hors ligne).

## Retour en arrière/avance <a href="#go-back-forward" id="go-back-forward"></a>

Vous pouvez utiliser des blocs pour revenir aux pages Web visitées précédemment. Une fois que vous êtes revenu en arrière, vous pouvez également utiliser des blocs pour naviguer à nouveau vers les pages visitées.

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MB4RInwTAcUkcdUBPAs%2F-MB4SeCZ8ujfOX4djmmf%2Fwebviewerforwardback.png?alt=media\&token=73c6112e-6454-4a8c-9187-366c7433102e)

{% hint style="info" %}
Le bloc arrière peut ne pas fonctionner lorsque vous testez votre application sur le web, mais il fonctionnera lorsque vous [testez ](https://docs.thunkable.com/get-started/live-test#live-test)votre application en direct et dans les applications [téléchargées](https://docs.thunkable.com/download)
{% endhint %}

## Modifier la taille du composant Web Viewer <a href="#edit-web-viewer-size" id="edit-web-viewer-size"></a>

Vous pouvez définir la hauteur du composant Web Viewer à l'aide de la propriété Height et sa largeur à l'aide de la propriété Width.

**Height**

* **Fill container -** Le composant Web Viewer remplit tout l'écran verticalement
* **Fit contents -** La hauteur du composant Web Viewer change en fonction du contenu qu'il contient
* **Relative size -** Le composant Web Viewer remplit le pourcentage spécifié de l'écran
* **Absolute size -** Dimensionne le composant Web Viewer en fonction d'un nombre déterminé de pixels

**Width**

* **Fill container -** Le composant Web Viewer remplit tout l'écran horizontalement
* **Fit contents -** La largeur du composant Web Viewer change pour s'adapter au contenu qu'il contient
* **Relative size -** Le composant Web Viewer remplit le pourcentage spécifié de l'écran
* **Absolute -** Dimensionne le composant Web Viewer en fonction d'un nombre déterminé de pixels

## Ajouter un espacement <a href="#add-spacing" id="add-spacing"></a>

Vous modifiez l'espacement et le positionnement du composant Web Viewer avec les propriétés Margin (Marge) et Padding (Remplissage).

**Margin**

* Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du composant Web Viewer en utilisant des valeurs en pixels ou en pourcentage.

**Padding**

* Vous pouvez spécifier l'espace que vous souhaitez entre les bords du composant Web Viewer et l'écran en utilisant des valeurs en pixels ou en pourcentage.

## Gérer les autorisations <a href="#manage-permissions" id="manage-permissions"></a>

Vous pouvez choisir si le composant Web Viewer demande automatiquement la localisation de l'utilisateur. Certains sites web nécessitent l'accès à la localisation de l'utilisateur pour fonctionner. Toutefois, si vous ne prévoyez pas d'afficher un site web qui nécessite cette autorisation dans votre application, vous ne voudrez peut-être pas que votre application demande une autorisation inutile.

Pour déterminer si le composant Web Viewer demande ou non la localisation de l'utilisateur, allez dans l'onglet **Design** et cliquez sur votre composant Web Viewer. Dans le panneau situé à droite de l'écran, cliquez sur l'onglet **Advanced**.

![Onglet avancé du composant Web Viewer](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MEXkpT0keUVgxF6wVUf%2F-MEXlfLY5hxEE4LuD6Lm%2Fwebviewer.png?alt=media\&token=b6d16bd2-9502-4ba5-9949-b8d948081164)

Faites défiler la page vers le bas jusqu'à ce que vous voyiez un bouton intitulé "**Geolocation Enabled**". Utilisez ce bouton pour déterminer si votre composant Web Viewer demande la localisation de l'utilisateur.

## Envoyer un message / Recevoir un message <a href="#post-message-receive-message" id="post-message-receive-message"></a>

Si vous êtes le propriétaire du site web affiché dans votre composant Web Viewer, vous pouvez envoyer et recevoir des messages entre votre site web et le Web Viewer en utilisant Javascript.

![Exemple de bloc "Post Message" du composant Web Viewer](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M7qtMqIPNlYIuBeIRTa%2F-M7quAC710MVDB2AH2lO%2Fimage.png?alt=media\&token=f56a535c-3971-4edd-a2c0-0468ac5273d3)

![Exemple de bloc "Recevoir un message" dans le composant Web Viewer](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M7qtMqIPNlYIuBeIRTa%2F-M7quDvR_hIKZsS_t-ZL%2Fimage.png?alt=media\&token=a163f5bb-2d1d-4a75-80c7-93f3588205a6)

Vous pouvez voir des exemples d'envoi/réception de messages et obtenir des instructions de configuration supplémentaires [ici](https://github.com/thunkable/webviewer-extension/).

### Voir aussi <a href="#see-also" id="see-also"></a>

Vous pouvez également trouver le composant [Web API](https://docs.thunkable.com/web-api) utile pour envoyer/recevoir des informations entre votre application et un site web.
