Custom HTML/CSS

14 min

Overview

You can embed fully custom HTML pages directly into the portal, allowing you to build interactive tools, dashboards, content layouts, or any other web-based experiences—all without needing to host the page externally.

This is ideal for teams that want complete control over design and functionality using raw HTML, CSS, and JavaScript.

👨🏻‍🏫 Walk Through

🧱 When to Use Custom HTML Pages

Use this option when you want to:

Display custom-designed layouts or interfaces
Embed forms, widgets, or external JavaScript components
Build highly tailored content experiences directly in the portal
Replicate intranet-style pages or landing pages

🛠️ How to Create a Custom HTML Page

Step 1: Add a New Page

Go to the Pages section in the admin panel.
Click Add Page.
From the Page Type dropdown, select Custom HTML.

Step 2: Write or Paste Your HTML

You can type directly into the editor, or
Paste in HTML code from an external source (e.g., from a developer, or a tool like ChatGPT).

💡 You can write raw HTML, inline CSS, and even JavaScript.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <style>
      body { font-family: Arial; padding: 20px; }
      h1 { color: #2c3e50; }
    </style>
  </head>
  <body>
    <h1>Welcome to our Custom Page!</h1>
    <p>This is a fully embedded HTML view.</p>
    <button onclick="alert('Button clicked!')">Click Me</button>
  </body>
</html>

Step 3: Preview the Page

Click the Preview button to verify the layout and behavior of your HTML content.
Make any adjustments as needed.

Step 4: Name & Save the Page

Give your page a descriptive name (e.g., Sales Tools, Internal Form, ExampleHTML).
Click Save.

👥 Assigning the Page

Once created, assign the page to either:

An individual user, or
A user group (e.g., Sales, HR, Admins).

Navigate to Assign Workspaces > select a group or user > choose your new HTML page > click Save.

🧪 What the User Sees

The custom HTML page appears as a regular navigation item in the portal.
Clicking the link loads your custom-built interface directly inside the portal.
All standard web behavior (clicks, forms, buttons, links, etc.) will function as expected.

✅ Great for making interactive pages, dashboards, calculators, or help centers.

✅ Recap

Setting	Description
Page Type	Custom HTML
Code Support	HTML, CSS, JavaScript
Preview Before Save	✅ Yes
Assignment Options	Individual users or groups
Typical Uses	Forms, guides, tools, portals, landing pages

⚠️ Notes & Tips

Be careful when using external scripts or stylesheets.
For advanced logic or authentication, consult your dev team to ensure code security.
Avoid long-loading scripts to maintain good portal performance.