# CSS / JS Quick Injection > Restyle or patch a website you are wrapping without editing the website. - **Applies to:** AppMint and Appwright - **Source:** the Integration Guide shipped inside the app; this page is generated from it. - **HTML:** https://freewebtoapk.com/docs/css-and-js-injection Global Tweaks - Same CSS & JS on Every Page ### 1. What Is CSS/JS Quick Injection? Quick Injection adds the SAME CSS and JavaScript to EVERY page your app loads - no conditions, no per-site rules. Think of it as a global style sheet and a global startup script that always runs, no matter which page the user is on. ✅ Perfect for: - Branding tweaks (colors, fonts, logo) - Hiding global elements (header, footer, cookie banner) - Small layout or font-size fixes for all pages - Adding a global floating button (WhatsApp, chat, back-to-top) ❌ NOT designed for: - Running code only on specific URLs → use Smart User Scripts instead - Complex automations with timing → use Smart User Scripts ### 2. Where to Find It in the Generator Step 4 (Permissions) → scroll down → 🎨 CSS / JS Quick Injection card. Two text boxes: - 🎨 Custom CSS - paste raw CSS rules - ⚡ Custom JavaScript - paste raw JS (no wrapping needed) Both are optional. Leave empty to skip. ### 3. Example 1: Hide Cookie Banner & Header Globally remove a sticky header and cookie consent popup on every page: ``` /* ── Hide header & nav ── */ header, nav, .navbar, #top-bar, .site-header { display: none !important; } /* ── Remove cookie/GDPR banners ── */ .cookie-banner, #cookie-notice, .gdpr-popup, [id*="cookie"], [class*="cookie"] { display: none !important; } ``` ### 4. Example 2: Full Dark Mode (CSS only) Turn any website dark with a single CSS filter - images stay natural: ``` /* ── Dark Mode via CSS filter ── */ html { filter: invert(1) hue-rotate(180deg) !important; } /* Keep images & media in original colors */ img, video, canvas, svg, picture { filter: invert(1) hue-rotate(180deg) !important; } ``` ### 5. Example 3: Scale / Zoom Fix Website looks tiny or too large on mobile? Fix the zoom level: ``` /* 85% scale — adjust to your needs */ body { zoom: 0.85; } /* Force readable font size */ body, p, li, td { font-size: 15px !important; line-height: 1.65 !important; } ``` ### 6. Example 4: Floating WhatsApp Button (JS) Adds a floating WhatsApp contact button on every page (replace the phone number): ``` // Floating WhatsApp button (function() { if (document.getElementById('__wa_fab__')) return; var btn = document.createElement('a'); btn.id = '__wa_fab__'; btn.href = 'https://wa.me/1234567890?text=Hello'; btn.style.cssText = [ 'position:fixed','bottom:24px','right:20px', 'width:56px','height:56px','border-radius:50%', 'background:#25D366','color:#fff','font-size:26px', 'display:flex','align-items:center','justify-content:center', 'text-decoration:none','z-index:999999', 'box-shadow:0 4px 12px rgba(0,0,0,.35)' ].join(';'); btn.textContent = '💬'; document.body.appendChild(btn); })(); ``` ### 7. Example 5: Auto-Accept Cookies (JS) Automatically click 'Accept' on cookie consent dialogs: ``` // Auto-accept cookie banners (function() { var selectors = [ '.accept-cookies','#accept-btn','#cookie-accept', 'button[id*="accept"]','button[class*="accept"]', '[aria-label*="Accept"]' ]; selectors.forEach(function(sel) { var el = document.querySelector(sel); if (el) el.click(); }); })(); ``` ### 8. How It Works Internally - CSS is inserted as a