# Create custom Hosted Pages You can [white-label/customize](#Customising) the Hosted Pages, provided you have the correct permissions. In the **Dashboard**, go to ****Settings**** **> Configuration > Web App V2** to customize your settings. Under **Settings** you can change the following elements in {% $COMPANY %}'s HP: - [UI customization](hosted-pages-v2-create-custom-hosted-pages#UI-customization) - [Session detail settings](hosted-pages-v2-create-custom-hosted-pages#Session-detail-settings) - [Trust icons / Footer customization](hosted-pages-v2-create-custom-hosted-pages#Trust-icons-footer-customization) - [Flow customization](hosted-pages-v2-create-custom-hosted-pages#flow-customization) - [Legal text](hosted-pages-v2-create-custom-hosted-pages#legal-text) - [Terms of Service and Privacy Policy pages](hosted-pages-v2-create-custom-hosted-pages#terms-of-service-and-privacy-policy) Once you have made the changes, you have the option to **Preview** the changes, **Save** them, or **Reset to defaults**. ### UI customization {% #UI-customization%} This section enables you to customize the 'look and feel' of {% $COMPANY %}'s HP. {% img src="./images/ui-customization.png" alt="" align="center" withLightbox=false /%} Selecting **Enable automatic theme alignment to user’s device** means that, by default, the HP theme will match the user's device settings. For example: - user uses light mode - the HP background will be white - user uses dark mode - the HP background will be black Deselecting this option will result in the HP always using the white background. You can also change the accent color (used for some graphics, buttons, selection, toggle, activated UI elements such as dropdowns, text fields and hyperlinks), and the colors of the following icons: {% table %} - **Status page success icon** {% img src="./images/authentication-successful.png" align="left" withLightbox=false /%} --- - **Status page submitted icon** {% img src="./images/payment-submitted.png" align="left" withLightbox=false /%} --- - **Status page failure icon** {% img src="./images/payment-failed.png" align="left" withLightbox=false /%} {% /table %} By default the **Status page submitted icon** is #edb312 for both light mode and dark mode. By default the **Status page failure icon** is #f58c78 for both light mode and dark mode. You can also upload your company logo. The logo file size must be no more than 1 MB, with a file type of .png, .jpg or .jpeg. The image will be resized to have a maximum height of 40 pixels, while retaining its original aspect ratio. ### Session detail settings {% #Session-detail-settings%} These settings control which data points provided in a session API payload are displayed to the user on the HP. {% img src="./images/session-detail-settings.png" alt="" align="center" withLightbox=false /%} The options are: - **Description** - **Beneficiary Bank Account Holder Name** - **Beneficiary Bank Account Identifier (***e.g.***, IBAN, BBAN, Account Number)** - **Beneficiary Bank Identifier (***e.g.***, BIC, Sort Code)** By default the **Description** is enabled, but the beneficiary details are not enabled. ### Trust icons / Footer customization {% #Trust-icons-footer-customization%} This section controls the icons displayed in the footer. {% img src="./images/footer-icon-customization.png" alt="" align="center" withLightbox=false /%} {% admonition type="info" %} The confidence logos indicate to the user that the service is SSL secured, GDPR compliant and regulated by a financial authority such as the FCA in the UK or BaFin in Europe. {% /admonition %} Selecting **Default trust generating icons** displays the following: For mobile: {% img src="./images/trusty_logo_mobile.png" alt="" align="center" withLightbox=false /%} For desktop: {% img src="./images/trusty_logo_desktop.png" alt="" align="center" withLightbox=false /%} The trust icons are enabled by default. Selecting **Customized footer** enables you to upload your own images. The footer file size must be no more than 1 MB, with a file type of .png, .jpg or .jpeg. The image will be resized to have a maximum height of 20 pixels, while retaining its original aspect ratio. {% img src="./images/footer-icon-own.png" alt="" align="center" withLightbox=false /%} ### Flow customization {% #flow-customization%} These settings control the way in which the HP screens are displayed to the user. {% img src="./images/flow-customization.png" alt="" align="center" withLightbox=false /%} The options are: - **Enable displaying the status of the transaction to the user before returning to the merchant** {% #display_status%} \- When selected, this will add an additional step and screen to the user journey from the bank back to the merchant where the current status of the transaction is displayed to the user. The user will automatically be redirected to the merchant after a 10 second countdown, or earlier if the user clicks the **Redirect now** button. By default this option is not enabled. The available screens are: {% table %} - {% img src="./images/hpv2-payment-pending.png" alt="" align="center" withLightbox=false /%} - {% img src="./images/hpv2-payment-success.png" alt="" align="center" withLightbox=false /%} - {% img src="./images/hpv2-payment-failure.png" alt="" align="center" withLightbox=false /%} - {% img src="./images/hpv2-expired.png" alt="" align="center" withLightbox=false /%} --- - Payment submitted - Payment successful - Payment failed - Request expired {% /table %} {% admonition type="info" %} The status shown to the user is the status of the transaction at that particular moment. It won't get updated on that screen, *i.e.*, that screen will continue to display **Payment submitted** even though the final status of the transaction, *e.g.*, **Payment successful** or **Payment failed** may have been reached. {% /admonition %} - **Debtor Bank Account Identifier** and **Debtor Bank Identifier** \- When these options are selected the **Debtor Bank Account Identifier** and **Debtor Bank Identifier** details are displayed in the **From** dropdown on the **Payment submitted** screen. By default these options are not enabled. {% table %} - {% img src="./images/hpv2-debtor-details.png" alt="" align="center" withLightbox=false /%} --- - Debtor bank details {% /table %} - **Enable mobile handover QR code as the default host payment page** - When selected, this adds an extra step to the user journey where a screen displaying a QR code enabling the user to switch between their desktop and mobile device is displayed. By default this option is not enabled. {% table %} - {% img src="./images/hpv2-modal-qrcode.png" alt="" align="center" withLightbox=false /%} --- - QR code {% /table %} - **Enable one-time onboarding screen** - When selected, the onboarding screen is displayed to a user for the current session, after the **Pay by Bank** button is clicked. If you deselect this option, the user will not see this screen in subsequent sessions. By the default this option is enabled. {% table %} - {% img src="./images/hpv2-onboarding.png" alt="" align="center" withLightbox=false /%} --- - Onboarding {% /table %} See [Hosted Pages user journeys](#Flow) for examples of these screens in user journeys. ### Legal text {% #legal-text%} This section enables you to customize the legal text for the HP. {% img src="./images/legal-text.png" alt="" align="center" withLightbox=false /%} You can select the language for the legal text, enter the legal name of the business, the name you want displayed in the Hosted Pages and the expiration date when the text should be reviewed. Depending on your integration, you can choose to customize the text for AIS (Data), PIS or VRP. You can add links to your own pages instead of using {% $COMPANY %}'s hosted terms. If you want to use {% $COMPANY %}'s hosted text pages, you'll need to ensure that you retain the link place holders. ### Terms of Service and Privacy Policy {% #terms-of-service-and-privacy-policy%} Using the options in this section, you can edit the **Terms of Service** and **Privacy Policy** pages. {% img src="./images/terms-policy.png" alt="" align="center" withLightbox=false /%} These are the pages that you link to in the **Legal text** section.