Customizations
This article describes how to customize the Actito Web SDK to better suit your application’s integration and configuration needs.
Configuring Through Code
Instead of relying on the actito-services.json configuration file, you can configure the SDK programmatically. This approach is useful when you want to manage the application keys dynamically.
To configure Actito through code, call the configure() function before any other interaction with the SDK:
import { configure } from 'actito-web/core'
configure({
applicationKey: '{{ YOUR_APPLICATION_KEY }}',
applicationSecret: '{{ YOUR_APPLICATION_SECRET }}',
});
The configure() function accepts the same parameters as the actito-services.json file. It must be invoked before calling launch() to ensure that the correct credentials are applied during initialization.
Once you configure the SDK programmatically, the actito-services.json file is no longer required and can be safely removed from your project.
Configuration Options
Both the configure() function and the actito-services.json file accept the same configuration object. The list below outlines each available property and its requirements.
applicationKey required
The unique application key assigned to your project. It will be provided by Actito.
applicationSecret required
The secret key associated with your application. It will also be provided by Actito.
applicationVersion
Defines your application’s version (for example, 1.0.0). This value is registered with the device and can be used to manage upgrades or version-based targeting.
language
Specifies the language of your website. This setting is primarily used for the managed Push onboarding UI to deliver localized content. The value must match one of the languages configured in the dashboard.
Example: actito-services.json
Below is an example of a minimal configuration file that can be included at the root of your web project:
{
"applicationKey": "YOUR_APPLICATION_KEY",
"applicationSecret": "YOUR_APPLICATION_SECRET",
"applicationVersion": "1.0.0",
"language": "en"
}
This configuration file is automatically loaded by the SDK during initialization. If you prefer to set these options programmatically, use the same structure with the configure() function:
import { configure } from 'actito-web/core'
configure({
applicationKey: 'YOUR_APPLICATION_KEY',
applicationSecret: 'YOUR_APPLICATION_SECRET',
applicationVersion: '1.0.0',
language: 'en'
});
Override Default Theme
By default, the SDK’s UI components automatically adapt to the user’s system appearance settings (light or dark mode). If you want to enforce a specific theme across your application, you can override this behavior using the data-actito-theme attribute on the root <html> element.
<html data-actito-theme="light">
<!-- Application content -->
</html>
Valid values are:
light— forces light modedark— forces dark mode
This setting applies to all SDK-managed UI elements, such as modals and notification prompts, ensuring a consistent appearance throughout your application.