# 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>

```
```


---

# Agent Instructions: 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://faq.mobilic.beta.gouv.fr/usages-et-fonctionnement-de-mobilic-gestionnaire/comment-afficher-le-certificat-sur-mon-site-internet.md?ask=<question>
```

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.