> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wifipadi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal Studio and terms

> Design the page guests see when they join your WiFi, add your own sections or HTML, and ask guests to agree to your terms before they connect.

The captive portal is the page a guest sees after joining your WiFi: your branding, your plans, and the sign-in. **Portal Studio** is where you design it.

Go to **Captive Portal** in the sidebar. You see the settings on the left and a **Live Preview** on the right, so you check how it looks before any guest does.

## Draft and publish

Nothing you change in Studio reaches guests until you publish.

| Button | What it does |
| - | - |
| **Save draft** | Keeps your changes in Studio. Guests still see the last published portal. |
| **Publish portal** | Makes the draft what guests see. |

The line under the buttons tells you where you stand: **Published portal is up to date**, or that you have unpublished changes.

## Pick a template

Under **Template & hero**, choose how the whole page looks. Your logo, colours and welcome text apply to every template.

| Template | Good for |
| - | - |
| **Classic** | A brand header on a soft grey page. |
| **Midnight** | A dark, glowing page for lounges and night venues. |
| **Sunrise** | A warm gradient for cafés and hotels. |
| **Minimal** | All white, quiet and editorial. |
| **Photo** | Your venue photo behind the card. |

## Add sections

Sections are blocks you add around the sign-in and plans. Add as many as you need and reorder them.

| Section | Use it for |
| - | - |
| **Announcement** | A promotion or venue update. |
| **Benefits** | A compact grid of selling points. |
| **Testimonial** | A customer quote. |
| **FAQ** | Common questions with clear answers. |
| **Text & button** | Your own copy with an optional link. |
| **Image banner** | A promotional or venue photograph. |
| **Contact** | Your support email, phone and WhatsApp. |
| **Custom HTML** | Your own design. See below. |

Each section has a **Placement**: **Before login & plans** puts it above the sign-in, and **After login & plans** puts it below. Put an offer before the plans and your contact details after them.

## Use your own HTML

Choose **Custom HTML** to paste your own HTML and CSS, or upload a single `.html` file.

* Keep the file **under 100 KB**. It loads on every guest visit.
* Put your CSS inside a `<style>` tag in the same file.
* Images can be `https://` links or embedded `data:` images. Linking is better than embedding, because embedded images use up the size limit.

> [!NOTE]
>
> Your HTML cannot run scripts or submit forms. That is deliberate: it keeps a template from imitating the sign-in page and capturing a guest's password or payment. It can restyle the page and display content, but not take input.

## Ask guests to agree to your terms

Go to **Settings → Terms & conditions**.

1. Write your terms in **Your terms**. You have up to 10,000 characters.
2. Turn on **Require guests to agree before connecting**.

With it on, every guest must agree before they get online. The toggle stays off until you have written something.

> [!WARNING]
>
> Changes apply to guests immediately, and **editing the text asks every guest to agree again.** Make small wording fixes sparingly.

Under the text you see the current version and how many guests agreed. Select **Download agreements (CSV)** for the record, newest first. Every version is kept, not only the current one.

Each row shows when they agreed, the terms version, the device address, whether the router confirmed that address, the customer's name, email and phone, the router and location, the IP address, and the browser. If a guest ever disputes the rules they accepted, this is your proof.

## Related

* Your logo, colours and welcome text also appear on your [workspace](/workspace.md) settings.
* Banner promotions that run in the portal are covered under [Portal ads](/portal-ads.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.