Themes (Version 4.x)

Apty Assist offers seamless integration into hosting web application in terms of functionality, as well as it is highly customizable visually so that instructional and navigational elements look and feel as they are a natural part of the design of the hosting application.

System Administrators can customize the Player according to the application's UI and/or personal preference.

Admins can add custom CSS as well as create new themes in the Admin portal. The newly created themes and customized CSS reflect in the application’s workflows and are applied to the exported workflows as well.

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

On the following page that appears, the user can name the theme inside the Theme Name field and can customize themes for

•  General
•  Widget
• Customize using CSS

General 

User can customize the following properties for 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.

Widget

Widget header can be customized using:

• Font Color 
• Font Family
• Font Size 
• Background Color 

Widget body can be customized using:

• Font Color
• Font Family 
• Font Size 
• Background Color
• Display Icon
• Icon Color

Banner can be customized using:

• Position
• Background Color 
• Border Radius
• Margin
• Padding

Banner icon can be customized using:

• Icon 
• Fill Color
• Size

Banner label can be customized using:

• Font Color
• Font Family
• Font Size

Custom CSS

Admins can add custom CSS as well as create new themes in the Admin portal. The newly created themes and customized CSS reflect in the application’s Workflow, Launcher, and Tooltip. Any changes made for  Workflow, Launcher and Tooltip can be viewed simultaneously inside the preview window.

Set a theme as Default

User can set any created theme as default by clicking on the (three vertical dots) icon provided on the top-right corner of each themes tile, click on Set as Default option; Once set, a Default tag appears on that theme. A theme that is set as default cannot be deleted.

Make a copy of the theme

User can make copies of a theme by clicking on the (three vertical dots) icon provided on the top-right corner of each themes tile, selecting Make a Copy option; A copy of the  same will be created with the same theme name along with "_copy" 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, click on the (three vertical dots) icon provided on the top-right corner of each themes tile and click on Delete option.

On the following page that appears, click Confirm to confirm the deletion.