---
description: Cet élément vous permet d'insérer du code HTML brut sur la page.
---

# Pur HTML

## Disponible sur...

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3)

## Présentation

{% hint style="info" %}
Le composant **Pure HTML** vous permet d'inclure dans votre page des contenu HTML. Pour créer des présentations particulières ou pour utiliser des widgets fournis par des sites tiers (lecteur YouTube, timeline twitter,...)
{% endhint %}

### Ajout d'un nouveau composant Pure HTML

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Pure HTML.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.
3. Sélectionnez  **Pure HTML** dans l'onglet **Autres contenus**.

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FqB49TNFKJrOqVPHLvVBe%2FCapture%20d%E2%80%99e%CC%81cran%202024-09-26%20a%CC%80%2011.18.26.png?alt=media&#x26;token=4545753e-6c32-4bf1-b6f0-10e9355532aa" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
L'utilisation de contenu HTML nécessite un minimun de connaissance technique. En effet si le code HTML utilisé est incorrect il peut empêcher la page de s'afficher correctement.
{% endhint %}

{% hint style="info" %}
Pour les sites ![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3) le composant est disponible dans l'onglet **Modules.**\
Pour les sites ![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3) le composant est disponible dans l'onglet **Eléments spéciaux.**
{% endhint %}

### Configuration du composant

1. Une fois que vous avez ajouté le composant, vous verrez une boîte de dialogue de configuration.
2. Ajoutez un **Nom** (qui ne s'affiche que dans le Backend et pas sur le site) (optionnel)
3. Vous pouvez ensuite  coller votre **code HTML**.
4. Enregistrez vos modifications

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2F21kuEezgH8F53Sv2UT4F%2FCapture%20d%E2%80%99e%CC%81cran%202024-09-26%20a%CC%80%2011.52.48.png?alt=media&#x26;token=7622e973-b278-44db-a762-fb4b93cab930" alt=""><figcaption></figcaption></figure>

## Exemples

Vous pouvez retrouver des exemples d'intégration de

* [Timeline Twitter](pur-html/timeline-twitter)
* [Vidéo Youtube](pur-html/videos-youtube)
* [Facebook](pur-html/facebook)
* [Google Maps](pur-html/google-maps)
