Portal Framework — User Guide

Welcome to the Portal Framework! This guide walks you through everything you need to know to create, customise, and manage your branded digital portal — no coding required.

What is Portal Framework?

Portal Framework is a visual layout builder that lets you create mobile-first digital experiences for your brand. Think of it as a website builder specifically designed for product engagement — connecting your physical products to digital content, loyalty programmes, authentication, and more.

Each portal is tied to a collection (your brand or product line) and can include multiple apps (mini-tools like warranty registration, competitions, product info, etc.) arranged however you like.

Getting Started

1. Pick a Starting Template

When you first open the builder, you'll see the Welcome Page with several pre-built templates:

Click a template card to see a live preview on the right, then click Get Started to begin customising.

Tip: Don't worry about choosing the "perfect" template — everything is fully customisable after you start. You can also switch templates later from Settings → Advanced.

2. Quick Walkthrough

After selecting a template, a short guided walkthrough helps you set the basics:

• Portal title and logo
• Side menu items
• Bottom tabs arrangement

You can skip any step and come back to it later.

3. The Builder Interface

Once you're in the full builder, you'll see:

• Left sidebar — Five sections: Appearance, Navigation, Actions & Tools, Content, Settings
• Centre panel — Configuration options for the selected section
• Right panel — Live phone preview showing your changes in real time

Sections Overview

🎨 Appearance

Control how your portal looks.

Header

• Enable/disable the top header bar
• Set a title (defaults to your collection name)
• Toggle the logo — use your collection's default or upload a custom one
• Configure the back button (auto, always visible, or hidden)
• Show or hide action buttons in the header

Colours

• Set your brand colour palette — primary, secondary, accent, background, foreground, muted, and border colours
• Configure colours independently for light mode and dark mode
• Choose a colour mode strategy:
  • Auto — inherits from the parent app
  • Always Light or Always Dark — forces a specific mode
  • User Choice — adds a toggle so visitors can switch

Typography

• Pick custom heading and body fonts from a curated library
• Fonts are loaded automatically — no manual setup needed

Loading

• Customise the loading screen appearance
• Upload a custom loading logo
• Set a loading background colour

Background

• Add a background image to the portal
• Adjust opacity and choose a size mode (cover, contain, etc.)

🧭 Navigation

Set up how users move around your portal. There are five navigation zones:

Side Menu

• Enable/disable the slide-out menu
• Set the position (left or right) and style (overlay or push)
• Add a menu header with title and optional logo
• Add, remove, and reorder items — each item can link to an app, a custom URL, or be a visual divider
• Toggle icons on or off

Top Tabs

• Horizontal tabs below the header
• Choose a style: underline, pills, or buttons
• Add tabs linked to specific apps

Bottom Tabs

• Mobile-style tab bar at the bottom of the screen
• Toggle labels on or off
• Add up to 5 tabs (varies by template)

Quick Actions

• A three-dot menu (⋮) in the header
• Add apps, links, or built-in actions (like QR scanner)
• Great for less-frequently-used features

Floating Action Button (FAB)

• A circular button that floats above the content
• Expands into a speed dial with multiple actions
• Configure its position (bottom-left, right, or centre)
• Choose solid colour or gradient style
• Customise the icon and individual action items
• Optionally hide on desktop or collapse items into the header menu

⚡ Actions & Tools

Enable built-in tools and integrations:

Account Management

• Toggle user login/logout functionality
• Choose how accounts appear:
  • Header style: avatar, login button, or hidden
  • Side menu: show avatar, name, email, logout button
  • Name format: display name, first name, full name, or email
• Customise the login button text
• Show a login prompt in the side menu for logged-out users

QR Code Scanner

• Camera-based scanner for navigating to products and proofs
• Appears as an icon in the header

Language Selector

• Globe icon for switching languages
• Available languages come from your collection's locale settings

AI Assistant

• AI-powered chat assistant for your portal visitors
• Configure a persona: name, avatar, and welcome message
• Write custom instructions to control the AI's behaviour and tone
• Choose a position: bottom sheet or side panel
• Enable voice input and text-to-speech
• Select a voice for spoken responses
• Works with your collection's existing content automatically

NFC Scanner

