# Comment afficher le certificat sur mon site internet ?

Valorisez votre certification Mobilic sur votre site web en affichant votre badge de certification. Cette page vous explique comment intégrer facilement votre certificat sur différents types de sites.

### Pourquoi afficher votre certificat ?

Afficher votre badge de certification Mobilic sur votre site web vous permet de :

* **Valoriser votre engagement** pour la transparence et le respect de la réglementation
* **Afficher automatiquement** votre niveau de certification actuel

### Types d'intégration disponibles

Mobilic propose trois méthodes d'intégration selon vos besoins techniques :

#### 1. iFrame (Recommandé)

* **Sécurisé** et mis à jour automatiquement
* Fonctionne sur tous les types de sites
* Facile à intégrer

#### 2. Widget JavaScript

* **Interactif** avec options de personnalisation
* Léger et performant
* Pour les utilisateurs avancés

#### 3. Image statique

* **Simple** à intégrer
* Compatible partout
* Mise à jour manuelle requise

***

### Exemple 1 : Intégration sur WordPress

WordPress est l'un des CMS les plus populaires. Voici comment intégrer votre badge de certification Mobilic.

#### Méthode 1 : Utilisation du bloc HTML personnalisé (Recommandé)

**Étape 1 : Accéder à l'éditeur**

1. Connectez-vous à votre administration WordPress
2. Allez dans **Pages** ou **Articles**
3. Ouvrez la page où vous voulez afficher le badge
4. Cliquez sur **Modifier** pour accéder à l'éditeur Gutenberg

**Étape 2 : Ajouter le bloc HTML**

1. Cliquez sur le bouton **+** pour ajouter un nouveau bloc
2. Recherchez "**HTML personnalisé**" ou "**Custom HTML**"
3. Sélectionnez le bloc **HTML personnalisé**

**Étape 3 : Insérer le code**

1. Dans la zone de texte qui apparaît, collez votre code iFrame :

```html
<iframe src="https://mobilic.gouv.fr/badges/VOTRE-ID-ENTREPRISE"
        width="200"
        height="100"
        frameborder="0"
        title="Certificat Mobilic">
</iframe>
```

Étape 4 : Prévisualiser et publier

1. Cliquez sur Prévisualiser pour voir le résultat
2. Ajustez la taille si nécessaire (width et height)
3. Cliquez sur Mettre à jour ou Publier

Méthode alternative : Plugin iFrame

Si vous préférez une solution avec interface graphique :

1. Installez un plugin comme "Advanced iFrame"
2. Configurez l'URL de votre badge
3. Utilisez le shortcode généré dans vos pages

Sources : Cette méthode est basée sur les recommandations de <https://www.wpbeginner.com/wp-tutorials/how-to-easily-embed-iframe-code-in-wordpress/> et <https://www.hostinger.com/tutorials/iframe-into-wordpress&#x20>;

***

Exemple 2 : Intégration sur un site HTML classique

Pour un site web développé en HTML/CSS/JavaScript, l'intégration est encore plus directe.

Méthode 1 : iFrame HTML simple

Étape 1 : Localiser l'emplacement Ouvrez le fichier HTML de la page où vous voulez afficher le badge (par exemple index.html, about.html, etc.)

Étape 2 : Insérer le code Ajoutez le code suivant à l'endroit souhaité dans votre page :

```html
<div class="certificat-mobilic">
    <h3>Notre certification Mobilic</h3>
    <iframe src="https://mobilic.gouv.fr/badges/VOTRE-ID-ENTREPRISE" 
            width="200" 
            height="100" 
            frameborder="0" 
            style="border: none; border-radius: 8px;"
            title="Certificat Mobilic BRONZE">
    </iframe>
    <p>Nous respectons la réglementation du temps de travail</p>
</div>
```

Étape 3 : Styliser (Optionnel) Ajoutez du CSS pour personnaliser l'apparence :

```css
.certificat-mobilic {
    text-align: center;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin: 20px 0;
    background-color: #f9f9f9;
}

.certificat-mobilic iframe {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
```

Méthode 2 : Widget JavaScript (Avancé)

Pour une intégration plus interactive :

```html
<div id="mobilic-badge" 
     data-company-id="VOTRE-ID-ENTREPRISE" 
     data-size="medium">
</div>
<script src="https://mobilic.gouv.fr/widget.js"></script>
```

Personnalisation du widget :

* data-size : "small", "medium", "large"
* data-theme : "light", "dark"
* data-show-level : "true", "false"

Sources : Cette approche suit les standards HTML5 recommandés par le <https://www.w3schools.com/html/html\\_iframe.asp> et la <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe> pour l'intégration d'iframes.

***

Bonnes pratiques

Sécurité

* Toujours utiliser HTTPS pour vos pages
* Vérifier que votre site et le badge utilisent le même protocole
* Ajouter l'attribut title pour l'accessibilité

Performance

* Préférer l'iFrame au widget JavaScript pour les sites simples
* Tester sur mobile et desktop
* Vérifier que le badge ne ralentit pas votre site

Référencement

* Ajouter du texte alternatif décrivant votre certification
* Intégrer le badge dans un contexte éditorial pertinent
* Mentionner votre certification dans vos meta descriptions

***

Support technique

Si vous rencontrez des difficultés :

1. Vérifiez que votre ID d'entreprise est correcte
2. Assurez-vous que votre site utilise HTTPS
3. Testez d'abord sur une page de test
4. Contactez le support Mobilic si le problème persiste

Votre badge se mettra automatiquement à jour selon l'évolution de votre niveau de certification !

***

Sources principales : <https://www.wpbeginner.com/wp-tutorials/how-to-easily-embed-iframe-code-in-wordpress/>, <https://www.hostinger.com/tutorials/iframe-into-wordpress/>, <https://www.w3schools.com/html/html\\_iframe.asp>, <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe>

```
```