Whitelabel Technical Specifications

This document defines the configuration standards for the NoPaperManuals™ infrastructure in Whitelabel mode.

[!NOTE] We offer 3 progressive levels of integration depending on your technical needs:

Level 1: DNS Delegation (Simple customization via colors and logos).

Level 2: Smart Embedded (Fluid integration via iframe on your existing site).

Level 3: Reverse Proxy (Remote Fetching to inject your complete native HTML).

🔗 Integration Levels and Customization

Depending on your branding needs and technical resources, three levels of integration are available.

🎨 LEVEL 1: DNS Delegation (Branding Customization)

For DNS Delegation, customization is designed to be simple and fast, and will be configured by our technical team.

1. Domain Name Configuration (CNAME)

You must first choose a dedicated subdomain for your manuals (e.g., manuals.your-brand.com). Then, in your domain's DNS management interface, you will need to create a CNAME record pointing to our infrastructure: fallback.nopapermanuals.com.

2. What we can customize for you:

• Visual Identity: Upload your high-resolution logo and a custom favicon.

• Color Palette: Define your "Accent Color" which will be applied to buttons and active elements.

• Navigation (Header): Configuration of simple menus (link name, URL) to recreate access to your main pages.

• Footer: Integration of links to your social networks and legal notice pages.

🧩 LEVEL 2: Smart Embedded (Iframe Integration)

The "Smart Embedded" approach is ideal for integrating manuals directly onto your E-commerce site (Shopify, PrestaShop) or your existing Support CMS.

This method allows you to bypass the design of the NoPaperManuals Header or Footer, while ensuring that physical QR Code scans redirect your customers to your environment.

1. Host URL Configuration

When setting up your Whitelabel account with our team, you must provide the exact URL where the Iframe will be hosted (e.g., https://support.your-brand.com/manuals).

2. JS Snippet Integration

Our technical team will provide a pre-configured Javascript Snippet for your brand. This code reads the URL when a user scans a QR Code (?npm_shortcode=XYZ) and dynamically crafts the URL of our Iframe (https://nopapermanuals.com/s/XYZ?embedded=true).

<!-- Target Iframe on your page -->
<iframe id="npm-iframe" style="width:100%; height:100vh; border:none;"></iframe>

<script>
  // 1. Read the 'npm_shortcode' parameter from the URL
  const params = new URLSearchParams(window.location.search);
  const shortcode = params.get('npm_shortcode');
  
  // 2. Define the final iframe URL (Minimalist mode without initial menus)
  const iframeUrl = shortcode 
    ? `https://nopapermanuals.com/s/${shortcode}?embedded=true` 
    : `https://nopapermanuals.com/tenant/your-identifier?embedded=true`;

  // 3. Load the content transparently
  document.getElementById('npm-iframe').src = iframeUrl;
</script>

3. User Journey during scan

• Step 1: The user scans the QR code on your product (qrmanual.app/ABC).
• Step 2: Our server detects the Smart Embedded mode for this product.
• Step 3: The user is instantly redirected to your page: https://support.your-brand.com/manuals?npm_shortcode=ABC.
• Step 4: The snippet reads "ABC", loads the manual from NoPaperManuals, and injects it into the page. Your users stay on your domain name.

🚀 LEVEL 3: Reverse Proxy (Shell Mode)

Proxy mode (Reverse Proxy) is the most advanced integration. It allows NoPaperManuals to merge into the core of your own web infrastructure.

Content is served directly from your domain name, optimizing Search Engine Optimization (SEO) and offering the most seamless experience.

Customization via "Remote Fetching" (Dynamic)

Instead of manually recreating your menus, NoPaperManuals fetches fragments of your Header and Footer in real-time via specific URLs.

• Key Advantage: 100% automatic synchronization. Any modification on your main site is instantly reflected in the "Manuals" section.
• Technical Prerequisite: You must provide HTML endpoints returning only the structure of your header and footer (without the global <body> or <html> tags).

🔒 Securing communication

"Server-to-Server" communication between your infrastructure and NoPaperManuals must be strictly authenticated via specific headers, to prevent any identity spoofing:

| HTTP Header | Expected Value | | :--- | :--- | | X-NPM-Custom-Host | Your official domain name (e.g., manuals.your-brand.com) | | X-NPM-Proxy-Secret | Your cryptographic secret key (shared with our technical team) |

[!WARNING] Critical Protection Active If the X-NPM-Proxy-Secret header is missing, incorrect, or compromised, the NoPaperManuals firewall will refuse to serve your content to protect your brand's integrity.

⚙️ Required Architecture: Dedicated Subdomain

For Single Page Applications (SPA), the Reverse Proxy must strictly target a dedicated subdomain (e.g., manuals.your-brand.com) and intercept traffic at the root /.

[!WARNING] Configuring on a subfolder (e.g., your-brand.com/manuals/) is strongly discouraged. It requires technical validation to avoid any conflict with our assets (/_next/, /api/, etc.). In 95% of cases, the subdomain is the recommended solution.

🛠️ Nginx Configuration Example

Standard server block template to use:

server {
    listen 443 ssl http2;
    server_name manuals.your-brand.com;
    
    # 1. Valid SSL certificates (To be maintained by you)
    ssl_certificate /path/to/cert/fullchain.pem;
    ssl_certificate_key /path/to/cert/privkey.pem;
    
    location / {
        # 2. Proxy to NoPaperManuals root
        proxy_pass https://nopapermanuals.com/;
        
        # 3. Mandatory Security Headers
        proxy_set_header X-NPM-Custom-Host "your-brand.com";
        proxy_set_header X-NPM-Proxy-Secret "YOUR_CRYPTOGRAPHIC_SECRET";
        
        # 4. Standard transfer headers
        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 & Deployment

• Visual Validation: To validate the rendering of your colors, logos, and branding options before going into production, a dedicated test environment can be set up. Please contact us to proceed with its activation.

• Security Tests: (Level 3 only) Ensure your security headers are correctly configured and propagated.

[!NOTE] Any updates to your branding made by our technical support are applied in real-time to your Whitelabel domain.