Customization and Styling

The OLC React SDK allows for extensive customization of the template builder’s appearance. You can customize various properties to ensure that the template builder aligns with your application's branding and user experience.

Customizable Properties

Property Name	Description	Default Value
primary-color	The main color used throughout the template builder interface.	'#fb8500'
secondary-color	The secondary color used for accents and highlights within the builder.	'red'
text-color	The default color for text displayed within the template builder.	'#fff'
error-color	The color used to indicate errors within the builder.	'#ff0000'
border-color	The color used to border within the builder.	'rgba(0, 0, 0, 0.5)'
notification-text-color	The color used for notification messages.	'#fff'
notification-background-xolor	The background color of notification messages.	'#EF7820'
modal-background-color	The background color of modal dialogs.	'#fff'
font-family	The font family used for text within the template builder.	'Inter'
scrollbar-track-color	The color of the scrollbar track in the template builder.	'grey'
scrollbar-thumb-color	The color of the scrollbar thumb in the template builder.	'#fb8500'
svg-color-not-active	The color used for not active SVG icons in the builder.	'purple'
svg-color	The color used for SVG icons in the builder.	'#ffb703'

Example of Usage

const templateBuilderProps = {
  container: document.getElementById("template-builder-container"),
  secretKey: "your-secret-key",
  publicApiKey: "your-api-key",
  platformName: "Your Platform Name",
  sandbox: true,
  customStyles: {
    root: {
      "--scrollbar-thumb-color": "#A0A0A0",
      "--scrollbar-track-color": "#E0E0E0",
      "--primary-color": "#6C23EE",
      "--secondary-color": "#EAE4FF",
      "--svg-color": "#6C23EE",
      "--svg-color-not-active": "#6C23EE",
      "--border-color": "#6C23EE",
      "--notification-background-color": "#6C23EE",
      "--modal-background-color": "#fff",
    },
  },
};