Knowledge Base
Configuring Header Buttons in GPTWeb
great question! Header buttons in GPTWeb are fully configurable through the Admin Panel, allowing you to customize Login, Contact, Demo, and Trial buttons to match your visitor engagement strategy.
Accessing Header Button Settings
- Open the Admin Panel (press Cmd+Ctrl+A on Mac or Ctrl+Alt+A on Windows/Linux)
- Navigate to Branding → Customize
- Select Headers & Forms from the left sidebar navigation
Available Header Buttons
| Button Type | Configurable Options | Common Use Case |
|---|---|---|
| Login | Visible, style, icon, text, URL | Member/customer portal access |
| Contact | Visible, style, icon, text, URL | Sales inquiries, support |
| Demo | Visible, style, icon, text, URL | Schedule product demonstrations |
| Trial | Visible, style, icon, text, URL | Free trial signup |
Configuration Options for Each Button
| Setting | Description | Example Values |
|---|---|---|
| Visible | Show or hide the button | Yes / No toggle |
| Style | Button appearance style | Primary, Secondary, Outline, Ghost |
| Icon | Font Awesome icon class | fa-user, fa-calendar, fa-envelope |
| Text | Button label text | "Book Demo", "Start Free Trial" |
| URL | Destination link or action | https://calendly.com/yourlink or gptweb://modal/demo |
Pro Tip: Action Links for Advanced Behavior
instead of linking to external URLs, you can use GPTWeb action links to trigger modals, forms, or other in-app behaviors directly from header buttons:
gptweb://modal/demo → Opens demo scheduling modal
gptweb://modal/contact → Opens contact form modal
gptweb://modal/trial → Opens trial signup modal
gptweb://modal/contact → Opens contact form modal
gptweb://modal/trial → Opens trial signup modal
Additional Customization Options
Beyond header buttons, you can also customize these header elements in the same section:
| Element | Location | What You Can Change |
|---|---|---|
| Header Background | Branding → Customize → Quick Setup | Color via 6-color theme system |
| Logo | Branding → Customize → Logos & Identity | Light mode logo, dark mode logo, size |
| App Title | Branding → Customize → Logos & Identity | Text displayed next to logo |
| Theme Toggle | Headers & Forms | Show/hide dark mode toggle |
| Transparent Header | Custom CSS (advanced) | Remove background and borders |
If you need to completely hide the header or make it transparent, that requires Custom CSS in Branding → Customize → Custom CSS. But for button configuration, the built-in settings handle everything you need.
GPTWeb is the future of engagement - websites and marketing automation combined, built for the AI era, built for now.