Configuration

Importing and Initializing the SDK

After obtaining your API keys, you can import the SDK into your application. The TemplateBuilder component is the core part of this SDK, which allows you to edit and render templates.

Example:

The following example demonstrates minimalist usage of the TemplateBuilder component. For a more comprehensive integration, refer to the detailed integration example provided later in this guide.

import TemplateBuilder from '@openlettermarketing/olc-react-sdk';

const templateBuilderProps = {
  container: document.getElementById('element-id'),
  secretKey: 'your-secret-key',
  publicApiKey: 'your-api-key',
  platformName: 'Your Platform Name',
  createTemplateRoute: '/create-template',
  templateBuilderRoute: '/edit-template',
  olcTemplate: yourTemplateObject,
  sandbox: true,
  onReturnAndNavigate () {
    // TODO: Define what happens when the user returns and navigates.
  },
  async onGetOneTemplate (payload) => {
    // TODO: Fetch a specific template.
  },
  async onGetTemplates (payload) => {
    // TODO: Fetch all templates.
  },
  async onGetCustomFields () => {
    // TODO: Fetch custom fields for the templates.
  },
  async onSubmit (payload) => {
    // TODO: Handle the submission of a template.
  },
  styles: {
    root: {
      // Custom CSS properties for the root element.
    },
  },
};

TemplateBuilder(templateBuilderProps);

Configuration through Props:

The SDK uses several properties to manage its behavior. Below is a breakdown of key props:

Prop name	Type	Description	Required	Example / Usage
container	HTMLDivElement	An HTML DOM element to render the template builder component.	✓	document.getElementById('template-builder-container')
secretKey	string	That key is used to communicate Polotno Editor (Builder) with API requests.	✓	'your-secret-key'
publicApiKey	string	publicApiKey is used for basic authentication between the OLC and the client platform.	✓	'your-api-key'
platformName	string	The name of your platform.	⤫	'My App'
createTemplateRoute	string	The route/path for creating new templates. (begins with slash /)	⤫	'/create-template'
templateBuilderRoute	string	The route/path for editing existing templates. (begins with slash /)	⤫	'/edit-template'
olcTemplate	object	The template object to be edited or used as a base.	⤫	{ ... }
sandbox	boolean	The sandbox setting can be either true or false. Set to true for demo purposes and false for production.	⤫	true
templateGalleryModal	boolean	The templateGalleryModal setting can be either true or false. Set to true for modal view and false for sidebar template gallery.	⤫	true
designerQueryAmount	number	The designerQueryAmount prop is used in the "Hire a Designer" card within the template gallery section to display the specified amount.	⤫	25
allowedAddOns	string[ ]	The allowedAddOns prop lets you specify which add-ons appear in the add-ons section by providing their keys as an array of strings. You can add or remove add-ons as needed by updating this array.	⤫	['property_offer','gsv']
allowSenderFields	boolean	The allowSenderFields prop can be set to either true or false. When set to true, it makes the sender fields visible in the custom fields section.	⤫	true
allowPropertyFields	boolean	The allowPropertyFields prop can be set to either true or false. When set to true, it makes the property fields visible in the custom fields section.	⤫	true
allowedTemplateSections	string[ ]	The allowedTemplateSections prop lets you control which sections appear in the template gallery by adding or removing them as needed.	⤫	['my_templates', 'team_templates']
restrictedProducts	number[]	The restrictedProducts prop filters products on the product selection screen, allowing you to show or hide products as needed. Simply include the product IDs in the array to filter out specific products.	⤫	[9, 11, 13]
excludedFields	string[ ]	The excludedFields prop allows you to remove specific fields from the custom fields section by their key	⤫	['{{C.EMAIL}}','{{SPF.LAST_NAME}}']
templateGalleryModal	boolean	The templateGalleryModal prop can be set to either true or false. When set to false, it disables the template gallery modal and activates the sidebar gallery in the template builder.	⤫	true
onReturnAndNavigate	function	An event which triggers when a user navigates away.	⤫	onReturnAndNavigate () { ... }
onGetOneTemplate	function	An event which triggers when fetching a specific template.	⤫	onGetOneTemplate ( payload ) { ... }
onGetTemplates	function	An event which triggers when fetching all templates.	⤫	onGetTemplates ( payload ) { ... }
onGetCustomFields	function	An event which triggers when fetching custom fields for templates.	⤫	onGetCustomFields () { ... }
onSubmit	function	An event which triggers upon template submission.	⤫	onSubmit () { ... }
destroy	function	An event that destroys the template builder instance and cleans up all associated components and cache. Call this function when unmounting the template builder component to ensure proper cleanup and avoid memory leaks.	⤫	templateBuilderInstance.destroy()
styles	object	An object of JSS props for customize styling of template builder.	⤫	{ root: { ... } }