Web Pages - Creating and managing web pages

Modified on Thu, 4 Dec at 11:34 AM

Web Pages - Creating and managing web pages

Web Pages in Hubhus allow you to create public HTML pages that can be accessed via URL. These pages are commonly used to host embedded forms, display information, create landing pages, or provide customer-facing content.

On this page

Jump to any section using the links below

What are web pages

Table of Contents

What are web pages
Common use cases
Accessing web pages
Creating a new web page
Basic page configuration
Page Host
Parent HTML layout
HTML content
Using Hubhus placeholders
Embedding campaign forms
Including external resources
Editing existing web pages
Managing web pages
Testing web pages
Best practices
Common page templates
Troubleshooting
Summary

Web Pages are public HTML pages hosted within Hubhus that:

Have their own unique URL
Can be accessed by anyone with the link
Support full HTML, CSS, and JavaScript
Can embed campaign forms or other content
Use Hubhus placeholders for dynamic content
Can be hosted on custom domains or leadvalidator.dk

Common use cases

Form hosting:

Customer registration pages
Contact forms
Event registration
Newsletter signups
Quote requests

Information pages:

Product information
Service descriptions
Event details
Terms and conditions
Privacy policies

Landing pages:

Campaign-specific landing pages
Promotional pages
Special offers
Seasonal campaigns

Customer portals:

Login pages
Dashboard pages
Status pages
Account management

Accessing web pages

Go to Account → Web Resources → Web Pages

This shows all existing web pages with:

URL: The public link to the page (two formats shown)
Name: Page identifier
Slug: URL path component
Embed: Embed code icon
Layout: Parent layout (if used)
Content: Link to edit page content
Access: Public/Private status
Edit/Delete: Management buttons

Creating a new web page

Click + New Web Page to create a page.

Basic page configuration

Name: Give your page a descriptive internal name (e.g., "Customer Registration", "Product Info", "Contact Form")

This name is for your reference and doesn't appear in the URL.

Subpath: Enter the URL path for your page (e.g., "registration", "contact", "products")

This becomes part of the public URL:

With custom domain: https://yourcompany.com/subpath
With leadvalidator.dk: https://leadvalidator.dk/wp/account/subpath

Subpath rules:

Use lowercase letters
Use hyphens for spaces (e.g., "partner-application")
Avoid special characters
Keep it short and descriptive
Make it SEO-friendly

Page Host

Select where the page should be hosted:

Custom domain (if configured):

Uses your own domain name
Example: hubhus.dk/dialog
More professional and branded
Better for customer trust

Leadvalidator.dk (default):

Uses Hubhus default domain
Example: leadvalidator.dk/wp/hubhus
No additional configuration needed
Works immediately

To configure custom domains, see the URL Hosts section of Web Resources.

Parent HTML layout

Choose a layout template for your page:

No parent layout:

Start with a blank page
Full control over HTML structure
You provide complete HTML document
Best for custom designs

Select existing layout:

Use a predefined template
Header and footer included automatically
Your content inserted in designated area
Consistent design across multiple pages

Layouts are created in Web Resources → Page Layouts.

HTML content

The HTML section is where you build your page content.

With "No parent layout":

You must provide a complete HTML document:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>%brand_name%</title>
    
    <!-- External CSS/JS libraries -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" defer></script>
    
    <style>
        /* Your custom CSS */
    </style>
</head>
<body>
    <div class="container">
        <!-- Your page content here -->
        <h1>Welcome to %brand_name%</h1>
    </div>
    
    <script>
        // Your custom JavaScript
    </script>
</body>
</html>

With parent layout:

You only provide the content that goes into the layout's content area:

html

<div class="page-content">
    <h1>Welcome</h1>
    <p>This content will be inserted into the parent layout.</p>
</div>

Using Hubhus placeholders

Web pages support Hubhus placeholders for dynamic content:

Brand placeholders:

html

%brand_name%           <!-- Company name -->
%brand_color%          <!-- Brand color -->
%brand_logo_url%       <!-- Logo URL -->
%brand_website%        <!-- Website URL -->

Conditional placeholders:

html

@if(*%brand_logo_url%){
    <img src="%brand_logo_url%" height="50px">
}@endif

Embedding campaign forms

To embed a campaign form in your web page:

Create a campaign form in Campaign settings → Campaign forms
Copy the embed code from the form
Paste the embed code in your web page HTML

Example:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>Registration - %brand_name%</title>
</head>
<body>
    <div class="container">
        <h1>Register Here</h1>
        
        <!-- Campaign form embed code -->
        <iframe id='hh_iframe_847X9' frameborder='0' 
                style='border:0;width:100%;height:100%' 
                allowtransparency='true' scrolling='no'></iframe>
        <script>
        document.getElementById('hh_iframe_847X9').src = 
        'https://leadvalidator.dk/form/2322/cf_0t3I80EeYsLo67USOMvNi7/embedded-iframe-url?page_url=' + 
        encodeURIComponent(window.location.href);
        </script>
    </div>
</body>
</html>

Including external resources

You can include external CSS and JavaScript libraries:

CSS frameworks:

html

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

JavaScript libraries:

html

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Using Hubhus CSS Stylesheets:

Reference stylesheets created in Web Resources → CSS Stylesheets:

html

<link rel="stylesheet" href="/external/css/your-stylesheet-slug">

Using Hubhus JavaScript:

Reference JavaScript created in Web Resources → JavaScript:

html

