> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/2.backoffice/2.components.md).

# Komponen

Menambah dan mengatur komponen

Pastikan anda sudah membuat layanan pada halaman developer

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-2c7583a2eb1a796292b7dccf0c2deb3560d6ac7b%2Fimage%20(3)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Pastikan anda berada di menu backoffice

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-3db0ae6831da06363a75c21d61e15e55ad87497e%2Fimage%20(4)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

klik tambah widget untuk menambahkan komponen

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-99d52ce5b79a8dd2c8d0f0f8423b48e7f83d7904%2Fimage%20(5)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Terdapat beberapa komponen yang dapat ditambahkan. Komponen dibagi menjadi 3 bagian yaitu:

1. Basic
2. Data
3. Chart

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-d3de463facaf3f8401d95730cb3decad7b13bdfe%2Fimage%20(6)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Menambahkan komponen

Untuk menambahkan komponen klik *"Tambah Widget"* akan muncul halaman pop-up, kemudian pilih komponen yang akan anda digunakan.

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-3825a3c8779a4e040f43a05c9144a9c8eb215c31%2Fimage%20(7)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Konfigurasi Komponen

Setiap komponen memiliki konfigurasi yang berbeda, untuk melakukan konfigurasi klik icon 'Gear' pada komponen

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-f2ee8d58db3313453e8f14825f8a2f7e2d4ba1dd%2Fimage%20(8)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Menghapus Komponen

Untuk menghapus komponen klik icon *"Tempat sampah"* pada komponen

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-cba9b3b7378318e711f3584066a77d2e414b3f2a%2Fimage%20(9)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

*Selesai, sampai tahap ini anda sudah berhasil menambahkan, menghapus serta mengatur komponen, tahap selanjutnya untuk membuat halaman baru pada builder backend.*