> For the complete documentation index, see [llms.txt](https://interfacing.gitbook.io/interfacing-help-files/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interfacing.gitbook.io/interfacing-help-files/administration-and-configuration/managing-and-customizing-the-home-page/editing-the-home-page/using-custom-widgets.md).

# Using Custom Widgets

Add and configure content widgets to display key information on the Home Page.

Custom widgets allow you to surface important content—such as announcements, helpful links, and visuals—in a format aligned with your organization’s structure and priorities. They help users stay informed, navigate efficiently, and engage with relevant resources.

**Available Widgets:**

* Banner
* Cards
* Tiles
* HTML Block
* Website

{% hint style="info" %}
As you configure widgets in the **Editor**, the layout updates in real time to reflect your changes.
{% endhint %}

***

## Banner

The **Banner** widget displays a rotating carousel of images, each linking to internal or external pages. Use it to promote announcements, campaigns, or time-sensitive information with visual impact.

### <i class="fa-gear">:gear:</i>  Main Settings

* **Number of Sliders**: Choose between **1 and 5** slides (default: 1).

For each slide added, a corresponding expandable section appears in the panel.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-rectangle-vertical-history">:rectangle-vertical-history:</i>  Slide Settings

* **Image** (required): Upload an image to display in the slide.
  * **Upload Options**:
    * Click **Upload** to select a file from your device, or
    * Drag and drop a file into the upload area.
  * Supported formats: `.svg`, `.png`, `.jpg`, `.gif`
  * Max file size: **3 MB**
* **URL** (required): Enter the destination link.
  * Clicking the slide opens the link in the selected target location.

***

## Cards

The **Cards** widget organizes content into visually distinct blocks containing images, text, and action buttons. It is ideal for grouping related resources or updates in a compact, readable layout.

### <i class="fa-gear">:gear:</i>  Main Settings

* **Number of Cards**: Choose between **1 and 4** cards (default: 4).
* **Main Title** (optional): Enter a heading for the widget.

For each card added, a corresponding expandable section appears in the panel.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-cards-blank">:cards-blank:</i>  Card Settings

* **Image** (optional)**:** Upload an image to display in the card (same format and size limits as **Banner** widget).
* **Title** (required): Enter a title for the card.
* **Description** (optional): Add supporting text.
* **Open Link In:** Select where the link should open—**New Tab** (default) or **Current Tab**.
* **URL** (required): Enter the destination link.
* **Button Label** (optional): Enter text for the action button.
  * Clicking the button opens the link in the selected target location.

***

## Tiles

The **Tiles** widget displays bold, color-coded blocks with minimal text for quick navigation. It draws attention to key actions, destinations, or resources.

### <i class="fa-gear">:gear:</i>  Main Settings

* **Number of Tiles**: Choose between **1 and 5** tiles (default: 5).
* **Main Title** (optional): Enter a heading for the widget.

For each tile added, a corresponding expandable section appears in the panel.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-square">:square:</i>  Tile Settings

* **Title** (required): Enter a title for the tile.
* **Description** (optional): Add supporting text.
* **Tile Color**: Select from the color palette or enter a hex code
* **Open Link In:** Select where the link should open—**New Tab** (default) or **Current Tab**.
* **URL** (required): Enter the destination link.
  * Clicking a tile opens the link in the selected target location.

***

## HTML Block

The **HTML Block** widget embeds custom HTML content directly into the page layout. Use it for styled text, media, or other branded content that aligns with your organization’s design.

### <i class="fa-gear">:gear:</i>  Settings

* **Main Title** (optional): Enter a heading for the widget.
* **Insert HTML** (required): Type or paste HTML code.

{% hint style="info" %}
The content renders live in the layout preview. Each block occupies 50% width, allowing side-by-side placement with other widgets.
{% endhint %}

{% hint style="warning" %}

#### Feature Availability

**Supported:**

* External images and video files
* Inline CSS and custom CSS with`<style>` tags

**Unsupported:**

* JavaScript or `<script>` tags
* External CSS or fonts
  {% endhint %}

***

## Website

The **Website** widget embeds a complete external web page using a locally uploaded HTML file. It is best for displaying standalone content, tools, or microsites within your layout.

### <i class="fa-gear">:gear:</i>  Settings

* **Upload HTML File** (required): Click **Upload** to import an HTML file from your device.

{% hint style="info" %}
The embedded website renders live in the layout canvas.
{% endhint %}

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://interfacing.gitbook.io/interfacing-help-files/administration-and-configuration/managing-and-customizing-the-home-page/editing-the-home-page/using-custom-widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.