--- title: "Customize and test hosted onboarding" description: "Learn how to customize, test, and troubleshoot your hosted onboarding page." url: "https://docs.adyen.com/platforms/onboard-users/customize-hosted-onboarding" source_url: "https://docs.adyen.com/platforms/onboard-users/customize-hosted-onboarding.md" canonical: "https://docs.adyen.com/platforms/onboard-users/customize-hosted-onboarding" last_modified: "2024-02-27T14:04:00+01:00" language: "en" --- # Customize and test hosted onboarding Learn how to customize, test, and troubleshoot your hosted onboarding page. [View source](/platforms/onboard-users/customize-hosted-onboarding.md) We explain on this page how you can customize your [hosted onboarding](/platforms/onboard-users#hosted-onboarding) page for your users. You can: * [Create a hosted onboarding theme](#create-themes) * [Change the page language](#page-language) * [Change page settings](#page-settings) * [View hosted onboarding themes](#view-themes) * [Update a hosted onboarding theme](#update-theme) * [Test instant bank verification](#test) * [Troubleshoot hosted onboarding](#troubleshoot) ## Requirements Take into account the following requirements, limitations, and preparations | Requirement | Description | | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | You have an [Adyen for Platforms](/adyen-for-platforms-model/) or [Adyen Issuing](/issuing) integration. | | **[API credentials](/development-resources/api-credentials/)** | If you are using [API-initiated hosted onboarding](/platforms//onboard-users?tab=api-initiated_1_2), you must have credentials for the [Legal Entity Management API](https://docs.adyen.com/api-explorer/legalentity/latest/overview). | | **[Customer Area roles](/account/user-roles)** | To create or edit hosted onboarding themes, you must have the following roles: - **Manage hosted onboarding themes** - **Balance platform admin role** or **Balance platform base role** | ## Create a hosted onboarding theme You can customize the appearance of your hosted onboarding page by creating a theme. For the best user experience, we recommend the following when you create your theme: * Incorporate your logo to highlight your brand identity. * Use a clear and meaningful page header. * Include a descriptive tab title and a favicon to make the page tab visible in the browser. * Add a [redirectUrl](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-redirectUrl) that takes the user back to your platform after completing the hosted onboarding. * When choosing color combinations, ensure they complement each other well and provide enough contrast for readability, especially for text and navigation elements. Consider accessibility guidelines to ensure the color palette is inclusive and usable for individuals with visual impairments. To add a new theme: 1. Log in to your [Customer Area](https://ca-test.adyen.com/). 2. Select the company account. 3. Select **Developers** > **Hosted onboarding**. 4. Select the **Create new theme** button, or **Add new** from the drop-down menu if you have at lease one existing theme. 5. Add an optional description to identify the theme. If you do not add a description, the theme ID is shown in the drop-down menu list. 6. Customize the browser tab: 1. Add a tab title of up to 60 characters. 2. Upload a favicon of a 1:1 ratio. 7. Customize the appearance of your onboarding page: 1. Upload your brand logo. The file size limit for a logo is 5 MB in JPG format. 2. Specify your page header. 3. Select a background for your page. You can choose either: * A background color using a hex color code. * A background image. The file size limit for an image is 5 MB in PDF or JPG format. 8. Add branding to the external links. We recommend you use the following: | Page name | URL | | ----------------- | ------------------------------------------------------------------------------------ | | Support | A link to your platform’s preferred support channel | | Privacy statement | [Adyen privacy policy](https://www.adyen.com/policies-and-disclaimer/privacy-policy) | | F.A.Q. | [Hosted onboarding FAQs](/hosted-onboarding-faqs) | 9) (Optional) If you use [Onboarding on Invite](/platforms/onboard-users#hosted-onboarding), customize the appearance of your email template. Under **Email**, you can set the following: * Header image * Button color Additionally, the email template includes external links, a brand logo, and a background color that aligns with the onboarding page's branding. Ensure that the support link in the theme directs users to your platform’s preferred support channel. 10) Select **Save** to confirm the theme configurations. 11) (Optional) If you use [Onboarding on Invite](/platforms/onboard-users#hosted-onboarding), select **Apply** beside the theme dropdown to set the theme for the invitation email and hosted onboarding page. 12) Copy a unique [ID](https://docs.adyen.com/api-explorer/legalentity/latest/get/themes/_id_#path-id) of your theme. You need to pass this ID when making a POST [/legalEntities/{id}/onboardingLinks](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks) request to create a hosted onboarding link. To get an idea of how your hosted onboarding page could look, refer to the examples below. ### Tab: Custom page header [![Custom header](/user/pages/reuse/pfs-onboarding/hosted-onboarding/customize-ho/custom-header.png)](/user/pages/reuse/pfs-onboarding/hosted-onboarding/customize-ho/custom-header.png) ### Tab: Custom background image [![Custom background](/user/pages/reuse/pfs-onboarding/hosted-onboarding/customize-ho/custom-background.png)](/user/pages/reuse/pfs-onboarding/hosted-onboarding/customize-ho/custom-background.png) ## View hosted onboarding themes You can view your hosted onboarding themes and assets in your [Customer Area](https://ca-test.adyen.com/) or by making API requests using the [Legal Entity Management API](https://docs.adyen.com/api-explorer/legalentity/latest/overview). ### Tab: Customer Area To view the themes in your [Customer Area](https://ca-test.adyen.com/): 1. Go to **Developers** > **Hosted onboarding**. 2. Select a theme from the dropdown menu. ### Tab: API To get themes, use the following endpoints in the [Legal Entity Management API](https://docs.adyen.com/api-explorer/legalentity/latest/overview): * GET [/themes](https://docs.adyen.com/api-explorer/legalentity/latest/get/themes): view a list of hosted onboarding themes. * GET [/themes/id](https://docs.adyen.com/api-explorer/legalentity/latest/get/themes/\(id\)): view a specific theme. ## Update a hosted onboarding theme To update a theme in your [Customer Area](https://ca-test.adyen.com/): 1. Go to **Developers** > **Hosted onboarding**. 2. Select a theme from the dropdown menu. 3. Make your changes and select **Save**. ## Change the page language By default, the hosted onboarding page is rendered in the language set in the browser settings. If the browser language is not supported, the page is rendered in **en-US**. You can change the language of the page by specifying the [locale](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-locale) in your [/legalEntities/{id}/onboardingLinks](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks) request. The values for [locale](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-locale) are a combination of the two-letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) language and [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country codes. If an unsupported [locale](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-locale) value is sent in the request, the page is rendered in the next available value for a given language. For example, if **en-GB** is sent, the page defaults to **en-US**. The following languages are currently supported. | Language | Locale | | ---------- | --------- | | Bulgarian | **bg-BG** | | Croatian | **hr-HR** | | Czech | **cs-CZ** | | Danish | **da-DK** | | Dutch | **nl-NL** | | English | **en-US** | | Estonian | **et-EE** | | Finnish | **fi-FI** | | French | **fr-FR** | | German | **de-DE** | | Greek | **el-GR** | | Hungarian | **hu-HU** | | Italian | **it-IT** | | Latvian | **lv-LV** | | Lithuanian | **lt-LT** | | Norwegian | **no-NO** | | Polish | **pl-PL** | | Portuguese | **pt-PT** | | Romanian | **ro-RO** | | Slovak | **sk-SK** | | Slovenian | **sl-SI** | | Spanish | **es-ES** | | Swedish | **sv-SE** | ## Change page settings You can control particular actions that your user performs in the hosted onboarding page by specifying the [settings](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-settings) in your [/legalEntities/{id}/onboardingLinks](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks) request. The [settings](https://docs.adyen.com/api-explorer/legalentity/latest/post/legalEntities/\(id\)/onboardingLinks#request-settings) object contains key-value pairs, where the key represents a specific setting. | Setting | Type | Default value | Description | | | ---------------------------------------- | ---------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | `acceptedCountries` | array of strings | | The list of countries the user can choose from in hosted onboarding when `editPrefilledCountry` is allowed. The value must be in the two-character [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code format. The array is empty by default, allowing all [countries and regions supported by hosted onboarding](/platforms/onboard-users). | | | `allowBankAccountFormatSelection` | boolean | **false** | The user can select the [format for their payout account](/platforms/custom-payouts) if applicable. Set this to **true** to allow the action. | | | `allowDebugUi` | boolean | **true** | The debug user interface (UI) is enabled and can be accessed using a keyboard shortcut. Set this to **false** to disable the tool. | | | `allowIntraRegionCrossBorderPayout` | boolean | **false** | The user can select a payout account in a different EU/EEA location (including Switzerland and the UK) than the location of their legal entity. Set this to **true** to allow the action. | | | `changeLegalEntityType` | boolean | **true** | The user can change their legal entity type. Set this to **false** to not allow the action. | | | `editPrefilledCountry` | boolean | **true** | The user can change the country of their legal entity's address, for example the registered address of an organization. Set this to **false** to not allow the action. | | | `enforceLegalAge` | boolean | **false** | The user cannot be onboarded if they are less than 18 years of age. Set this to **true** to prevent underage users from being onboarded. | | | `hideOnboardingIntroductionIndividual` | boolean | **true** | The introduction screen is hidden for the user of the individual legal entity type. The introduction screen provides brief instructions for the subsequent steps in the hosted onboarding process. Set this to **false** to allow the action. | | | `hideOnboardingIntroductionOrganization` | boolean | **true** | The introduction screen is hidden for the user of the organization legal entity type. The introduction screen provides brief instructions for the subsequent steps in the hosted onboarding process. Set this to **false** to allow the action. | | | `instantBankVerification` | boolean | **true** | The user can initiate the verification process through open banking providers, like Plaid or Tink. Set this to **false** to not allow the action. | | | `requirePciSignEcommerce` | boolean | **false** | The user is required to sign PCI questionnaires for the **eCommerce** sales channel type. Set this to **true** to allow the action. | | | `requirePciSignPos` | boolean | **false** | The user is required to sign PCI questionnaires for the **pos** sales channel type. Set this to **true** to allow the action. | | | `requirePciSignEcomMoto` | boolean | **false** | The user is required to sign PCI questionnaires for the **ecomMoto** sales channel type. Set this to **true** to allow the action. | | | `requirePciSignPosMoto` | boolean | **false** | The user is required to sign PCI questionnaires for the **posMoto** sales channel type. Set this to **true** to allow the action. | | | `transferInstrumentLimit` | integer | | The maximum number of transfer instruments the user can create. | | ## Test instant bank verification To test the instant bank verification flow: 1. In your test environment, select the test account for your specified country/region. 2. Enter the corresponding user name and password from the table below. | Country/region | Test account | User name | Password | | -------------- | ------------------ | ---------- | ---------- | | Canada | Any institution | user\_good | user\_good | | Belgium | **Tink Demo Bank** | u51613239 | cty440 | | Denmark | **Tink Demo Bank** | u51613239 | cty440 | | Estonia | **Tink Demo Bank** | u91902655 | jtx720 | | Finland | **Tink Demo Bank** | u80628915 | puv375 | | France | **Tink Demo Bank** | u98563939 | ene512 | | Germany | **Tink Demo Bank** | u98235448 | cdz248 | | Italy | **Tink Demo Bank** | u51613239 | cty440 | | Latvia | **Tink Demo Bank** | u91902655 | jtx720 | | Lithuania | **Tink Demo Bank** | u91902655 | jtx720 | | Netherlands | **Tink Demo Bank** | u48874162 | idz429 | | Norway | **Tink Demo Bank** | u26049657 | mip544 | | Poland | **Tink Demo Bank** | u51613239 | cty440 | | Portugal | **Tink Demo Bank** | u51613239 | cty440 | | Spain | **Tink Demo Bank** | u82144157 | ymm529 | | Sweden | **Tink Demo Bank** | u27678322 | vrh343 | | United Kingdom | **Tink Demo Bank** | u30315772 | ndg370 | | United States | Any institution | user\_good | user\_good | ## Troubleshoot hosted onboarding You may need to troubleshoot if your user encounters issues during the hosted onboarding process. Hosted onboarding provides a browser-based user interface (UI) for you to use to debug. This tool allows you and your team to: * Diagnose and resolve issues faced by your users during their onboarding. * Collect necessary details about these issues for possible escalation to support or engineering teams. The debug UI is enabled by default and is intended for use by your support and engineering teams, not by your platform users. You can control the availability of the debug UI by adjusting the [`allowDebugUi` ](#page-settings)setting when creating an onboarding link. To access the debug UI: 1. Press `Ctrl + Shift + \` on your keyboard while in the hosted onboarding page. A comprehensive report of debug information will appear. 2. To share the report, select **Copy debug info** at the bottom and include it in your support request. Note that the debug report contains sensitive information and must be treated cautiously and to the minimum required extent. Only share this information with your team or Adyen Support for troubleshooting purposes. The debug report includes: * **Metadata**: Information about the SDK version, the user's [locale](#page-language), and the ID of the main legal entity. * **Experiments and Settings**: A list of enabled and disabled features (also known as experiments), along with the [settings](#page-settings) that were specified when creating an onboarding link. * **Task Statuses**: Information on onboarding tasks that the user needs to complete, along with their current statuses. You can also see why a task shows a specific status, such as verification errors or missing data. * **Legal Entity Data**: Information about the main legal entity linked to the account holder. Here, you can review the entire JSON response for the main legal entity, including entity associations and capabilities of the corresponding account holder. ![Debug user interface](/user/pages/reuse/pfs-onboarding/hosted-onboarding/customize-ho/debug-ui.svg?decoding=auto\&fetchpriority=auto)