Example
<cr-component id="component" name="onboard-your-client" loading></cr-component>
<script>
const component = document.getElementById("#component");
let onboardingProps = {
onboardingConfiguration: [
{
icon: "volumetric-id",
title: "Configura tu perfil",
component: {
name: "mydata",
params: {
intro: {
enabled: true,
description:
"Realiza una foto a tu DNI por ambas caras para cargar los datos de forma automática o si lo prefieres completa la información de forma manual.",
title: "Mis datos",
},
fields: {
require: ["name1"],
},
},
},
},
{
icon: "volumetric-shield-tick",
title: "Conoce a tu cliente",
component: {
name: "questionnaire",
params: {
skip: true,
intro: {
enabled: true,
description:
"Tenemos la obligación de solicitarte información económica para cumplir con la normativa vigente en materia de blanqueo de capitales. Trataremos tus datos con la máxima confidencialidad.",
title: "blanqueo capitales",
},
steps: [
{
id: 1,
name: "Ingresos ",
question: "¿Cuáles son tus ingresos netos anuales?",
type: "currency",
placeholder: "55.000€",
label: "Ingresos netos anuales",
},
{
id: 2,
name: "Profesión",
question: "¿Cuál es tu profesión?",
type: "dropdown",
placeholder: "Seleccione profesión",
label: "Profesión",
options: [
{ value: "Científico de datos" },
{ value: "Médico" },
{ value: "Ingeniero" },
{ value: "Educador" },
],
},
{
id: 3,
name: "cargo público",
question: "¿Tienes un cargo público importante?",
type: "radio",
options: [
{
value: 1,
label: "Sí",
},
{
value: 2,
label: "No",
},
],
alert: {
text: "Revisamos con el Colegío de Notarios que no desempeñes o hayas desempeñado cargos públicos a escala comunitaria, nacional o internacional actualmente o en los últimos dos años.",
type: "warn",
},
},
{
id: 4,
name: "familia cargo público",
question: "¿Tienes un familiar con un cargo público importante?",
type: "radio",
options: [
{
value: 1,
label: "Sí",
},
{
value: 2,
label: "No",
},
],
},
{
id: 5,
name: "Residencia Fiscal",
question: "¿Cuál ha sido tu residencia fiscal el ultimo año?",
type: "dropdown",
placeholder: "Seleccione residencia fiscal",
label: "Residencia Fiscal",
options: [
{
value: "España",
},
{
value: "Alemania",
},
{
value: "Portugal",
},
{
value: "Italia",
},
],
},
{
id: 6,
name: "País de Nacimiento",
question: "¿Cuál es tu país de nacimiento?",
type: "dropdown",
placeholder: "Seleccione país de nacimiento",
label: "País de nacimiento",
options: [
{
value: "España",
},
{
value: "Alemania",
},
{
value: "Portugal",
},
{
value: "Italia",
},
],
},
{
id: 7,
name: "actividad económica",
question: "¿Cuál es tu actividad económica?",
type: "radio",
options: [
{
value: 1,
label: "Trabaja por cuenta ajena",
},
{
value: 2,
label: "Trabaja por cuenta propia",
},
{
value: 3,
label: "Ambas",
},
{
value: 4,
label: "Sin actividad económica",
},
],
},
],
},
},
},
{
icon: "volumetric-test",
title: "test de idoneidad",
component: {
name: "questionnaire",
params: {
skip: true,
intro: {
enabled: true,
description:
"Para poder ofrecerte un producto adaptado a tu perfil, necesitamos que completes este test de idoneidad.",
title: "Test de idoneidad",
},
steps: [
{
id: 1,
name: "tiempo inversión",
question: "¿Cuál es el horizonte temporal de tu inversión?",
type: "radio",
options: [
{
value: 1,
label: "Menos de 2 años",
},
{
value: 2,
label: "Entre 2 y 5 años",
},
{
value: 3,
label: "Más de 5 años",
},
],
},
{
id: 2,
name: "riesgo",
question: "¿Cuál es el nivel de riesgo que estas dispuesto a asumir?",
type: "range",
risk: true,
min: 1,
max: 5,
options: [
{
value: 1,
description: "Mi prioridad es asumir el menor riesgo posible",
},
{
value: 2,
description: "Me siento confortable asumiendo un riesgo medio",
},
{
value: 3,
description: "Me siento confortable asumiendo un riesgo medio",
},
{
value: 4,
description: "Me siento confortable asumiendo un riesgo medio",
},
{
value: 5,
description: "No tengo problema en asumir un alto riesgo",
},
],
},
{
id: 3,
name: "objetivos",
question: "¿Con cuál de los objetivos de inversión se identifica?",
type: "radio",
options: [
{
value: 1,
label: "Preservar mi capital a toda costa",
},
{
value: 2,
label: "Obtener alguna rentabilidad asumiendo variaciones moderadas de valor de mis inversiones",
},
{
value: 3,
label:
"Maximizar la rentabilidad de mis inversiones aceptando variaciones significativas de su valor y potenciales perdidas sustanciales",
},
],
},
],
score: {
enabled: true,
from: 0,
to: 10,
title: "conservador",
description:
"Un perfil más elevado te permitiría acceder a productos con mayor riesgo y, por lo tanto, mayor rentabilidad esperada en el largo plazo.",
error: {
description:
"Dichas respuestas son incorrectas o no estan relacionadas. Por favor, revise las siguientes respuestas",
questions: [],
},
},
},
},
},
],
};
let newScore = {
value: 7,
title: "Arriesgado",
description:
"Un perfil más elevado te permitiría acceder a productos con mayor riesgo y, por lo tanto, mayor rentabilidad esperada en el largo plazo.",
};
let newError = {
questions: [1, 2, 5],
description: "Te faltaron estas preguntas por responder",
};
component.init(onboardingProps);
</script>
Schema
{
"type": "object",
"properties": {
"onboardingConfiguration": {
"type": "array",
"description": "An object with the configuration for each step of the onboarding",
"items": [
{
"type": "object",
"properties": {
"icon": {
"type": "string"
},
"title": {
"type": "string"
},
"component": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"params": {
"type": "object",
"properties": {
"intro": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": false
},
"title": {
"type": "string",
"default": "Mis datos"
},
"description": {
"type": "string",
"default": ""
},
"image": {
"type": "string",
"default": "undefined/assets/img/data.svg"
}
},
"default": {
"enabled": false,
"image": "undefined/assets/img/data.svg"
}
},
"dni": {
"type": "object",
"properties": {
"cover": {
"type": "string",
"default": "undefined/assets/img/scan.png"
},
"front": {
"type": "string",
"default": ""
},
"back": {
"type": "string",
"default": ""
},
"verified": {
"type": "boolean",
"default": false
},
"error": {
"type": "boolean",
"default": false
}
},
"default": {
"cover": "undefined/assets/img/scan.png"
}
},
"fields": {
"type": "object",
"properties": {
"hidden": {
"type": "array",
"items": {
"type": "string"
},
"default": []
},
"require": {
"type": "array",
"items": {
"type": "string"
},
"default": []
},
"values": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"type": [
"string",
"object"
]
}
}
},
"default": [
{
"id": "documentType",
"value": "DNI/NIE"
}
]
}
},
"default": {}
},
"current": {
"type": "number",
"default": 0
}
}
}
}
}
}
},
{
"type": "object",
"properties": {
"icon": {
"type": "string"
},
"title": {
"type": "string"
},
"component": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"params": {
"type": "object",
"properties": {
"skip": {
"type": "boolean",
"default": false
},
"intro": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": false
},
"description": {
"type": "string",
"default": ""
},
"image": {
"type": "string",
"default": "undefined/assets/img/kyc.svg"
}
},
"default": {
"enabled": false,
"image": "undefined/assets/img/kyc.svg"
}
},
"steps": {
"type": "array",
"default": [],
"items": {
"type": "object",
"properties": {
"id": {
"type": "number",
"default": 0
},
"question": {
"type": "string",
"default": ""
},
"type": {
"type": "string",
"default": ""
},
"options": {
"type": "array",
"default": []
},
"alert": {
"type": "object",
"properties": {
"type": {
"type": "string",
"default": "info"
},
"text": {
"type": "string",
"default": ""
}
}
},
"value": {
"type": [
"string",
"number",
"object"
],
"properties": {
"value": {
"type": [
"string",
"number"
]
},
"description": {
"type": "string"
}
}
},
"label": {
"type": "string",
"default": ""
},
"placeholder": {
"type": "string",
"default": ""
},
"pattern": {
"type": "string",
"default": ""
},
"required": {
"type": "boolean",
"default": false
},
"min": {
"type": "number"
},
"max": {
"type": "number"
},
"step": {
"type": "number",
"default": 1
},
"risk": {
"type": "boolean",
"default": false
}
}
}
},
"score": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": false
},
"value": {
"type": "number",
"default": 0
},
"from": {
"type": "number",
"default": 0
},
"to": {
"type": "number",
"default": 1
},
"title": {
"type": "string",
"default": ""
},
"description": {
"type": "string",
"default": ""
},
"error": {
"type": "object",
"properties": {
"description": {
"type": "string",
"default": ""
},
"image": {
"type": "string",
"default": "undefined/assets/img/error.svg"
},
"questions": {
"type": "array",
"default": [],
"items": {
"type": "string"
}
}
}
}
},
"default": {
"enabled": false,
"error": {
"image": "undefined/assets/img/error.svg"
}
}
},
"current": {
"type": "number",
"default": 0
}
}
}
}
}
}
}
]
},
"image": {
"type": "string",
"description": "Path to an image to display as the main image",
"default": "undefined/assets/img/menu.svg"
},
"current": {
"type": "number",
"description": "A number with the current step to display of the onboarding",
"default": 0,
"minimum": 0
},
"innercurrent": {
"type": "number",
"description": "A number with the current sub-step to display inside the current step",
"default": 0,
"minimum": 0
}
},
"additionalProperties": true
}
Complete Schema
{}
Locales
{
"complete": "Please complete the following process in order to offer you a better service.",
"configuration": "Configure your profile",
"defaultConfig": {
"step0": {
"title": "Set up your profile",
"introDescription": "Take a photo of your ID card on both sides to upload the data automatically or, if you prefer, fill in the information manually.",
"introTitle": "My data"
},
"step1": {
"title": "Know your customer",
"introDescription": "We are obliged to request financial information from you in order to comply with current money laundering regulations. We will treat your data with the utmost confidentiality.",
"introTitle": "money laundering",
"innerStep0": {
"title": "Income",
"question": "What is your annual net income?",
"label": "Annual net income"
},
"innerStep1": {
"title": "Profession",
"question": "What is your profession?",
"placeholder": "Select profession",
"label": "Profession",
"option0": "Data scientist",
"option1": "Doctor",
"option2": "Engineer",
"option3": "Educator"
},
"innerStep2": {
"title": "Public office",
"question": "Do you hold an important public office?",
"option0": "Yes",
"option1": "No"
},
"innerStep3": {
"title": "Family public office",
"question": "Do you have a family member in high public office?",
"option0": "Yes",
"option1": "No"
},
"innerStep4": {
"title": "Tax residence",
"question": "What has been your tax residence in the last year?",
"placeholder": "Select tax residence",
"label": "Tax residence",
"option0": "Spain",
"option1": "Germany",
"option2": "Portugal",
"option3": "Italy"
},
"innerStep5": {
"title": "Country of birth",
"question": "What is your country of birth?",
"placeholder": "Select country of birth",
"label": "Country of birth",
"option0": "Spain",
"option1": "Germany",
"option2": "Portugal",
"option3": "Italy"
},
"innerStep6": {
"title": "Economic activity",
"question": "What is your economic activity?",
"option0": "Works for someone else",
"option1": "Self-employed",
"option2": "Both",
"option3": "No economic activity"
}
},
"step2": {
"title": "Suitability test",
"introDescription": "In order to be able to offer you a product adapted to your profile, we need you to complete this suitability test.",
"introTitle": "Suitability test",
"innerStep0": {
"title": "Investment time",
"question": "What is the time horizon of your investment?",
"option0": "Less than 2 years",
"option1": "Between 2 and 5 years",
"option2": "More than 5 years"
},
"innerStep1": {
"title": "Risk",
"question": "What level of risk are you willing to take?",
"option0": "My priority is to take as little risk as possible",
"option1": "I am comfortable taking a low risk",
"option2": "I am comfortable taking a medium risk",
"option3": "I am comfortable taking a high risk",
"option4": "I have no problem taking the highest risk"
},
"innerStep2": {
"title": "Objectives",
"question": "Which of the investment objectives do you identify with?",
"option0": "Preserve my capital at all costs",
"option1": "Obtain some return assuming moderate variations in the value of my investments.",
"option2": "Maximise the return on my investments by accepting significant variations in their value and potential substantial losses."
}
},
"score": {
"errorDescription": "These answers are incorrect or unrelated. Please check the following answers"
}
},
"requestAccount": "Request Account",
"start": "Start",
"score": {
"1": {
"description": "A higher profile would allow you to access products with higher risk and, therefore, higher expected profitability in the long term.",
"title": "Conservative"
},
"2": {
"description": "This profile allows access to products with some risk.",
"title": "Moderate"
},
"3": {
"description": "This profile will allow you to access products with higher risk and, therefore, higher expected profitability in the long term.",
"title": "Risky"
}
}
}