Menu hamburger
Logo Certifopac Accueil
×Fermer

© Certifopac 2022, tous droits réservés.

Affichez facilement votre certification Qualiopi sur votre site internet

⏱ Temps de lecture : 6mn

Vous souhaitez afficher votre certification Qualiopi facilement sur votre site internet ? Certifopac vous propose des snippets de code à copier sur votre site, vos visiteurs ne pourront plus rater votre certification.

Vignette fixée en bas à gauche de votre site internet

Copiez le code ci-après dans votre header pour afficher une vignette Qualiopi en bas à gauche de votre site.

	<a id="certifopacVignette" style="display: flex; align-items: center; justify-content: center; position: fixed; bottom: 8px; left: 0; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 8px; z-index: 999; text-decoration: none; padding: 8px;" href="https://certifopac.fr/" target="_blank">
		<svg width="48px" height="48px" viewBox="0 0 348 353" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;" style="margin: auto;">
		    <g transform="matrix(1,0,0,1,6.27456,26.4746)">
		        <g>
		            <path d="M242,172.1L249.1,172.1L248.6,174.7L241.4,173.7L242,172.1Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <rect x="60.2" y="248.8" width="280.9" height="77.1" style="fill:none;"/>
		            <g transform="matrix(1,0,0,1,60.2093,308.348)">
		                <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:81px;fill:rgb(30,54,92);">certif</text>
		            </g>
		            <g>
		                <path d="M302.6,262.8C316,262.8 325.4,271.3 325.4,285.6C325.4,299.9 316.1,308.4 302.6,308.4C289.2,308.4 279.9,300 279.9,285.6C279.9,271.3 289.1,262.8 302.6,262.8ZM302.6,276C293.6,276 288.7,279.6 288.7,285.6C288.7,291.7 293.6,295.3 302.6,295.3C311.6,295.3 316.6,291.7 316.6,285.6C316.6,279.6 311.6,276 302.6,276Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M301.7,209.9C317.3,209.9 325.4,219.4 325.4,230.5C325.4,234.1 324.5,238.4 323.1,240.5L318.6,243.3L340.1,243.3L340.1,256L281.1,256L281.1,243.3L287.6,243.3L282.8,240.1C280.9,237.7 280,233.4 280,229C279.9,217.1 289,209.9 301.7,209.9ZM302.5,222.9C294,222.9 288.6,227 288.6,233C288.6,238.8 292.2,243.3 302,243.3L303.9,243.3C313.2,243.3 316.5,238.3 316.5,233.4C316.6,227.3 311.9,222.9 302.5,222.9Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M317.9,178.7L322.5,180.6C324.4,183.7 325.3,187.3 325.3,191.3C325.3,198.6 320.8,205.1 312.7,205.1C303.3,205.1 297.8,196.8 297.8,181.5L297.8,178.7L297.1,178.7C296,178.7 294.8,178.7 293.4,178.9C290.8,179.1 288.7,181.1 288.7,184.9C288.7,188.9 291.1,191.1 295.4,191.4L295.4,203.5C285.5,203.3 279.9,194.9 279.9,184.4C279.9,171.6 285.5,167 293.2,166.3C295.2,166.1 297.7,166.1 300.2,166.1L313.3,166.1C316.5,166.1 319.5,165.9 324.2,165.3L324.2,177.7L317.9,178.7ZM308.5,178.8L305.3,178.8C304.7,186.7 306.6,192.1 311.6,192.1C314.8,192.1 316.5,189.8 316.5,186.3C316.6,182.5 313.8,178.8 308.5,178.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M297,116.9L297,129.3C291.1,130.2 288.7,133.2 288.7,137.4C288.7,142.7 293.1,146.1 302.2,146.1C312.2,146.1 316.6,142.6 316.6,137.4C316.6,133.5 313.9,130.4 308.9,129.5L308.9,116.9C319.8,118.6 325.3,126.9 325.3,138.1C325.3,150.1 317.6,159.2 302.9,159.2C288.1,159.2 279.8,149.3 279.8,137.1C279.9,125 287.3,117.6 297,116.9Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            </g>
		            <path d="M112.5,23.5L115.3,22.4L113.3,15.8L112.5,16.1L112.5,23.5Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M100.7,27.8L100.7,20.4L97.3,21.7L99.6,28.2L100.7,27.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M44.6,84.3L31,105.5L45.4,182.8L104.7,232.7L178.3,230.4L178.3,84.3L44.6,84.3Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            <path d="M190.1,222.8L240.5,180.8L242,172.1L190.1,172.1L190.1,222.8Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            <path d="M39.1,86.9L28.9,104.6L42.7,182.8L103.5,233.8L178.3,233.8" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M98.7,24.9L68.6,35.8L49.9,68.2" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M247.9,158.5L257.5,104.6L217.8,35.8L143.2,8.7L114,19.3" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M192.3,225.4L243.7,182.7L245.4,172.9" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M190.1,222.8L190.1,231.8L194.6,228.1L191.1,221.9L190.1,222.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M244.2,159.3L244.4,156.4L251.5,158.5L251.3,159.3L244.2,159.3Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M42.1,88.7L44.6,84.3L36.6,84.3L36.1,85.1L42.1,88.7Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M52.3,71L52.9,69.9L46.9,66.3L44.3,71L52.3,71Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <g>
		                <path d="M215.4,38.6L143.2,12.3L112.5,23.5L112.5,71L184,71C187.4,71 190.1,73.7 190.1,77.1L190.1,159.3L244.3,159.3L253.9,105.1L215.4,38.6Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		                <path d="M100.7,27.8L71,38.6L52.3,71L100.7,71L100.7,27.8Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            </g>
		        </g>
		    </g>
		</svg>
		<p style="margin: 0; color: #666; font-size: 13px; text-align: center; margin-left: 4px; padding-right: 4px;">Certifié <br> Qualiopi</p>
	</a>

