> For the complete documentation index, see [llms.txt](https://bastien-dosreis.gitbook.io/thunkable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/web-viewer.md).
# Web Viewer (Visionneuse Web)
## Video Tutorielle
{% embed url="" %}
{% 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
* [Définir l'URL](/thunkable/components/user-interface/web-viewer.md#set-url)
* [Modifier la taille du composant Web Viewer](/thunkable/components/user-interface/web-viewer.md#edit-web-viewer-size)
* [Ajouter un espacement](/thunkable/components/user-interface/web-viewer.md#add-spacing)
* [Gérer les autorisations](/thunkable/components/user-interface/web-viewer.md#manage-permissions)
* [Envoyer un message / Recevoir un message](/thunkable/components/user-interface/web-viewer.md#post-message-receive-message)
* [Voir Aussi](/thunkable/components/user-interface/web-viewer.md#see-also)
## Définir l'URL
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\://
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
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.
{% 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
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
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
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**.
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
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.
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
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/web-viewer.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.