# 11. Edit Page
#### 📖 Overview
The **Edit Page** module in ShieldsGuard gives you full control over the visual and functional structure of your **challenge verification pages**, such as the **JavaScript Firewall Page** and the **Captcha Firewall Page**.
These pages appear to visitors when:
* DDoS or WAF challenges are triggered
* Captcha validation is required
* JavaScript execution is being verified before access is granted
With this module, you can **fully customize** the look and feel of these interaction points, ensuring a seamless user experience and maintaining brand consistency.
***
#### 🛠️ Editable Pages
You can customize two different firewall presentation pages:
1. **JavaScript Firewall Page**\
Used when verifying browser JavaScript capabilities during bot protection.
2. **Captcha Firewall Page**\
Used when FriendlyCaptcha or other CAPTCHA validation is required before access.
***
#### 💡 Key Features
* Live code editor with syntax highlighting
* HTML/CSS customization panel
* Support for dynamic ShieldsGuard variables
* Split between required and optional placeholders
* Lightweight, flexible templating for full branding control
***
#### 🔑 Variables You Should Use
Depending on the page type, you’ll see the required variables listed on the left:
**Common Mandatory Variables**
| Variable | Description |
| --------------------------- | ------------------------------------------------ |
| `{shieldsguard_javascript}` | Inserts JavaScript verification engine |
| `{shieldsguard_captcha}` | Loads CAPTCHA engine interface (on captcha page) |
| `{captcha_output}` | Displays captcha success/fail status |
| `{refresh_auth}` | Token refresher for authenticated challenge |
| `{request_id}` | Unique identifier for the request/session |
> 🔐 These variables are required for the firewall process to function correctly.
***
#### 🔧 Optional Variables
| Variable | Description |
| -------------- | -------------------------------- |
| `{ip_address}` | Displays visitor's IP address |
| `{page_url}` | Displays current page URL |
| `{user_agent}` | Displays the client’s User-Agent |
These are useful for debugging or including transparency in the UI shown to the user.
***
#### 🎨 Styling and Branding
You can customize:
* Typography (fonts, headings, paragraphs)
* Layout (padding, flex, container size)
* Colors, borders, shadows
* Logo, favicon, background image (via embedded CSS or inline HTML)
**Sample Customization Use Cases:**
* Match your corporate color scheme
* Add your logo and custom copy
* Change instructional messaging
***
#### 🧠 Best Practices
| Recommendation | Reason |
| --------------------------------------- | --------------------------------------------- |
| Always keep required variables intact | Ensure challenge logic functions properly |
| Test design on desktop and mobile | Ensure responsiveness across devices |
| Use minimal animations | Reduce script load time and browser impact |
| Avoid removing `` tags | They affect display scaling and bot detection |
| Host background images securely (HTTPS) | Prevent mixed content browser warnings |
***
#### 🧪 Example: JavaScript Firewall Page
```html
htmlKopyalaDüzenle
```
***
#### ⚠️ Important Notes
* Any missing required variable may cause the verification to fail.
* Edits apply **instantly**, but always preview on multiple devices.
* A misconfigured challenge page may lead to access denial or increased bounce rate.
***
> 🎯 The Edit Page module gives you complete creative control over one of the most critical user interaction points — your security verification flow. Use it to balance usability with strong perimeter protection.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.shieldsguard.com/11.-edit-page.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.