Portal Designer

The Portal Designer is a drag-and-drop visual editor for building captive portal pages — splash screens, login forms, success pages, and more. Templates created here are assigned to Journeys to control exactly what your guests see when they connect to your WiFi network.

'alt' => 'Dashboard overview', 'caption' => 'The default Kiwire dashboard layout', 'screenshot' => true, 'class' => '', ]) Drop images into: public/assets/img/docs/{page}/{filename} --}}

Image not uploaded yet public/assets/img/docs/portal-designer/overview.png

Template Grid

The main Portal Designer page displays all your templates in a thumbnail grid. Each card shows:

• Thumbnail — an auto-generated screenshot of the template, captured on publish
• Template name — the display name you assigned
• Status badge — Draft (grey) or Published (green)
• Last modified — when the template was last saved
• Action buttons — Edit, Preview, Clone, Publish/Unpublish, Delete

Visual Editor

Click Edit on any template card (or Create Template for a new one) to open the full-screen visual editor.

'alt' => 'Dashboard overview', 'caption' => 'The default Kiwire dashboard layout', 'screenshot' => true, 'class' => '', ]) Drop images into: public/assets/img/docs/{page}/{filename} --}}

Image not uploaded yet public/assets/img/docs/portal-designer/editor.png

Canvas

The canvas represents the live portal page. Click any element on the canvas to select it. A blue selection border and resize handles appear around the selected element. You can:

• Drag to reposition an element freely on the canvas
• Resize using the corner and edge handles
• Double-click text elements to edit their content inline
• Right-click to bring up the context menu (duplicate, delete, bring forward, send backward)

Element Toolbar

The toolbar on the left lists all available elements. Click an element to add it to the canvas, or drag it directly onto the canvas to place it at a specific position.

Element	Description
Text	Heading, paragraph, or label. Supports rich formatting (bold, italic, colour, font size, alignment).
Image	Upload or select from Portal Media. Supports PNG, JPG, GIF, SVG.
Button	Clickable button with configurable label, colour, border radius, and link URL.
Login Form	The guest authentication form. Renders the fields appropriate for the journey's login methods.
Divider	Horizontal rule for visual separation. Configurable colour, thickness, and margin.
HTML Block	Free-form HTML — embed custom widgets, analytics snippets, or structured content.
Video Embed	Embed a YouTube or Vimeo video by URL. Supports autoplay and loop options.
Social Icons	Pre-built icon row for social media links. Configure which icons appear and their target URLs.

Property Panel

When an element is selected, the Property Panel appears on the right side of the editor. Properties vary by element type, but common options include:

Property	Applies to
Font family, size, weight, colour	Text, Button
Background colour / gradient	Text, Button, HTML Block
Padding (top, right, bottom, left)	All elements
Border radius	Image, Button, HTML Block
Link URL / target	Button, Image, Social Icons
Alt text	Image
Alignment (left / centre / right)	Text, Image, Social Icons
Opacity	All elements
Z-index (layer order)	All elements

Template Variables

System variables can be inserted anywhere in text or HTML elements. They are replaced with real data at the moment a guest views the portal.

Variable	Replaced with
{{username}}	The guest's login username
{{fullname}}	The guest's full name (if available)
{{email}}	The guest's email address
{{expiry}}	The account expiry date and time
{{session_time}}	Remaining session time in the current profile
{{tenant_name}}	The tenant's display name
{{zone_name}}	The name of the zone the guest connected through
{{current_date}}	Today's date in the tenant's configured timezone

Publishing Workflow

Templates follow a Draft → Published lifecycle:

• Draft — The template is being worked on. It is not visible in Journey configuration. Guests are never served a draft template.
• Published — The template is finalised. It can be selected in any Journey. A thumbnail screenshot is auto-generated on publish and shown in the template grid.

To publish, click the Publish button in the editor toolbar or from the template card's action menu. To revert to Draft (e.g., to make major changes), click Unpublish. Any Journeys currently using that template will retain the last published version until you publish again.

Template Actions

Action	Description
Create	Start a new blank template or choose a starter layout from the library.
Edit	Open the template in the visual editor.
Preview	View the template in a device frame without leaving the designer. See the Preview Mode section below.
Clone	Duplicate the template under a new name. The clone starts as a Draft, even if the source was Published.
Publish / Unpublish	Toggle the template's status between Draft and Published.
Delete	Permanently remove the template. You will be prompted to confirm. Templates assigned to active Journeys cannot be deleted.

Preview Mode

Preview mode renders the portal template in a realistic device frame so you can see exactly how guests will experience it. A device-size toggle at the top lets you switch between:

• Desktop — full-width browser viewport
• Tablet — ~768 px wide frame
• Mobile — ~375 px wide frame, portrait orientation

Template variables are shown in their placeholder form (e.g., [username]) in preview mode. Use Simulation to see them resolved with real test data.

'alt' => 'Dashboard overview', 'caption' => 'The default Kiwire dashboard layout', 'screenshot' => true, 'class' => '', ]) Drop images into: public/assets/img/docs/{page}/{filename} --}}

Image not uploaded yet public/assets/img/docs/portal-designer/preview.png

Media Storage

Images uploaded within the editor are stored at:

These files are shared with the Portal Media module — any image uploaded in the designer is visible in Portal Media and vice versa. Deleting a file from Portal Media while it is referenced in a template will break its display on the live portal.

Required Permissions

view-portal-templates · create-portal-templates · edit-portal-templates · delete-portal-templates · publish-portal-templates