जर्नी कस्टमाइज़ेशन
जर्नी कस्टमाइज़ेशन से आप बिना किसी सपोर्ट टिकट के, सपोर्ट टीम पर निर्भर हुए बिना, और नतीजा फ़ौरन देखते हुए, Unico की पहचान सत्यापन जर्नी पर अपने ब्रांड की विज़ुअल पहचान लागू कर सकते हैं।
आप लोगो, बैकग्राउंड कलर, बटन के कलर और शेप, और कंटेंट का कलर सेट करते हैं। पब्लिश करने के बाद, यह कॉन ्फ़िगरेशन आपकी ब्रांच पर शुरू होने वाली अगली जर्नी के लिए तुरंत लागू हो जाता है।
किसके लिए है: ऐसे कस्टमर जो iFrame, Redirect, या SDK इंटीग्रेशन मॉडल के साथ Web Journey का इस्तेमाल करते हैं।
एंड यूज़र के लिए क्या बदलता है: पहचान सत्यापन के दौरान उन्हें दिखने वाली स्क्रीन अब आपके ब्रांड जैसी दिखती है।
कहाँ मिलेगा: IDCloud पोर्टल → साइडबार सेटिंग्स → कस्टमाइज़ेशन टैब।
शुरू करने से पहले
एक्सेस परमिशन
आपके यूज़र को IDCloud पोर्टल के सेटिंग्स एरिया का एक्सेस चाहिए। अगर साइडबार में गियर आइकॉन नहीं दिखता, तो अपने अकाउंट एडमिनिस्ट्रेटर से एक्सेस देने के लिए कहें।
कॉन्फ़िगरेशन कैसे लागू होता है
| स्कोप | कस्टमाइज़ेशन हर ब्रांच और हर इंटीग्रेशन मॉडल के लिए लागू होता है। iFrame और Redirect/SDK की कॉन्फ़िगरेशन अलग-अलग हैं — एक को पब्लिश करना दूसरे को प्रभावित नहीं करता। |
| कब लागू होता है | पब्लिश करने के तुरंत बाद, उस पल से शुरू होने वाली जर्नी के लिए। पहले से चल रही जर्नी पहले जैसी ही दिखती रहेंगी। |
| अगर आप कस्टमाइज़ नहीं करते | जर्नी डिफ़ॉल्ट Unico थीम लोड करती है। |
| जर्नी वर्ज़न | प्रीव्यू Web Journey v3.0 डिज़ाइन पर आधारित है। दूसरे वर्ज़न पर प्रीव्यू नतीजे को सही तरह से नहीं दिखा सकता — ऐसे में, वर्ज़न अपडेट के लिए Unico से संपर्क करें। |
क्या तैयार रखना है
- PNG में लोगो, अच्छा हो अगर बैकग्राउंड ट्रांसपेरेंट हो, ऊँचाई में 60 px तक और साइज़ में 100 KB तक।
- आपके ब्रांड कलर्स के हेक्स कोड (जैसे
#1B3FA0)।
आपके इंटीग्रेशन में क्या कॉन्फ़िगर करने योग्य है
इंटीग्रेशन मॉडल के अलावा, स्क्रीन पर क्या दिखता है यह आपके इंटीग्रेशन के Web Journey वर्ज़न पर भी निर्भर करता है। "मुझे यह फ़ील्ड नहीं दिख रही" की सबसे सामान्य वजह यही है:
| फ़ीचर | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
|---|---|---|---|---|---|---|
| लोगो | ✅ | मौजूद नहीं | मौजूद नहीं | ✅ | ✅ | ✅ |
| बैकग्राउंड कलर | — | — | — | — | — | ✅ |
| बटन बैकग्राउंड कलर | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| बटन टेक्स्ट कलर | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| बटन बॉर्डर रेडियस | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| कंटेंट कलर | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
संक्षेप में: बैकग्राउंड कलर सिर्फ़ Web Journey v3.0 में redirect पर कॉन्फ़िगर करने योग्य है, और iFrame में लोगो सिर्फ़ Web Journey v1.0 पर मौजूद है। कलर और बटन शेप हर कॉम्बिनेशन में काम करते हैं।
अगर आपको नहीं पता कि आप किस वर्ज़न पर हैं, तो अपने Onboarding कॉन्टैक्ट या Unico सपोर्ट से पूछें।
चरण दर चरण
चरण 1 — कस्टमाइज़ेशन टैब खोलें
IDCloud पोर्टल में, साइडबार में गियर आइकॉन (सेटिंग्स) पर क्लिक करें। स्क्रीन सीधे कस्टमाइज़ेशन टैब पर खुलती है।
सेटिंग्स स्क्रीन में तीन टैब हैं — कस्टमाइज़ेशन, Webhook, और QR Code। यह गाइड पहले वाले को कवर करती है।
कस्टमाइज़ेशन टैब चुनी हुई सेटिंग्स स्क्रीन।
चरण 2 — इंटीग्रेशन मॉडल चुनें
बाईं कॉलम में, iFrame या Redirect or SDK चुनें — मॉडल के हिसाब से फ़ॉर्म फ़ील्ड्स बदल जाती हैं।
आप स्क्रीन को तीन हिस्सों में पहचानेंगे: बाईं ओर मॉडल सिलेक्टर, बीच में फ़ॉर्म, और दाईं ओर लाइव प्रीव्यू, जो पब्लिश करने से पहले हर बदलाव पर रिएक्ट करता है।
अगर आप दोनों मॉडल इस्तेमाल करते हैं, तो आपको दोनों कॉन्फ़िगर करने होंगे। ये अलग-अलग कॉन्फ़िगरेशन हैं — एक को एडजस्ट करके पब्लिश करें, फिर दूसरे के लिए दोहराएँ।
iFrame / Redirect or SDK सिलेक्टर, फ़ॉर्म, और प्रीव्यू।
चरण 3 — लोगो अपलोड करें
Redirect or SDK में उपलब्ध। iFrame में, सिर्फ़ Web Journey v1.0 पर।
Add a logo पर क्लिक करें और फ़ाइल चुनें। ज़रूरी शर्तें: PNG, अधिकतम ऊँचाई 60 px, अधिकतम साइज़ 100 KB।
ट्रांसपेरेंट बैकग्राउंड वाला PNG इस्तेमाल करें। इससे लोगो किसी भी बैकग्राउंड कलर पर काम करता है — सफ़ेद बैकग्राउंड वाला PNG, बैकग्राउंड कलर होने पर, एक दिखने वाला रेक्टेंगल बन जाता है। साथ ही लोगो का होरिज़ॉन्टल वर्ज़न इस्तेमाल करना बेहतर है: उपलब्ध जगह चौड़ी और छोटी है।
फ़ॉर्मेट, ऊँचाई, और साइज़ की शर्तों के साथ "Add a logo" फ़ील्ड।
चरण 4 — कलर सेट करें
चार कलर फ़ील्ड हैं, जो फ़ॉर्म में Background, Buttons, और Content के अंदर ग्रुप की गई हैं:
| फ़ील्ड | जर्नी में कहाँ दिखता है | डिफ़ॉल्ट | उपलब्धता |
|---|---|---|---|
| बैकग्राउंड कलर | जर्नी स्क्रीन का बैकग्राउंड | #F2F2F7 | सिर् फ़ Web Journey v3.0 in redirect |
| Buttons → बैकग्राउंड कलर | एक्शन बटन का फिल (जैसे "Take Selfie") | — | सभी वर्ज़न |
| Buttons → टेक्स्ट कलर | बटन के अंदर का टेक्स्ट | — | सभी वर्ज़न |
| कंटेंट कलर | टाइटल और डिस्क्रिप्शन (जैसे "Identity verification") | #000000 | सभी वर्ज़न |
इनमें से किसी भी फ़ील्ड में आप हेक्स वैल्यू टाइप कर सकते हैं (जैसे #1B3FA0) या फ़ील्ड के बाईं ओर
कलर स्वैच पर क्लिक करके विज़ुअल पिकर खोल सकते हैं। बैकग्राउंड और कंटेंट फ़ील्ड में, जब तक आप उन्हें
खाली छोड़ते हैं, जर्नी वह डिफ़ॉल्ट वैल्यू इस्तेमाल करती है जो फ़ील्ड में ही प्लेसहोल्डर के रूप में दिखती है।
बैकग्राउंड कलर एक ग्रेडिएंट के रूप में लागू होता है, सॉलिड कलर के रूप में नहीं। आपने जो टोन सेट किया है वह ग्रेडिएंट का टॉप है, और जर्नी स्क्रीन के नीचे की ओर धीरे-धीरे डार्क होती जाती है। बहुत डार्क टोन लगभग-काले बेस का नतीजा देते हैं — यूनिफ़ॉर्म रिज़ल्ट के लिए मीडियम-से-लाइट टोन चुनें।
बटन बैकग्राउंड के लिए अपने ब्रांड का प्राइमरी कलर इस्तेमाल करें। यह वह एलिमेंट है जो यूज़र को पहले ढूँढना होता है; अगर यह अलग से नज़र नहीं आता, तो जर्नी कन्वर्ज़न खो देती है।
चार कलर को एक सेट के रूप में चुनें, एक-एक करके नहीं। ये एक-दूसरे को प्रभावित करते हैं: ब्लैक कंटेंट कलर के साथ डार्क बैकग्राउंड जर्नी को पढ़ने लायक़ नहीं छोड़ता, और सफ़ेद कार्ड पर लाइट बटन बस ग़ायब हो सकता है। चारों सेट करें, और तभी प्रीव्यू (चरण 6) में नतीजा चेक करें।
बैकग्राउंड कलर, बटन Background/Text कलर, और कंटेंट कलर फ़ील्ड, प्रीव्यू में नतीजे के साथ।
चरण 5 — बटन कॉन्फ़िगर करें
तीन फ़ील्ड जर्नी के एक्शन बटन को कंट्रोल करती हैं (जैसे "Take Selfie"):
| फ़ील्ड | क्या करती है |
|---|---|
| बैकग्राउंड कलर | बटन का फिल कलर |
| टेक्स्ट कलर | बटन के अंदर के टेक्स्ट का कलर |
| बॉर्डर रेडियस | कोनों की राउंडिंग, पिक्सल में |
बॉर्डर रेडियस के लिए रेफ़रेंस वैल्यू:
- 0 → रेक्टेंगुलर बटन, शार्प कोने
- 8 से 16 → थोड़े राउंडेड कोने
- 24 या ज़्यादा → पिल शेप (पूरी तरह राउंडेड)
बटन की आधी हाइट से ज़्यादा की वैल्यू पर नतीजा और नहीं बदलता — पिल शेप ही लिमिट है।
बटन बैकग्राउंड के लिए अपने ब्रांड का प्राइमरी कलर इस्तेमाल करें। यह वह एलिमेंट है जो यूज़र को पहले ढूँढना होता है — अगर यह अलग से नज़र नहीं आता, तो जर्नी कन्वर्ज़न खो देती है। और बॉर्डर रेडियस को अपने बाकी प्रोडक्ट के साथ कंसिस्टेंट रखें, ताकि जर्नी किसी थर्ड-पार्टी साइट के बजाय आपके ऐप की एक निरंतरता जैसी लगे।
बैकग्राउंड कलर, टेक्स्ट कलर, और बॉर्डर रेडियस, प्रीव्यू में दिखते बटन के साथ।
चरण 6 — मोबाइल और डेस्कटॉप पर प्रीव्यू चेक करें
दाईं ओर का प्रीव्यू हर बदलाव पर अपडेट होता है। दोनों फ़ॉर्मेट चेक करने के लिए ऊपर दिए गए Mobile / Desktop सिलेक्टर का इस्तेमाल करें।
अगर आप कोई इनवैलिड कलर वैल्यू टाइप करते हैं — किसी कलर का नाम, अधूरा हेक्स कोड — तो फ़ील्ड पर लाल बॉर्डर आ जाता है और वैल्यू प्रीव्यू पर लागू नहीं होती। आगे बढ़ने से पहले इसे ठीक करें।
हमेशा Mobile मोड में वैलिडेट करें। ज़्यादातर एंड यूज़र अपने फ़ोन से वेरिफ़िकेशन पूरा करते हैं; यही सबसे ज़्यादा मैटर करने वाला फ़ॉर्मेट है। और तीन कॉन्ट्रास्ट चेक करें: बटन बैकग्राउंड के सामने बटन टेक्स्ट, जर्नी कार्ड के सामने बटन, और बैकग्राउंड कलर के सामने कंटेंट कलर। सफ़ ेद कार्ड पर सफ़ेद बटन कॉन्फ़िगर करना और उसका बस ग़ायब हो जाना आम बात है — प्रीव्यू इसी को पब्लिश करने से पहले दिखाने के लिए है।
Mobile / Desktop सिलेक्टर और हाइलाइट की गई इनवैलिड वैल्यू वाली कलर फ़ील्ड।
चरण 7 — पब्लिश करें
जैसे ही कोई पेंडिंग बदलाव होता है, Publish बटन एनेबल हो जाता है।
- Publish कॉन्फ़िगरेशन सेव करता है और उसे जर्नी पर लागू करता है।
- Cancel आपके किए हुए सभी एडिट को डिस्कार्ड करता है और फ़ील्ड्स को आख़िरी पब्लिश की गई स्टेट पर वापस लाता है।
- Unico के डिफ़ॉल्ट पर वापस जाने के लिए, कलर फ़ील्ड्स क्ल ियर करें (प्लेसहोल्डर को फिर से दिखने दें), लोगो हटाएँ, और पब्लिश करें।
यहाँ कोई वर्ज़न हिस्ट्री नहीं है। अगर आप कोई ग़लत कॉन्फ़िगरेशन पब्लिश करते हैं, तो इसे ठीक करने का तरीका वैल्यू एडजस्ट करके फिर से पब्लिश करना है — पिछले वर्ज़न को वन-क्लिक में रिस्टोर करने का कोई तरीका नहीं है। इसलिए पिछले चरण में प्रीव्यू चेक करना मैटर करता है। जब तक आपने पब्लिश नहीं किया है, Cancel इसे सुलझा देता है।
चरण 8 — एलाउड डोमेन रजिस्टर करें
सिर्फ़ iFrame मॉडल में उपलब्ध।
iFrame में, जर्नी आपके अपने पेज के अंदर एम्बेडेड चलती है। सिक्योरिटी के लिए, सिर्फ़ यहाँ रजिस्टर किए गए डोमेन ही इसे लोड कर सकते हैं।
-
ऊपर-दाईं कॉर्नर में Configure domains पर क्लिक करें।
-
साइड पैनल Registered domains को लिस्ट करता है, हर एक के साथ edit (पेंसिल) और delete (ट्रैश) एक्शन।
-
एक जोड़ने के लिए, Create domain पर क्लिक करें, डोमेन एंटर करें, और Save पर क्लिक करें।
डोमेन को उसके प्रोटोकॉल के साथ एंटर करें (https://yoursite.com)।
यह लिस्ट एक सिक्योरिटी सेटिंग है, और इसे अलग से सेव किया जाता है। यह पैनल के अपने Save पर लागू होती है, मुख्य स्क्रीन के Publish पर नहीं। अपने टेस्ट और स्टेजिंग डोमेन भी रजिस्टर करें, और जो अब इस्तेमाल में नहीं हैं उन्हें हटाएँ — यह उन सभी की लिस्ट है जो आपकी जर्नी को एम्बेड कर सकते हैं।
सामान्य प्रश्न
क्या बदलाव उन जर्नी पर लागू होते हैं जो पहले से चल रही हैं? नहीं। पब्लिश की गई कॉन्फ़िगरेशन पब्लिश करने के बाद शुरू होने वाली जर्नी पर लागू होती है।
मुझे Logo और Background फ़ील्ड क्यों नहीं दिखते? दो संभावित वजह हैं। पहली: शायद आपने iFrame चुना हो — iFrame में जर्नी आपके अपने पेज में एम्बेडेड होती है, जो पहले से बैकग्राउंड और पहचान देता है। दूसरी: आपका Web Journey वर्ज़न शायद यह फ़ील्ड नहीं दिखाता। बैकग्राउंड कलर सिर्फ़ Web Journey v3.0 में redirect पर मौजूद है, और iFrame में लोगो सिर्फ़ Web Journey v1.0 पर। "शुरू करने से पहले" वाली टेबल देखें।
मेरा लोगो अपलोड पर रिजेक्ट हो गया। क्यों? तीन शर्तें चेक करें: PNG फ़ॉर्मेट, ऊँचाई 60 px तक, और साइज़ 100 KB तक।
बैकग्राउंड स्क्रीन के नीचे बहुत डार्क दिख रहा है। यही अपेक्षित है — बैकग्राउंड एक ग्रेडिएंट के रूप में रेंडर होता है जो ऊपर से नीचे डार्क होता जाता है। हल्का बेस टोन चुनें।
प्रीव्यू मेरी असली जर्नी से मैच नहीं करता। प्रीव्यू Web Journey v3.0 डिज़ाइन पर आधारित है। अगर आपका इंटीग्रेशन किसी दूसरे वर्ज़न पर है, तो नतीजा अलग हो सकता है — वर्ज़न अपडेट के लिए Unico से संपर्क करें।
मैंने एक ग़लत कॉन्फ़िगरेशन पब्लिश कर दी। कैसे वापस जाऊँ? स्क्रीन फिर से खोलें, वैल्यू एडजस्ट करें (या डिफ़ॉल्ट पर लौटने के लिए उन्हें क्लियर करें), और फिर से पब्लिश करें। कोई वर्ज़न हिस्ट्री नहीं है। अगर आपने अभी तक पब्लिश नहीं किया है, तो सिर्फ़ Cancel पर क्लिक करें।
मेरे अकाउंट पर कस्टमाइज़ेशन किसने बदली? स्क्रीन यह हिस्ट्री नहीं दिखाती। यह जानने के लिए कि किस यूज़र ने आख़िरी बदलाव कब किया, Unico सपोर्ट से संपर्क करें।
त्वरित संदर्भ
IDCloud Portal
└─ सेटिंग्स (साइडबार में गियर आइकॉन)
└─ कस्टमाइज़ेशन टैब
├─ iFrame ............... बटन (बैकग्राउंड, टेक्स्ट कलर, बॉर्डर रेडियस)
│ कंटेंट (कंटेंट कलर)
│ + Configure domains
└─ Redirect or SDK ...... लोगो (PNG, 60 px, 100 KB)
बैकग्राउंड (कलर, ग्रेडिएंट के रूप में लागू)
बटन (बैकग्राउंड, टेक्स्ट कलर, बॉर्डर रेडियस)
कंटेंट (कंटेंट कलर)
लाइव प्रीव्यू · Mobile / Desktop · Cancel · Publish