Spécifications Techniques Marque Blanche

Ce document définit les standards de configuration de l'infrastructure NoPaperManuals™ en mode Marque Blanche.

[!NOTE] Nous proposons 3 niveaux d'intégration progressifs selon vos besoins techniques :

Niveau 1 : Délégation DNS (Personnalisation simple via couleurs et logos).

Niveau 2 : Smart Embedded (Intégration fluide via iframe sur votre site existant).

Niveau 3 : Reverse Proxy (Remote Fetching pour injecter votre HTML natif complet).

🔗 Niveaux d'Intégration et Personnalisation

Selon vos besoins de branding et vos ressources techniques, trois niveaux d'intégrations sont possibles.

🎨 NIVEAU 1 : Délégation DNS (Personnalisation du Branding)

Pour le niveau Délégation DNS, la personnalisation est conçue pour être simple et rapide, et sera configurée par notre équipe technique.

1. Configuration du Nom de Domaine (CNAME)

Vous devez d'abord choisir un sous-domaine dédié pour vos manuels (par exemple manuels.votre-marque.com). Ensuite, dans l'interface de gestion DNS de votre nom de domaine, vous devrez créer un enregistrement CNAME qui pointe vers notre infrastructure : fallback.nopapermanuals.com.

2. Ce que nous pouvons personnaliser pour vous :

• Identité Visuelle : Upload de votre logo haute résolution et d'une favicon personnalisée.

• Palette de Couleurs : Définition de votre "Accent Color" qui sera appliquée aux boutons et éléments actifs.

• Navigation (Header) : Configuration de menus simples (nom du lien, URL) pour recréer l'accès à vos pages principales.

• Pied de page (Footer) : Intégration de liens vers vos réseaux sociaux et vos pages de mentions légales.

🧩 NIVEAU 2 : Smart Embedded (Intégration Iframe)

L'approche "Smart Embedded" est idéale pour intégrer les manuels directement dans votre site E-commerce (Shopify, PrestaShop) ou votre CMS de Support existant.

Cette méthode permet de s'affranchir du design du Header ou du Footer de NoPaperManuals, tout en garantissant que les scans de QR Code physiques renvoient vos clients vers votre environnement.

1. Configuration de l'Host URL

Lors de la configuration de votre compte Whitelabel avec notre équipe, vous devez fournir l'URL exacte où sera hébergée l'Iframe (ex: https://support.votre-marque.com/manuels).

2. Intégration du Snippet JS

Notre équipe technique vous fournira un Snippet Javascript pré-configuré pour votre marque. Ce code lit l'URL lorsqu'un utilisateur scanne un QR Code (?npm_shortcode=XYZ) et forge dynamiquement l'URL de notre Iframe (https://nopapermanuals.com/s/XYZ?embedded=true).

<!-- Cible de l'Iframe sur votre page -->
<iframe id="npm-iframe" style="width:100%; height:100vh; border:none;"></iframe>

<script>
  // 1. Lire le paramètre 'npm_shortcode' de l'URL
  const params = new URLSearchParams(window.location.search);
  const shortcode = params.get('npm_shortcode');
  
  // 2. Définir l'URL finale de l'iframe (Mode minimaliste sans menus initiaux)
  const iframeUrl = shortcode 
    ? `https://nopapermanuals.com/s/${shortcode}?embedded=true` 
    : `https://nopapermanuals.com/tenant/votre-identifiant?embedded=true`;

  // 3. Charger le contenu de manière transparente
  document.getElementById('npm-iframe').src = iframeUrl;
</script>

3. Parcours Utilisateur lors du scan

• Étape 1 : L'utilisateur scanne le QR code sur votre produit (qrmanual.app/ABC).
• Étape 2 : Notre serveur détecte le mode Smart Embedded pour ce produit.
• Étape 3 : L'utilisateur est instantanément redirigé vers votre page : https://support.votre-marque.com/manuels?npm_shortcode=ABC.
• Étape 4 : Le snippet lit "ABC", charge le manuel depuis NoPaperManuals, et l'injecte dans la page. Vos utilisateurs restent sur votre nom de domaine.

🚀 NIVEAU 3 : Reverse Proxy (Mode Shell)

Le mode Proxy (Reverse Proxy) est l'intégration la plus avancée. Il permet de fusionner NoPaperManuals au cœur de votre propre infrastructure web.

Le contenu est servi directement depuis votre nom de domaine, ce qui optimise le référencement naturel (SEO) et offre l'expérience la plus transparente.

Personnalisation par "Remote Fetching" (Dynamique)

Au lieu de recréer manuellement vos menus, NoPaperManuals récupère en temps réel les fragments de votre Header et Footer via des URLs spécifiques.

• Avantage clé : Sychronisation 100% automatique. Toute modification sur votre site principal est répercutée instantanément sur la section "Manuels".
• Pré-requis technique : Vous devez fournir des endpoints HTML retournant uniquement la structure de votre header et footer (sans la balise globale <body> ou <html>).

🔒 Sécurisation de la communication

La communication "Server-to-Server" entre votre infrastructure et NoPaperManuals doit être strictement authentifiée via des headers spécifiques, pour éviter toute usurpation :

| Header HTTP | Valeur attendue | | :--- | :--- | | X-NPM-Custom-Host | Votre nom de domaine officiel (ex: manuels.votre-marque.com) | | X-NPM-Proxy-Secret | Votre clé secrète cryptographique (partagée avec notre équipe technique) |

[!WARNING] Protection critique Active Si le header X-NPM-Proxy-Secret est manquant, incorrect ou compromis, le pare-feu NoPaperManuals refusera de servir votre contenu pour protéger l'intégrité de votre marque.

⚙️ Architecture Requise : Sous-Domaine Exclusif

Pour les Single Page Applications (SPA), le Reverse Proxy doit obligatoirement cibler un sous-domaine dédié (ex: manuels.votre-marque.com) et intercepter le trafic à la racine /.

[!WARNING] La configuration sur un sous-dossier (ex: votre-marque.com/manuels/) est fortement déconseillée. Elle nécessite une validation technique pour éviter tout conflit avec nos assets (/_next/, /api/, etc.). Dans 95% des cas, le sous-domaine est la solution recommandée.

🛠️ Exemple de Configuration Nginx

Gabarit standard d'un bloc server Nginx à utiliser :

server {
    listen 443 ssl http2;
    server_name manuels.votre-marque.com;
    
    # 1. Certificats SSL valides (À maintenir par vos soins)
    ssl_certificate /path/to/cert/fullchain.pem;
    ssl_certificate_key /path/to/cert/privkey.pem;
    
    location / {
        # 2. Proxy vers la racine de NoPaperManuals
        proxy_pass https://nopapermanuals.com/;
        
        # 3. Headers de Sécurité obligatoires
        proxy_set_header X-NPM-Custom-Host "votre-marque.com";
        proxy_set_header X-NPM-Proxy-Secret "VOTRE_SECRET_CRYPTOGRAPHIQUE";
        
        # 4. Headers de transfert standards
        proxy_ssl_server_name on;
        proxy_set_header Host nopapermanuals.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

🛠️ Validation & Déploiement

• Validation Visuelle : Pour valider le rendu de vos couleurs, logos et options de branding avant le passage en production, un environnement de test dédié peut être mis en place. N'hésitez pas à nous contacter pour procéder à son activation.

• Tests de Sécurité : (Niveau 3 uniquement) Assurez-vous que vos headers de sécurité sont correctement configurés et propagés.

[!NOTE] Toute mise à jour de votre branding effectuée par notre support technique est appliquée en temps réel sur votre domaine Whitelabel.