> For the complete documentation index, see [llms.txt](https://docs.goaffpro.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goaffpro.com/other-apps/pointskit-rewards-and-referrals/admin-panel/widget.md).

# Widget

Setup > Widget

In the **Widget** tab, you can edit and customize the appearance of the widget. 

Here, you have various sections with different options for customizing the widget:

* Theme
* Launcher
* Panel
* Elements
* Configuration
* Translations

You can also see a preview of the widget on the right, that shows you how the customizations that you make will look in real-time.

![Widget](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8rTMKAlT6QdH5rJbJ%2Fimage.png?alt=media\&token=8a212bd6-55e5-4aaf-b5bd-440d8f135ab2)

In the **Theme** section, you can select the theme of the widget and select the brand color. Here, you can also adjust the position of the widget.

![Theme](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8raJA90WqRXT1r2iK%2Fimage.png?alt=media\&token=6994f350-0283-4cb5-83eb-44cf5acc298f)

In the **Appearance** section, you can set the background and text color of the widget. You can also set the icon and text that gets displayed for the widget. 

![Appearance ](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8rhr5PO1YDfM7Ez4O%2Fimage.png?alt=media\&token=700a6206-a8d5-47cd-92e7-e990c2c88c97)

In the **Panel** section, you can set the background color of the widget panel and adjust its corners, height, and width. You can also rearrange the content that is displayed in the panel. 

![Panel](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8rnilDdM49TdtUctN%2Fimage.png?alt=media\&token=edfc9e2a-7348-401f-8c48-d5f997c14874)

In the **Elements** section, you can select the background color of the widget header. There are also options present to set the color of the card, button, and links. 

![Elements](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8rvhtoXm9YUMDbao8%2Fimage.png?alt=media\&token=5c6def36-336d-4d2d-9f22-5273ab736d94)

In the **Configuration** section, you can adjust the visibility and language settings of the widget. 

![Configuration](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8s-OxWXQuO_Zdo1hX%2Fimage.png?alt=media\&token=13b0ef1b-0f92-47e9-9886-73360697a4fa)

Finally, in the **Translations** section, you can edit the translations of the text in the widget. 

![Translations](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-Mj8qGmxo_FWmXyfoCgn%2F-Mj8s3WXKpjxFK4WR7G3%2Fimage.png?alt=media\&token=c35311ae-7b56-4a87-827d-f62df056e799)

{% embed url="<https://www.youtube.com/watch?v=UfI3TocCpz4>" %}
Widget
{% endembed %}