• Near Field Communication tag reader
• For use with NFC-enabled physical products

🏠 Content

Configure what visitors see when they first arrive.

Collection Homepage

Choose what loads as the landing page:

You can also set different homepages based on login state — e.g., show a welcome app to logged-out visitors and "My Items" to logged-in users.

Product Catalogue

Customise how the product listing looks:

• View modes: grid, list, or compact — and which modes visitors can switch between
• Card size: small, medium, or large
• Search bar: enable/disable, and set a minimum product count before search appears
• Sorting: by name or date, ascending or descending
• Title: show/hide and override the default heading

⚙️ Settings

Portal-level configuration options:

PWA / Install

Make your portal installable as a native-feeling app:

• Set an app name and short name (for the home screen)
• Add a description
• Choose display mode (standalone, fullscreen, minimal UI)
• Set orientation (any, portrait, landscape)
• Upload app icons and a splash logo
• Optionally override the start URL

Sharing & Social

Control how links look when shared on social media:

• Set OG title, description, and image (1200×630px recommended)
• Preview how your link will appear
• Configure Twitter card type and handle
• Customise the share text template with variables like {{url}}, {{title}}, {{collection}}

Onboarding

Create a guided first-time experience for new visitors:

• Enable/disable the onboarding flow
• Add steps with title, description, and optional image
• Choose a style: slides, cards, or checklist
• Show progress indicators and skip button
• Re-show to returning visitors if needed

Analytics

Integrate tracking and analytics:

• Google Analytics — paste your GA4 measurement ID
• Facebook Pixel — paste your Pixel ID
• Additional tracking can be configured via the SmartLinks platform

Advanced

• Switch template — apply a completely different starting template (⚠️ this resets your customisations)
• Export/import configuration as JSON (coming soon)

Saving and Publishing

Save

Click the Save button in the top-right toolbar to store your configuration. This saves to the SmartLinks platform and is immediately available to your portal visitors.

Reset

Click Reset to discard all customisations and start fresh with a new template. You'll be taken back to the welcome page to pick a new starting layout.

⚠️ Reset is permanent — a confirmation dialog will appear before any changes are discarded.

Preview

Click Open in the toolbar to view your live portal in a new browser tab.

Toggle Preview

Click the eye icon to show or hide the phone preview panel while you work.

Tips & Best Practices

1. Start simple — enable only what you need. You can always add features later.
2. Mobile first — most of your visitors will be on phones. Use the phone preview to check everything fits.
3. Consistent branding — set your brand colours once in Appearance → Colours, and they'll apply everywhere.
4. Less is more for tabs — 3–5 bottom tabs is ideal. Too many creates confusion.
5. Use the side menu for secondary navigation — pages people visit occasionally.
6. Quick actions are perfect for utility features like QR scanning or language switching.
7. Test with real content — the preview shows a mockup. Use the "Open" button to see your portal with real data.

FAQ

Q: Can I change the template after I've started customising? A: Yes! Go to Settings → Advanced and pick a new template. Be aware this will replace your current layout configuration.

Q: What happens if I don't set custom colours? A: The portal uses sensible defaults that work well in both light and dark modes. Your collection's brand colour (if set in SmartLinks) will be used as the primary colour.

Q: How do I add a new app to my portal? A: Apps are added to your collection via the SmartLinks platform. Once added there, they'll appear as options when adding items to menus, tabs, or the homepage.

Q: Can visitors install my portal as an app on their phone? A: Yes! Enable the PWA settings under Settings → PWA / Install. Visitors will be prompted to "Add to Home Screen" on supported devices.

Q: How do I set up the AI assistant? A: Go to Actions & Tools → AI Assistant, enable it, and configure a persona name and welcome message. The AI automatically has access to your collection's content — no extra setup needed.

Q: What's the difference between the side menu and bottom tabs? A: Bottom tabs are always visible and best for primary navigation (2–5 items). The side menu slides out on demand and is better for secondary pages, settings, and links.

Q: Can I have different layouts for different products? A: The portal layout applies at the collection level. Individual products show their own apps and content within the portal's navigation structure.

Need Help?

If you have questions or run into issues, reach out to your SmartLinks account manager or visit the SmartLinks support portal.