# Widget constructor

<figure><img src="https://2006818895-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs6lvLYwRxi3rp3oViG1Z%2Fuploads%2Fj2khbcyh9PrdP0AMuEvh%2Ftonation.me_app_widgets%20(15).png?alt=media&#x26;token=c241ae34-c6f7-48e2-b259-68e139f3923a" alt=""><figcaption></figcaption></figure>

This page allows you to create, edit and customize widgets to display donations on your stream. Everything is made as simple and convenient as possible.

***

#### Sections of the page:

1. **Widget settings**

* **Background Color:** \
  Select the background color for your widget. Click on the colored square to open the palette and select the desired shade.
* **Embed Link:** \
  A unique link that you can use to integrate your widget into streaming software (such as OBS). To copy the link, click on it.

2. **Widget List**

* **Name:** \
  The name of the widget that you specify when you create it.
* **Min amount, USD:** \
  The minimum amount of donation with which the widget will be displayed.
* **Status:** \
  A slider to enable or disable the widget.
* **Updated:** \
  Shows the date and time when the widget was last updated.
* **Created:** \
  Displays the date and time the widget was created.
* **Actions:**
  * **Edit (pencil icon):** Allows you to change the widget's settings.
  * **Delete (trash can icon):** deletes the widget. Attention: you cannot restore a deleted widget!
  * **Preview (eye icon):** shows how the widget looks on the embed page.

3. **Managing the list of widgets**

* **Add Widget button:** Creates a new widget. Click the button, fill in the form and save the settings.
* **Number of elements per page:** Select how many widgets to display on one page (e.g. 10 or 20).
* **Page Navigation:** Use the arrows at the bottom of the table to navigate between widget pages.

***

#### How to create a new widget&#x20;

1. Click the “Add Widget” button.
2. In the form, fill in:
   * Name of the widget (optional).
   * Minimum donation amount (optional).
   * Appearance settings.
3. Save the settings - the widget will appear in the list.

***

#### How to embed a widget&#x20;

1. Copy the link from the Embed Link field.
2. Paste the link into your streaming program (e.g. OBS) as a Browser Source.
3. Adjust the size and location of the widget in your program.