# How to Manage Widgets in Omnitron?

This tutorial provides step-by-step instructions for managing widget content for channels like banners and sliders, and how to effectively control and customize the content displayed on your web pages through widgets in Omnitron.

## <mark style="color:red;">Step 1: Navigate to Widget Management​</mark> <a href="#step-1-navigate-to-widget-management" id="step-1-navigate-to-widget-management"></a>

* Navigate to the Omnitron platform and log into your account.
* Follow the **Sales Channels** > **Content Management** sidebar and click the **Widget Management** page.<br>

  <figure><img src="https://3333414532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbwGN7KwvYi0iLbjtnXz%2Fuploads%2FZdRPJ4AdkKsgczPaFCue%2Fimage.png?alt=media&#x26;token=5a4356b6-b40f-42b4-913b-7a6c75cc25f9" alt=""><figcaption></figcaption></figure>

## <mark style="color:red;">Step 2: Filtering Widgets​</mark> <a href="#step-2-filtering-widgets" id="step-2-filtering-widgets"></a>

* On the Widget Management page, the filter panel and the list of existing widgets are displayed.
* You can filter the widgets based on their characteristics such as Widget Type, Widget Name, and Slug. The selected filters are displayed in the active filters row.

## <mark style="color:red;">Step 3: Creating a New Widget​</mark> <a href="#step-3-creating-a-new-widget" id="step-3-creating-a-new-widget"></a>

* To create a new widget, click the **+ New Widget** button located in the upper-right corner.<br>

  <figure><img src="https://3333414532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbwGN7KwvYi0iLbjtnXz%2Fuploads%2F68qi21QnwKcEzttML5od%2Fimage.png?alt=media&#x26;token=6c7c72f4-142e-470a-a1cf-6963746ccaea" alt=""><figcaption></figcaption></figure>
* Fill in the required fields, including:
  * **Widget Name:** Provide a name for the widget you intend to add. You can also specify the name of the page it will be displayed on for future reference.
  * **Widget Slug**: Enter a descriptive tag for the widget, ensuring you avoid using spaces, special characters, or capital letters. You can use a hyphen (-) for spaces.
  * **Widget Type:** Select one of the widget types from the drop-down menu that has been added in the Widget Schema Management screen.
  * **Template:** Input the file folder location where the widget's HTML code is stored. This information will be supplied by the project manager.
* Click **SAVE & CLOSE** after filling all necessary fields.<br>

  <figure><img src="https://3333414532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbwGN7KwvYi0iLbjtnXz%2Fuploads%2FIl0jbX6eS7E4O3L0KirZ%2Fimage.png?alt=media&#x26;token=8eca1564-b899-4d91-99eb-baef75212b01" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please note that each widget type comes with its own set of fields. Selecting a widget type will reveal the fields specifically defined for that widget, which can be found in the Widget Schema Management screen.
{% endhint %}

## <mark style="color:red;">Step 4: Updating Widgets​</mark> <a href="#step-4-updating-widgets" id="step-4-updating-widgets"></a>

* To make updates, click on the row of an existing widget in the list.
* You will be directed to the detail screen where you can make the necessary changes.<br>

  <figure><img src="https://3333414532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbwGN7KwvYi0iLbjtnXz%2Fuploads%2FxoMzpCIdRCIQ5y5hAyWF%2Fimage.png?alt=media&#x26;token=dc150c55-562b-4f55-9e0e-0fb516250213" alt=""><figcaption></figcaption></figure>
