Apty offers seamless integration into the host applications in terms of functionality and customization of the Apty Components and Apty Content so that instructional and navigational elements look and feel as they are a natural part of the design of the host applications.
System Administrators can customize the Apty Client according to the application's UI and personal preference. Admins can also add custom CSS in the Admin portal to create new themes. The chosen themes reflect on your application’s Workflows as well as the exported Workflows.
| PATH: Login to the Admin Portal > From the left side panel, select the application you want to work with>Customization>Themes |
By default, for any newly added application, there will be two themes available Apty Light and Apty Dark which cannot be customized by user instead user can create a copy of these themes and can modify those.
Create a New Theme
To create a new theme:
1. In the Customization Themes page, click the Create Theme button.
2. Enter your Theme Name in the input field.
3. Customize your newly added theme in the following sections:
- General
- Widget
- Customize using CSS
General
In the General customization section, you can customize the following properties for all your Apty Content:
Typography of Headings and Body:
- Font Color
- Font Family
- Font Size
- Links Color
For Dialogs, dialog shapes can be customized using:
- Fill Color
- Backdrop Color
- Border Radius
- Padding
- Arrow Size
Workflows can be customized using:
- Highlight Colors
For buttons, primary, secondary buttons, and button shapes can be customized using:
- Font Color
- Fill Color
- Padding
- Border Radius
Launchers can be customized using:
- Launcher Icon
- Fill Color
- Size
Tooltips can be customized using:
- Tooltip Icon
- Fill Color
- Size
Validations can be customized based on:
- Icon size- for Indicator and Balloon
- For Untouched, Success and Failure icons customization can be done by using icon type and fill color.
Usually, color customization is done by selecting the color from either palette using hex code, also any changes made can be seen live in the Preview section.
Apty Client
The Apty Client(also known as the Need Help? widget) header can be customized using:
- Font Color
- Font Family
- Font Size
- Background Color using solid color pallets and gradient
Apty Client body can be customized using:
- Font Color
- Font Family
- Font Size
- Background Color
- Display Icon
- Icon Color
Apty Client banner can be customized using:
- Position
- Background Color using solid and gradient color pallets
- Border Radius
- Margin
- Padding
Banner icon can be customized using:
- Icon
- Fill Color - Color of the icon
- Size
- Auto Rotate - Automatically rotates icon depending on the banner position
Banner label can be customized using:
- Font Color
- Font Family
- Font Size
Custom CSS
Admins can add custom CSS in the Admin portal to customize themes. You can add custom CSS to your Workflow balloon, Launcher, and Tooltip and view the effect simultaneously inside the preview window.
Once all the customizations are made, click the Update button to save the changes.
Set a Theme as Default
To create a default theme,
1. Click the vertical ellipsis on the themes tile.
2. Click Set as Default.
Once set, a Default tag appears on the theme tile.
|
Note: A theme that is set as default cannot be deleted. |
Make a Copy of the Theme
To create a copy of the theme,
1. Click the vertical ellipsis on the themes tile.
2. Click Make a Copy.
A copy of the same will be created with the same theme name along with "_copy(x)" added to it.
Copy a theme from one application to another
Use the Copy To option to replicate a theme from one application to another without having to recreate it each time in the Admin Portal.
Delete a Theme
To delete a theme,
1. Click the vertical ellipsis on the themes tile.
2. Click Delete.
3. Click Confirm to confirm the deletion.