---
title: Custom HTML/CSS
slug: custom-htmlcss
docTags: 
createdAt: 2024-11-13T02:42:59.660Z
---

## 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

::loom{url="https://www.loom.com/embed/43af48ed0bed4ed39e8934a1cb14eb84?sid=384195af-d5e9-40fb-bc8b-247de08c7217" aspectRatio="1.7777777777777777"}

## 🧱 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

1. Go to the **Pages** section in the admin panel.
2. Click **Add Page**.
3. 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).



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



### Example:

```html
<!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).



:::BlockQuote
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.



:::BlockQuote
✅ 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.