Vignette fixée en bas à droite de votre site internet

Copiez le code ci-après dans votre header pour afficher une vignette Qualiopi en bas à droite de votre site.

	<a id="certifopacVignette" style="display: flex; align-items: center; justify-content: center; position: fixed; bottom: 8px; right: 0; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 8px; z-index: 999; text-decoration: none; padding: 8px;" href="https://certifopac.fr/" target="_blank">
		<svg width="48px" height="48px" viewBox="0 0 348 353" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;" style="margin: auto;">
		    <g transform="matrix(1,0,0,1,6.27456,26.4746)">
		        <g>
		            <path d="M242,172.1L249.1,172.1L248.6,174.7L241.4,173.7L242,172.1Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <rect x="60.2" y="248.8" width="280.9" height="77.1" style="fill:none;"/>
		            <g transform="matrix(1,0,0,1,60.2093,308.348)">
		                <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:81px;fill:rgb(30,54,92);">certif</text>
		            </g>
		            <g>
		                <path d="M302.6,262.8C316,262.8 325.4,271.3 325.4,285.6C325.4,299.9 316.1,308.4 302.6,308.4C289.2,308.4 279.9,300 279.9,285.6C279.9,271.3 289.1,262.8 302.6,262.8ZM302.6,276C293.6,276 288.7,279.6 288.7,285.6C288.7,291.7 293.6,295.3 302.6,295.3C311.6,295.3 316.6,291.7 316.6,285.6C316.6,279.6 311.6,276 302.6,276Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M301.7,209.9C317.3,209.9 325.4,219.4 325.4,230.5C325.4,234.1 324.5,238.4 323.1,240.5L318.6,243.3L340.1,243.3L340.1,256L281.1,256L281.1,243.3L287.6,243.3L282.8,240.1C280.9,237.7 280,233.4 280,229C279.9,217.1 289,209.9 301.7,209.9ZM302.5,222.9C294,222.9 288.6,227 288.6,233C288.6,238.8 292.2,243.3 302,243.3L303.9,243.3C313.2,243.3 316.5,238.3 316.5,233.4C316.6,227.3 311.9,222.9 302.5,222.9Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M317.9,178.7L322.5,180.6C324.4,183.7 325.3,187.3 325.3,191.3C325.3,198.6 320.8,205.1 312.7,205.1C303.3,205.1 297.8,196.8 297.8,181.5L297.8,178.7L297.1,178.7C296,178.7 294.8,178.7 293.4,178.9C290.8,179.1 288.7,181.1 288.7,184.9C288.7,188.9 291.1,191.1 295.4,191.4L295.4,203.5C285.5,203.3 279.9,194.9 279.9,184.4C279.9,171.6 285.5,167 293.2,166.3C295.2,166.1 297.7,166.1 300.2,166.1L313.3,166.1C316.5,166.1 319.5,165.9 324.2,165.3L324.2,177.7L317.9,178.7ZM308.5,178.8L305.3,178.8C304.7,186.7 306.6,192.1 311.6,192.1C314.8,192.1 316.5,189.8 316.5,186.3C316.6,182.5 313.8,178.8 308.5,178.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		                <path d="M297,116.9L297,129.3C291.1,130.2 288.7,133.2 288.7,137.4C288.7,142.7 293.1,146.1 302.2,146.1C312.2,146.1 316.6,142.6 316.6,137.4C316.6,133.5 313.9,130.4 308.9,129.5L308.9,116.9C319.8,118.6 325.3,126.9 325.3,138.1C325.3,150.1 317.6,159.2 302.9,159.2C288.1,159.2 279.8,149.3 279.8,137.1C279.9,125 287.3,117.6 297,116.9Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            </g>
		            <path d="M112.5,23.5L115.3,22.4L113.3,15.8L112.5,16.1L112.5,23.5Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M100.7,27.8L100.7,20.4L97.3,21.7L99.6,28.2L100.7,27.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M44.6,84.3L31,105.5L45.4,182.8L104.7,232.7L178.3,230.4L178.3,84.3L44.6,84.3Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            <path d="M190.1,222.8L240.5,180.8L242,172.1L190.1,172.1L190.1,222.8Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            <path d="M39.1,86.9L28.9,104.6L42.7,182.8L103.5,233.8L178.3,233.8" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M98.7,24.9L68.6,35.8L49.9,68.2" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M247.9,158.5L257.5,104.6L217.8,35.8L143.2,8.7L114,19.3" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M192.3,225.4L243.7,182.7L245.4,172.9" style="fill:none;fill-rule:nonzero;stroke:rgb(238,86,83);stroke-width:7px;"/>
		            <path d="M190.1,222.8L190.1,231.8L194.6,228.1L191.1,221.9L190.1,222.8Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M244.2,159.3L244.4,156.4L251.5,158.5L251.3,159.3L244.2,159.3Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M42.1,88.7L44.6,84.3L36.6,84.3L36.1,85.1L42.1,88.7Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <path d="M52.3,71L52.9,69.9L46.9,66.3L44.3,71L52.3,71Z" style="fill:rgb(238,86,83);fill-rule:nonzero;"/>
		            <g>
		                <path d="M215.4,38.6L143.2,12.3L112.5,23.5L112.5,71L184,71C187.4,71 190.1,73.7 190.1,77.1L190.1,159.3L244.3,159.3L253.9,105.1L215.4,38.6Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		                <path d="M100.7,27.8L71,38.6L52.3,71L100.7,71L100.7,27.8Z" style="fill:rgb(30,54,92);fill-rule:nonzero;"/>
		            </g>
		        </g>
		    </g>
		</svg>
		<p style="margin: 0; color: #666; font-size: 13px; text-align: center; margin-left: 4px; padding-right: 4px;">Certifié <br> Qualiopi</p>
	</a>