<script src="/external/js/your-javascript-slug"></script>
```

---

## **Page access control**

**Public pages:**
- Accessible by anyone with the URL
- No authentication required
- Indexed by search engines (unless blocked)

**Private pages:**
- Require authentication
- Only accessible by logged-in users
- Useful for customer portals

Configure access in the **Access** column of the web pages list.

---

## **Getting the public URL**

After saving your web page, find the URL in the **URL** column of the web pages list.

**Two formats shown:**

**Format 1 (with custom domain):**
```
https://hubhus.dk/dialog/wp=registration
```

**Format 2 (default domain):**
```
https://leadvalidator.dk/wp/hubhus/registration

Click the URL to open the page in a new tab and verify it works correctly.

Editing existing web pages

To edit a web page:

Go to Account → Web Resources → Web Pages
Find the page in the list
Click the Content button (blue button with code icon)
This opens the edit dialog
Modify Name, Subpath, Page Host, Parent HTML layout, or HTML
Click Save (or the page icon button)

Managing web pages

View content: Click the Content button to edit the page HTML and settings.

Edit layout: Click the Layout button to change parent layout.

View embed code: Click the Embed icon to get iframe embed code for the page (if you want to embed the page elsewhere).

Check access: The Access column shows if the page is Public or Private.

Delete page: Click the red delete button to remove the page permanently.

Testing web pages

Before sharing your web page URL:

Desktop testing:

Open URL in multiple browsers (Chrome, Firefox, Safari, Edge)
Verify all content displays correctly
Test any forms or interactive elements
Check placeholder values populate correctly

Mobile testing:

Open URL on phone or tablet
Verify responsive design works
Test form submission on mobile
Check touch targets are large enough

Private/incognito testing:

Open URL in incognito/private browser window
Ensures page is accessible without cached data
Confirms public access works correctly

Load time:

Check page loads quickly
Optimize large images
Minimize external resource calls

Best practices

URL structure:

Use descriptive, SEO-friendly subpaths
Keep URLs short and memorable
Use hyphens for multi-word paths
Avoid changing URLs after sharing

HTML structure:

Use semantic HTML5 elements
Include proper meta tags
Ensure mobile responsiveness
Validate HTML for errors

Performance:

Minimize inline CSS and JavaScript
Use external stylesheets and scripts
Optimize images before uploading
Lazy load images when possible

Security:

Don't expose sensitive information
Validate any form inputs
Use HTTPS (handled automatically)
Be cautious with user-generated content

Accessibility:

Use proper heading hierarchy
Include alt text for images
Ensure sufficient color contrast
Make forms keyboard-accessible

Maintenance:

Document what each page is for
Use consistent naming conventions
Regularly test critical pages
Archive or delete unused pages

Common page templates

Simple contact form page:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contact - %brand_name%</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body { padding: 50px 0; }
        .logo { text-align: center; margin-bottom: 30px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            @if(*%brand_logo_url%){
                <img src="%brand_logo_url%" height="60px">
            }@endif
        </div>
        
        <div class="text-center">
            <h1>Contact %brand_name%</h1>
            <p>Fill out the form below and we'll get back to you soon.</p>
        </div>
        
        <!-- Insert campaign form embed code here -->
        
    </div>
</body>
</html>

Landing page with call-to-action:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Special Offer - %brand_name%</title>
    <style>
        .hero {
            background-color: %brand_color%;
            color: white;
            padding: 80px 20px;
            text-align: center;
        }
        .cta-button {
            background: white;
            color: %brand_color%;
            padding: 15px 40px;
            font-size: 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="hero">
        <h1>Special Summer Offer!</h1>
        <p>Get 20% off all services this month</p>
        <button class="cta-button" onclick="document.getElementById('form').scrollIntoView()">
            Sign Up Now
        </button>
    </div>
    
    <div id="form" style="padding: 50px 20px;">
        <!-- Insert campaign form embed code here -->
    </div>
</body>
</html>

Troubleshooting

Page not accessible:

Verify page is saved
Check URL is correct
Test in incognito/private window
Verify Page Host configuration

Placeholders not working:

Check placeholder syntax is correct
Verify placeholder exists in account settings
Check for typos in placeholder names
Ensure conditional syntax is correct

Layout not applying:

Verify parent layout is selected
Check layout exists in Page Layouts
Ensure HTML content doesn't conflict with layout

Forms not displaying:

Verify embed code is pasted correctly
Check iframe ID is unique
Look for JavaScript errors in browser console
Ensure external resources load correctly

Styling issues:

Check CSS syntax for errors
Verify external CSS files load
Look for conflicting styles
Use browser developer tools to debug

Summary

Web Pages in Hubhus allow you to create public HTML pages accessible via unique URLs for hosting forms, displaying information, and creating landing pages. Create pages in Account → Web Resources → Web Pages by configuring name, subpath (URL path), Page Host (custom domain or leadvalidator.dk), and Parent HTML layout. Build page content using full HTML, CSS, and JavaScript with support for Hubhus placeholders (%brand_name%, %brand_logo_url%, etc.) and conditional logic. Embed campaign forms by copying embed code from Campaign settings and pasting into web page HTML. Pages can be public (accessible to anyone) or private (requires authentication). Use descriptive subpaths for SEO-friendly URLs, test on multiple devices and browsers, follow HTML best practices for performance and accessibility, and regularly maintain pages by removing unused content. Web pages provide flexible, quick-to-deploy public-facing pages without requiring external website infrastructure.

CSS Stylesheets - Managing stylesheets
JavaScript - Managing JavaScript files
Page Layouts - Creating page layouts