--- title: Kustomisasi Perjalanan description: Konfigurasikan identitas visual perjalanan — logo, warna, latar, dan bentuk tombol — langsung di Portal IDCloud, dengan pratinjau real-time. canonical: https://developer.unico.io/id/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: id generated_by: markdown-export --- **Kustomisasi Perjalanan** memungkinkan Anda menerapkan identitas visual merek Anda pada perjalanan verifikasi identitas Unico — tanpa tiket dukungan, tanpa bergantung pada tim dukungan, dan hasilnya langsung terlihat. Anda mengatur logo, warna latar, warna dan bentuk tombol, serta warna konten. Setelah dipublikasikan, konfigurasi tersebut langsung berlaku untuk perjalanan berikutnya yang dimulai di cabang (branch) Anda. :::info **Untuk siapa:** pelanggan yang menggunakan Web Journey dengan model integrasi iFrame, Redirect, atau SDK. **Apa yang berubah bagi pengguna akhir:** layar yang mereka lihat selama verifikasi identitas sekarang tampak seperti merek Anda. **Di mana menemukannya:** Portal IDCloud → menu samping **Settings** → tab **Customization**. ::: ## Sebelum Anda mulai ### Izin akses Pengguna Anda memerlukan akses ke area **Settings** pada Portal IDCloud. Jika ikon roda gigi tidak muncul di menu samping, minta administrator akun Anda untuk memberikan akses. ### Bagaimana konfigurasi ini diterapkan | | | | :- | :- | | **Cakupan** | Kustomisasi ini berlaku per **cabang (branch)** dan per **model integrasi**. iFrame dan Redirect/SDK memiliki konfigurasi independen — memublikasikan yang satu tidak memengaruhi yang lain. | | **Kapan berlaku** | Segera setelah dipublikasikan, untuk perjalanan yang **dimulai sejak saat itu**. Perjalanan yang sedang berlangsung tetap menggunakan tampilan sebelumnya. | | **Jika Anda tidak melakukan kustomisasi** | Perjalanan akan memuat tema default Unico. | | **Versi perjalanan** | Pratinjau ini didasarkan pada desain **Web Journey v3.0**. Pada versi lain, pratinjau mungkin tidak mencerminkan hasil secara akurat — dalam hal ini, hubungi Unico untuk membahas pembaruan versi Anda. | ### Yang perlu disiapkan - **Logo** dalam format PNG, sebaiknya dengan latar transparan, dengan tinggi maksimal **60 px** dan ukuran maksimal **100 KB**. - **Kode hex** warna merek Anda (misalnya `#1B3FA0`). ### Apa yang dapat dikonfigurasi pada integrasi Anda Selain model integrasi, apa yang muncul di layar bergantung pada **versi Web Journey** integrasi Anda. Ini adalah penyebab paling umum dari "saya tidak melihat kolom ini": | Fitur | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect | | :- | :-: | :-: | :-: | :-: | :-: | :-: | | **Logo** | ✅ | tidak ada | tidak ada | ✅ | ✅ | ✅ | | **Warna latar** | — | — | — | — | — | ✅ | | **Warna latar tombol** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Warna teks tombol** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Radius sudut tombol** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Warna konten** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Singkatnya: **warna latar hanya dapat dikonfigurasi pada Web Journey v3.0 di redirect**, dan pada iFrame logo hanya ada di Web Journey v1.0. Warna dan bentuk tombol berfungsi di semua kombinasi. :::info Jika Anda tidak tahu versi mana yang Anda gunakan, tanyakan kepada kontak Onboarding Anda atau dukungan Unico. ::: ## Langkah demi langkah ### Langkah 1 — Buka tab Customization Di Portal IDCloud, klik **ikon roda gigi (Settings)** pada menu samping. Layar akan terbuka langsung pada tab **Customization**. Layar Settings memiliki tiga tab — **Customization**, **Webhook**, dan **QR Code**. Panduan ini membahas yang pertama. ![Layar Settings, dengan ikon roda gigi disorot pada menu samping](/img/product-guide/journey-customization/en/01-settings-tab.png) *Layar Settings dengan tab Customization terpilih.* ### Langkah 2 — Pilih model integrasi Pada kolom kiri, pilih **iFrame** atau **Redirect atau SDK** — kolom formulir akan berubah sesuai model yang dipilih. Anda akan mengenali layar ini dalam tiga area: **pemilih model** di kiri, **formulir** di tengah, dan **pratinjau langsung** di kanan, yang merespons setiap perubahan sebelum Anda memublikasikannya. **Jika Anda menggunakan kedua model, Anda perlu mengonfigurasi keduanya.** Keduanya adalah konfigurasi independen — atur dan publikasikan satu, lalu ulangi untuk yang lainnya. ![Layar Customization lengkap: pemilih model, formulir, dan pratinjau](/img/product-guide/journey-customization/en/02-integration-model.png) *Pemilih iFrame / Redirect atau SDK, formulir, dan pratinjau.* ### Langkah 3 — Unggah logo :::warning Tersedia di **Redirect atau SDK**. Di iFrame, hanya pada Web Journey v1.0. ::: Klik **Add a logo** dan pilih file-nya. Persyaratan: **PNG**, tinggi maksimal **60 px**, ukuran maksimal **100 KB**. **Gunakan PNG dengan latar transparan.** Dengan begitu logo dapat berfungsi di atas warna latar apa pun — PNG dengan latar putih akan menjadi kotak yang terlihat begitu latar diberi warna. Utamakan juga versi horizontal dari logo: ruang yang tersedia lebar dan pendek. ![Kolom Add a logo, dengan persyaratan format, tinggi, dan ukuran](/img/product-guide/journey-customization/en/03-customization-form.png) *Kolom "Add a logo" dengan persyaratan format, tinggi, dan ukuran.* ### Langkah 4 — Atur warna Ada empat kolom warna, dikelompokkan dalam formulir di bawah **Background**, **Buttons**, dan **Content**: | Kolom | Di mana kolom itu muncul pada perjalanan | Default | Ketersediaan | | :- | :- | :- | :- | | **Warna latar** | Latar layar perjalanan | `#F2F2F7` | Hanya **Web Journey v3.0 di redirect** | | **Buttons → Warna latar** | Isian tombol aksi (misalnya "Take Selfie") | — | Semua versi | | **Buttons → Warna teks** | Teks di dalam tombol | — | Semua versi | | **Warna konten** | Judul dan deskripsi (misalnya "Identity verification") | `#000000` | Semua versi | Untuk kolom mana pun, Anda dapat **mengetik nilai hex** (misalnya `#1B3FA0`) atau **mengklik kotak warna** di sebelah kiri kolom untuk membuka pemilih visual. Pada kolom latar dan konten, selama Anda membiarkannya kosong, perjalanan akan menggunakan nilai default yang ditampilkan sebagai placeholder pada kolom itu sendiri. **Warna latar diterapkan sebagai gradien, bukan warna solid.** Corak yang Anda atur menjadi bagian atas gradien, dan perjalanan akan menggelap secara progresif ke arah bawah layar. Corak yang sangat gelap menghasilkan dasar yang hampir hitam — pilih corak sedang hingga terang jika Anda ingin hasil yang seragam. **Gunakan warna utama merek Anda untuk latar tombol.** Ini adalah elemen yang pertama kali harus ditemukan pengguna; jika tidak menonjol, perjalanan kehilangan konversi. **Pilih keempat warna sebagai satu kesatuan, bukan satu per satu.** Warna-warna ini saling memengaruhi: latar gelap dengan warna konten hitam membuat perjalanan tidak terbaca, dan tombol terang di atas kartu putih bisa saja menghilang begitu saja. Atur keempatnya, dan baru setelah itu periksa hasilnya pada pratinjau (Langkah 6). ![Kolom Background color, warna tombol, dan Content color, dengan hasil pada pratinjau](/img/product-guide/journey-customization/en/04-colors.png) *Kolom Background color, Button Background/Text color, dan Content color, dengan hasilnya pada pratinjau.* ### Langkah 5 — Konfigurasikan tombol Tiga kolom mengontrol tombol aksi perjalanan (misalnya "Take Selfie"): | Kolom | Fungsinya | | :- | :- | | **Background color** | Warna isian tombol | | **Text color** | Warna teks di dalam tombol | | **Border radius** | Kelengkungan sudut, dalam piksel | Nilai referensi untuk **border radius**: - 0 → tombol persegi, sudut tajam - 8 hingga 16 → sudut sedikit membulat - 24 atau lebih → bentuk pil (bulat penuh) Nilai di atas setengah tinggi tombol tidak lagi mengubah hasilnya — bentuk pil adalah batasnya. **Gunakan warna utama merek Anda untuk latar tombol.** Ini adalah elemen yang pertama kali harus ditemukan pengguna — jika tidak menonjol, perjalanan kehilangan konversi. Dan jaga agar border radius konsisten dengan produk Anda yang lain, sehingga perjalanan terasa seperti kelanjutan dari aplikasi Anda, bukan situs pihak ketiga. ![Kolom Border radius, dengan tombol yang tercermin pada pratinjau](/img/product-guide/journey-customization/en/05-button-border-radius.png) *Background color, Text color, dan Border radius, dengan tombol yang tercermin pada pratinjau.* ### Langkah 6 — Periksa pratinjau, di ponsel dan desktop Pratinjau di sebelah kanan diperbarui setiap ada perubahan. Gunakan pemilih **Mobile / Desktop** di bagian atas untuk memeriksa kedua format. Jika Anda mengetik nilai warna yang tidak valid — nama warna, kode hex yang tidak lengkap — kolom tersebut akan mendapat **garis tepi merah** dan nilainya tidak diterapkan pada pratinjau. Perbaiki sebelum melanjutkan. **Selalu validasi dalam mode Mobile.** Sebagian besar pengguna akhir menyelesaikan verifikasi dari ponsel mereka; itulah format yang paling penting. Periksa juga tiga kontras: teks tombol terhadap latar tombol, tombol terhadap kartu perjalanan, dan warna konten terhadap warna latar. Adalah hal yang umum untuk mengonfigurasi tombol putih di atas kartu putih dan tombol itu menghilang begitu saja — pratinjau ini ada untuk mengungkap hal itu sebelum Anda memublikasikannya. ![Pemilih Mobile / Desktop pada panel pratinjau](/img/product-guide/journey-customization/en/06-live-preview.png) *Pemilih Mobile / Desktop dan kolom warna dengan nilai tidak valid yang disorot.* ### Langkah 7 — Publikasikan Tombol **Publish** menjadi aktif segera setelah ada perubahan yang tertunda. - **Publish** menyimpan konfigurasi dan menerapkannya pada perjalanan. - **Cancel** membuang semua yang Anda edit dan mengembalikan kolom ke status terakhir yang dipublikasikan. - Untuk **mengembalikan ke default Unico**, kosongkan kolom warna (biarkan placeholder muncul kembali), hapus logo, dan publikasikan. **Tidak ada riwayat versi.** Jika Anda memublikasikan konfigurasi yang salah, cara memperbaikinya adalah menyesuaikan nilai dan memublikasikan lagi — tidak ada cara sekali klik untuk mengembalikan ke versi sebelumnya. Itulah mengapa memeriksa pratinjau pada langkah sebelumnya penting. Selama Anda belum memublikasikannya, Cancel dapat menyelesaikannya. ### Langkah 8 — Daftarkan domain yang diizinkan :::warning Tersedia hanya pada model **iFrame**. ::: Pada iFrame, perjalanan berjalan tertanam di dalam halaman Anda sendiri. Untuk keamanan, hanya domain yang didaftarkan di sini yang dapat memuatnya. 1. Klik **Configure domains**, di pojok kanan atas. ![Tombol Configure domains, disorot](/img/product-guide/journey-customization/en/07-configure-domains-button.png) 2. Panel samping menampilkan daftar **Registered domains**, masing-masing dengan aksi **edit** (pensil) dan **hapus** (tong sampah). ![Panel Configure domains dengan daftar domain yang terdaftar](/img/product-guide/journey-customization/en/08-domains-list.png) 3. Untuk menambahkan, klik **Create domain**, masukkan domainnya, dan klik **Save**. ![Formulir Create domain](/img/product-guide/journey-customization/en/09-create-domain.png) Masukkan domain beserta protokolnya (`https://yoursite.com`). **Daftar ini adalah pengaturan keamanan, dan disimpan secara terpisah.** Ia diterapkan melalui **Save** pada panelnya sendiri, bukan melalui **Publish** pada layar utama. Daftarkan juga domain uji dan staging Anda, dan hapus domain yang sudah tidak digunakan — ini adalah daftar siapa saja yang dapat menanamkan perjalanan Anda. ## Pertanyaan Umum **Apakah perubahan berlaku untuk perjalanan yang sudah berjalan?** Tidak. Konfigurasi yang dipublikasikan berlaku untuk perjalanan yang dimulai setelah publikasi. **Mengapa saya tidak melihat kolom Logo dan Background?** Ada dua kemungkinan penyebab. Pertama: Anda mungkin memilih **iFrame** — pada iFrame, perjalanan tertanam di halaman Anda sendiri, yang sudah menyediakan latar dan identitasnya sendiri. Kedua: **versi Web Journey** Anda mungkin tidak menampilkan kolom tersebut. Warna latar hanya ada pada Web Journey v3.0 di redirect, dan logo di iFrame hanya ada di Web Journey v1.0. Periksa tabel pada "Sebelum Anda mulai". **Logo saya ditolak saat diunggah. Mengapa?** Periksa tiga persyaratan: format **PNG**, tinggi sampai **60 px**, dan ukuran sampai **100 KB**. **Latar terlihat terlalu gelap di bagian bawah layar.** Ini normal — latar dirender sebagai gradien yang menggelap dari atas ke bawah. Pilih corak dasar yang lebih terang. **Pratinjau tidak sesuai dengan perjalanan sesungguhnya.** Pratinjau ini didasarkan pada desain **Web Journey v3.0**. Jika integrasi Anda berada pada versi lain, hasilnya bisa berbeda — hubungi Unico untuk membahas pembaruan versi. **Saya memublikasikan konfigurasi yang salah. Bagaimana cara mengembalikannya?** Buka kembali layar, sesuaikan nilainya (atau kosongkan untuk kembali ke default), dan publikasikan lagi. Tidak ada riwayat versi. Jika Anda belum memublikasikannya, cukup klik **Cancel**. **Siapa yang mengubah kustomisasi pada akun saya?** Layar ini tidak menampilkan riwayat tersebut. Untuk mengetahui pengguna mana yang melakukan perubahan terakhir dan kapan, hubungi dukungan Unico. ## Referensi cepat ```text Portal IDCloud └─ Settings (ikon roda gigi pada menu samping) └─ tab Customization ├─ iFrame ............... Buttons (background, text color, border radius) │ Content (content color) │ + Configure domains └─ Redirect atau SDK .... Logo (PNG, 60 px, 100 KB) Background (color, diterapkan sebagai gradien) Buttons (background, text color, border radius) Content (content color) Pratinjau langsung · Mobile / Desktop · Cancel · Publish ```