Kustomisasi Perjalanan
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.
Untuk siapa: pelanggan yang menggunakan Web Journey (CbU) 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 CbU 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 CbU 3.0 di redirect, dan pada iFrame logo hanya ada di CbU 1.0. Warna dan bentuk tombol berfungsi di semua kombinasi.
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 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.
Pemilih iFrame / Redirect atau SDK, formulir, dan pratinjau.
Langkah 3 — Unggah logo
Tersedia di Redirect atau SDK. Di iFrame, hanya pada CbU 1.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.
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 CbU 3.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, 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.
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 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
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.
-
Klik Configure domains, di pojok kanan atas.
-
Panel samping menampilkan daftar Registered domains, masing-masing dengan aksi edit (pensil) dan hapus (tong sampah).
-
Untuk menambahkan, klik Create domain, masukkan domainnya, dan klik Save.
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 CbU Anda mungkin tidak menampilkan kolom tersebut. Warna latar hanya ada pada CbU 3.0 di redirect, dan logo di iFrame hanya ada di CbU 1.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
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