# Custom Widgets

## Creating a Custom Widget

In order to create a **Custom Widget** follow the next steps :

* Click on the **Add** button and select **Widgets** in the opened list
* Set the **Name** of your widget on the right properties panel
* Add a **Tag** to group your custom widgets
* Add any **Parameters** you need
* Write your code in the central editor
* Save by clicking on the top right button **Save**

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F9FE9MqqE8gluc3iIlebv%2FCleanShot%202023-08-04%20at%2016.19.22.gif?alt=media&#x26;token=ad21edd4-a81f-4589-87d8-0f5f2db68fd7" alt=""><figcaption><p>Creation of a <strong>Custom Widget</strong></p></figcaption></figure>

## Use a Custom Widget

In order to use a **Custom Widget** :&#x20;

* Select the last tab in the **Toolbox** section
* Drag and drop your **Widget** where you want in the **Explorer**

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FXsZE39rPRwBBatNP7lMJ%2FCleanShot%202023-08-04%20at%2016.20.40.gif?alt=media&#x26;token=f7bc06fc-162b-441c-808a-80594b5ffb1b" alt=""><figcaption><p>Example of use of a <strong>Custom Widget</strong></p></figcaption></figure>

{% hint style="info" %}
Custom Widget cannot be previewed but an insert with a different background color shows you the size and location of your widget
{% endhint %}

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FC2eDUIvys7r1heZMHE5w%2FCleanShot%202023-08-04%20at%2016.28.26.png?alt=media&#x26;token=f70f1385-4b1a-445c-87b8-170cd93d0b26" alt="" width="241"><figcaption><p>Example of Application Preview in Goril.App</p></figcaption></figure>

{% hint style="info" %}
When you'll run your app in a real device or a simulator, you'll be able to see your widget in action !
{% endhint %}

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FPA0BKrAH0lnml9t6uyf7%2FCleanShot%202023-08-04%20at%2016.35.41.gif?alt=media&#x26;token=7b6ac40c-0862-4099-b379-91df6ce90a70" alt="" width="189"><figcaption><p>Custom Widget on simulator</p></figcaption></figure>
