> 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/1.frontend/7.widget/8.webview.md).

# Webview

Platform INA Digital memungkinkan para pengembang untuk memasukkan konten berbasis teknologi web melalui integrasi WebView.

| Target Platform             | Jenis Integrasi                                                                                                                                        | Jenis Mesin Peramban (*Browser Engine*)                                                                                                                                            |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Situs Portal Nasional       | `<iframe>`                                                                                                                                             | Bergantung kepada jenis peramban (*web browser*) yang digunakan untuk mengakses situs Portal Nasional.                                                                             |
| Portal untuk Android        | [WebView](https://developer.android.com/develop/ui/views/layout/webapps) (bukan [Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs/)) | Bergantung kepada jenis peramban khusus WebView yang dipasang oleh perangkat pengguna; biasanya Google Chrome (berbasis Chromium) atau Android System WebView (berbasis Chromium). |
| Portal untuk iOS dan iPadOS | [WkWebView](https://developer.apple.com/documentation/webkit/wkwebview)                                                                                | WebKit.                                                                                                                                                                            |

#### Persyaratan Teknis WebView

Layanan Anda harus memenuhi ketentuan teknis sebagai berikut untuk dapat disetujui untuk dipublikasikan ke dalam Portal Nasional.

1. Jika situs Anda mewajibkan penggunaan pengaturan [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) atau [`frame-ancestors` pada Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors), Anda diwajibkan untuk memberi *whitelist*/*allowlist* kepada `*.govtechindonesia.id` agar dapat diakses dalam Portal Nasional.
2. Layanan Anda harus dapat diakses sekurang-kurangnya pada perangkat:

* **Android 7.0** (Nougat) (dirilis Agustus 2016)
* **iOS 12.0** (dirilis September 2018)
* **Google Chrome 76** (dirilis Juli 2019)
* **Firefox 68 ESR** (dirilis Juli 2019)
* **Safari 12.0** (dirilis September 2018)

3. Layanan Anda harus dapat diakses pada perangkat dengan dimensi layar minimum sebagai berikut:

* \*\*Situs untuk perangkat *mobile*, vertikal:\*\*320 (lebar) × 504 (tinggi) piksel, setara perangkat iPhone 5S
* **Situs untuk perangkat \_mobile**\_**, horizontal:** 568 (lebar) × 256 (tinggi) piksel, setara perangkat iPhone 5S
* **Situs untuk perangkat \_desktop**\_**:** 1280 (lebar) × 720 (tinggi) piksel, setara standar layar HDTV 720p

Selain ketentuan wajib di atas, kami merekomendasikan Anda untuk menerapkan beberapa hal ini untuk meningkatkan kualitas pengalaman pengguna (UX) aplikasi INA Digital. **Kami dapat sewaktu-waktu menaikkan syarat berikut ini menjadi wajib untuk mempublikasikan layanan web Anda ke dalam Portal Nasional.**

***

Untuk membuat webview, pastikan anda sudah di halaman builder frontend:

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

1. Drag and drop widget ***"WebView"***
2. Pilih dan klik tombol konfigurasi yang terdapat pada widget ***"WebView"***
3. Akan muncul tampilan seperti gambar dibawah

   <div><figure><img src="https://github.com/QTN-DEV/quantumbyte-doc/blob/main/.gitbook/assets/Screen%20Shot%202024-06-06%20at%2014.11.58.jpg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/gWI5sPpBV0fjNzcyADhR" alt=""><figcaption></figcaption></figure></div>
4. Masukan judul webview pada kolom ***"Title"***
5. Masukan URL atau link website yang akan menjadi tujuan pada kolom ***"URL"***
6. Jika user diwajibkan untuk login dahulu pada aplikasi, maka aktifkan radio button pada bagian ***"Wajib Login"***
7. Jika ingin menyertakan token user pada saat membuka url, aktifkan radio button pada bagian ***"Parameter Token User"***

   <div><figure><img src="https://github.com/QTN-DEV/quantumbyte-doc/blob/main/.gitbook/assets/Screen%20Shot%202024-06-06%20at%2014.12.59.jpg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/y5eFDbjauQP0fQ3JHT2x" alt=""><figcaption></figcaption></figure></div>
8. Jika sudah, klik ***"Save"*** untuk menyimpan


---

# 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/1.frontend/7.widget/8.webview.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.