---
title: "Create a widget container"
slug: "create-a-widget-container"
updated: 2026-08-17T12:39:33Z
published: 2026-08-19T08:43:52Z
canonical: "docs.grassfish.com/create-a-widget-container"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grassfish.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a widget container

> [!NOTE]
> Note
> 
> A widget is an [HTML Wizard spot](/grassfish/docs/html-wizard-spots). The spot developer’s implementation determines which options and properties you can see and edit.

To add a widget to your HTML Composer spot, perform the following steps:

1. In the **Elements** pane, select ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/create-a-widget-container-image-16ag2xyn.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A27%3A25Z&se=2026-11-06T21%3A27%3A25Z&sr=c&sp=r&sig=m00hreBCkP3Mdes%2BdoM8Q0hF08BS92kYMzVtB1cdHE4%3D) **Widget**.
2. Use the mouse to draw a widget container on the canvas.
3. To edit the container's display name, click on ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/create-a-widget-container-image-tcv7sqey.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A27%3A25Z&se=2026-11-06T21%3A27%3A25Z&sr=c&sp=r&sig=m00hreBCkP3Mdes%2BdoM8Q0hF08BS92kYMzVtB1cdHE4%3D) **Edit**.
4. In the **Edit element** window, enter a name and click **Save**.
5. [Specify the container properties](/grassfish/docs/design-composer-spots).
6. Optionally, [create and configure pages](/grassfish/docs/design-composer-spots).
7. Use the following options to configure your widget:

| **Show details** | Click on the button to display widget details like ID or file size. |
| --- | --- |
| **Delete** | Click on the button to delete a medium. |
| **Replace widget** | Click on the button to replace a widget with another one. |
| **Alignment** | Align the medium in the container. |
| **Modify size** | Adjust the size of the medium in the container or crop it. |
| **Sound volume** | Specify the volume of the video. - Drag the slider or enter a number from 0 to 100. - This option is only available for videos. |
| **Loop video** | Select to play the video in a loop. - This sets the duration to 0.00. - This option is only available for videos. |
8. Specify all other settings that are relevant for your widget.
9. Click **Save** to save your changes.

![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/create-a-widget-container-image-2citpne7.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A27%3A25Z&se=2026-11-06T21%3A27%3A25Z&sr=c&sp=r&sig=m00hreBCkP3Mdes%2BdoM8Q0hF08BS92kYMzVtB1cdHE4%3D)