> 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

Pastikan anda sudah membuat layanan pada halaman developer

<figure><img src="/files/OWZZTSj1fSzISCCsKUZy" alt=""><figcaption></figcaption></figure>

Pastikan anda berada di menu backoffice

<figure><img src="/files/qCyK7NtcU6MDTndff7EL" alt=""><figcaption></figcaption></figure>

klik tambah widget untuk menambahkan komponen

<figure><img src="/files/BvsmV8eq9UOE5xEGkisU" 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="/files/FmEgk8iaDfSOqK87ywRy" 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="/files/3AiwJjzUjNJgyPWpgjsS" alt=""><figcaption></figcaption></figure>

### Konfigurasi Komponen

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

<figure><img src="/files/Gd1ecQxpvIvjGhIS6wrt" alt=""><figcaption></figcaption></figure>

### Menghapus Komponen

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

<figure><img src="/files/OIwmpjtKAmitGQ7GMurb" 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.*


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/2.backoffice/2.components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.