CDN Creacert

Intégrez facilement les badges de certification Creacert sur vos contenus.

Le CDN Creacert vous permet d'afficher des badges de certification sur vos vidéos, images, audios et sites web. Les badges attestent que votre contenu a été créé par un humain, sans assistance d'intelligence artificielle.

Fonctionnalités

Player vidéo personnalisé avec contrôles complets
Player audio avec visualisation animée
Protection anti-copie (clic droit, drag & drop)
Badges interactifs avec tooltip
Compatible avec tous les frameworks (React, Vue, Angular...)
Léger (~15KB minifié)

Installation

Ajoutez simplement le script dans votre page HTML :

<script src="https://cdn.creacert.fr/embed.js"></script>

Le script détecte automatiquement tous les éléments avec l'attribut data-creacert-id et les transforme en contenus protégés avec badge.

Démarrage rapide

Commencez à utiliser Creacert en 2 minutes.

Ajoutez le script

Incluez le script Creacert avant la fermeture de votre balise </body> :

<script src="https://cdn.creacert.fr/embed.js"></script>

Ajoutez l'attribut à vos médias

Ajoutez data-creacert-id avec votre ID de certification :

                            <!-- Vidéo -->
<video data-creacert-id="votre-id" src="video.mp4"></video>

<!-- Image -->
<img data-creacert-id="votre-id" src="image.jpg">

<!-- Audio -->
<audio data-creacert-id="votre-id" src="audio.mp3"></audio>
                        

C'est prêt !

Le badge apparaît automatiquement sur vos contenus. Passez la souris dessus pour voir les détails de la certification.

Votre ID de certification se trouve dans votre espace Creacert, sur la page de détail de chaque œuvre certifiée.

Intégration Vidéo

Player vidéo personnalisé avec badge de certification.

Utilisation basique

                    <video 
    data-creacert-id="votre-id-certification"
    src="votre-video.mp4"
    poster="thumbnail.jpg"
></video>
                

Démo

Fonctionnalités du player

Bouton play/pause central et dans la barre de contrôles
Barre de progression cliquable
Affichage du temps écoulé
Contrôle du volume (mute/unmute)
Bouton Cast (Chromecast/AirPlay)
Mode plein écran
Badge dans la barre de contrôles avec tooltip
Mini-badge en bas à droite (visible quand contrôles masqués)

Options

Attribut	Valeur	Description
`data-creacert-id`	string	ID de certification (obligatoire)
`data-creacert-type`	original, original-2, craft-1, craft-2	Type de badge
`data-creacert-protection`	true / false	Protection anti-copie (défaut: true)

Intégration Image

Protégez vos images avec un badge de certification.

Utilisation basique

                    <img 
    data-creacert-id="votre-id-certification"
    src="votre-image.jpg"
    alt="Description de l'image"
>
                

Démo

Fonctionnalités

Mini-badge en bas à droite (toujours visible)
Tooltip au survol avec détails de certification
Protection clic droit désactivée
Protection drag & drop désactivée

La protection anti-copie n'empêche pas les captures d'écran. Elle décourage simplement le téléchargement direct.

Intégration Audio

Player audio personnalisé avec visualisation et badge.

Utilisation basique

                    <audio 
    data-creacert-id="votre-id-certification"
    src="votre-audio.mp3"
></audio>
                

Démo

Fonctionnalités

Design compact et élégant
Visualisation audio animée (barres)
Bouton play/pause
Badge intégré avec tooltip
Cover art par défaut (personnalisable via CSS)

Personnalisation

Vous pouvez personnaliser l'apparence du player audio via CSS :

                    /* Changer la couleur des barres */
.creacert-audio-bars span {
    background: linear-gradient(to top, #your-color, #your-color-light);
}

/* Changer le fond du player */
.creacert-audio-wrapper {
    background: linear-gradient(135deg, #your-bg, #your-bg-dark);
}
                

Badge Site Internet

Affichez un badge de certification sur l'ensemble de votre site.

Aperçu

Le badge site permet d'afficher une certification globale pour tout votre site web. Il s'intègre généralement dans le footer de manière discrète et élégante.

Votre Site Web

Contenu de votre page...

Intégration dans le footer

Ajoutez le badge dans votre footer avec un lien vers la vérification :

                    <footer>
    <div class="footer-content">
        <p>© 2025 Mon Site - Tous droits réservés</p>
        
        <!-- Badge Creacert -->
        <a href="https://creacert.fr/verify/votre-id" target="_blank">
            <img src="https://cdn.creacert.fr/badges/original-1.svg" 
                 alt="Certifié sans IA - Creacert"
                 width="60">
        </a>
    </div>
</footer>
                

Badges disponibles

Type	URL
Original ★	`https://cdn.creacert.fr/badges/original-1.svg`
Original ★★	`https://cdn.creacert.fr/badges/original-2.svg`
Craft ★	`https://cdn.creacert.fr/badges/craft-1.svg`
Craft ★★	`https://cdn.creacert.fr/badges/craft-2.svg`

Tailles recommandées

Contexte	Largeur
Footer compact	`width="40"` (40x46px)
Footer standard	`width="60"` (60x69px)
Footer large	`width="80"` (80x92px)
Taille complète	`width="120"` (120x138px)

Exemple live : Regardez le footer de cette page pour voir un badge intégré en action !

Types de badges

Quatre niveaux de certification pour vos créations.

Original ★

original

Création 100% humaine

Original ★★

original-2

Certification renforcée

Craft ★

craft-1

Œuvre dérivée certifiée

Craft ★★

craft-2

Dérivé avec historique complet

Utilisation

                    <!-- Spécifier le type de badge -->
<video 
    data-creacert-id="votre-id"
    data-creacert-type="original"
    ...
></video>
                

API JavaScript

Contrôlez Creacert programmatiquement.

Méthodes globales

Méthode	Description
`Creacert.init()`	Réinitialise et détecte les nouveaux éléments
`Creacert.wrapMedia(element)`	Applique Creacert à un élément spécifique
`Creacert.version`	Retourne la version du script

Initialisation manuelle

Si vous ajoutez du contenu dynamiquement (SPA, AJAX), appelez init() après :

                    // Après avoir ajouté du contenu dynamique
await fetchNewContent();
Creacert.init();
                

Wrapper un élément spécifique

                    const video = document.querySelector('#my-video');
video.dataset.creacertId = 'abc123';
video.dataset.creacertType = 'original';
Creacert.wrapMedia(video);
                

Événements

                    // Écouter quand un badge est cliqué
document.addEventListener('creacert:badge-click', (e) => {
    console.log('Certification:', e.detail.certificationId);
});

// Écouter les erreurs
document.addEventListener('creacert:error', (e) => {
    console.error('Erreur:', e.detail.message);
});
                