Themes (Version 4.x)

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.

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

•  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.

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.

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.