Customisation
The user interface can be customised to make the UI appear closer to your branding. Theming allows your user to have a consistent experience navigating through your website and into the age verification flow.
The following items can be customised:
- Background colour
- Body font colour
- Body buttons
- Card buttons
- Logo
- Menu configuration
Background colour
As a default this is grey. The background can be a linear or radial gradient pattern consisting of one or two colours. This will apply across all screens.
Background colour change
Body font colour
The font colour applies to all text that is outside of the cards. It will also change the colour of the help icons displayed at the bottom of the page.
Buttons
There are three separate theming options for both the buttons on the cards and buttons on the body (detailed in the table below)
| options | description |
|---|---|
| PrimaryCardColour | Corresponds to the default colour of the buttons on the cards. As well as links on the cards |
| SecondaryCardColour | Corresponds to the colour of the card buttons on hoverstate. |
| TertiaryCardColour | Corresponds to the colour the colour of the card buttons on clickstate. |
| PrimaryBodyColour | Corresponds to the default colour of the buttons on the body. |
| SecondaryBodyColour | Corresponds to the colour of the body buttons on hoverstate. |
| TertiaryBodyColour | Corresponds to the colour the colour of the body buttons on clickstate. |
Menu configuration
We offer the opportunity to edit the layout of the methods, either as cards, as a list or a hybrid of the two. If you opt for the hybrid layout you can select which methods appear as the cards and which will populate as a list below them.
Another great feature is you can choose which order to display the cards.
List
Yoti recommends if you have more than 3 cards to go for this option:
List menu configuration
Card
Yoti recommends you keep this view if you have 3 or less cards.
Card menu configuration
Hybrid
Hybrid menu configuration
Logo
Our default Yoti logo in the top right hand side of the screen can be switched out with a logo of your own choice.
Please fill in the form above and ensure the logo is transparent and in a svg or png format.
Cancel URL
You are able to specify a cancel URL, if the user opens AVS and decides that they don't want to continue then they can be taken to a specific place rather than going back in the browser. This can have your business name added.
Cancel URL button