Si vous souhaitez n’afficher votre certification que sur grands écrans (ne pas afficher sur mobile) – copiez le snippet ci-après dans votre header

	<style>@media screen and (max-width:768px){#certifopacVignette{display:none!important;}}</style>

Comment ajouter les snippets de code et afficher ma certification Qualiopi sur mon site ?

Il existe de nombreuses manières de créer un site internet. Les extraits de code proposés fonctionneront quelle que soit votre solution technique. Cependant, il existe plusieurs manières d’ajouter du code à votre site et elles peuvent différer en fonction de votre cas de figure particulier.

De manière générale, nous vous recommandons de copier les extraits de code entièrement, dans votre header ou votre footer. De manière à ce que la vignette s’affiche correctement sur tout votre site internet.

Si votre site utilise WordPress avec un thème ou un thème enfant personnalisé, copiez les extraits dans le fichier header.php ou footer.php

Si votre site utilise WordPress et un page-builder tel que Divi ou Elementor, tournez vous vers les options générales de votre plugin pour ajouter du code dans l’en tête ou le pied de page de votre site. Ajouter du code HTML ou CSS avec un site Divi.

Vous n’êtes pas technique et ne disposez pas d’un développeur ? Vous pourrez également ajouter des extraits de code à votre site WordPress via un plugin. Cette solution fonctionnera sur tous les sites WordPress.

Contenu écrit par :
Nicolas Coutable