Integration Guide

OLC React SDK Integration Guide

Introduction

The OLC React SDK allows developers to integrate a customizable template builder into their applications. This guide provides step-by-step instructions to help you install, configure, and use the SDK.

1. Installation

Start by installing the OLC React SDK via npm:// Some codenpm install @openlettermarketing/olc-react-sdk

npm install @openlettermarketing/olc-react-sdk

2. Importing and Initializing the SDK

After installation, import the SDK into your React application and configure the required properties to initialize the TemplateBuilder component.

Example:

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

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

TemplateBuilder(templateBuilderProps);

3. Configuration through Props

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

• container: The HTML element where the template builder will be rendered.

• secretKey: A secure key required for Polotno API requests.

• basicAuthUsername & basicAuthPassword: Credentials for basic authentication.

• platformName (optional): The name of your platform.

• createTemplateRoute (optional): The route for creating new templates.

• templateBuilderRoute (optional): The route for editing existing templates.

• olcTemplate (optional): The template object to be edited or used as a base.

• onReturnAndNavigate (optional): A callback triggered when the user navigates away.

• onGetOneTemplate (optional): A function to fetch a specific template.

• onGetTemplates (optional): A function to fetch all templates.

• onGetCustomFields (optional): A function to fetch custom fields for templates.

• onSubmit (optional): A function triggered upon template submission.

• styles (optional): An object to apply custom CSS to the template builder.

4. API and Callbacks

The SDK’s API is designed to handle interactions within the template builder. Callback functions are provided for custom event handling:

• onReturnAndNavigate: Handles navigation away from the template builder.

• onGetOneTemplate: Fetches a specific template.

• onGetTemplates: Fetches all available templates.

• onGetCustomFields: Retrieves custom fields associated with the user/account.

• onSubmit: Processes the template submission.

5. API Integration

To integrate the SDK’s API, ensure that your backend securely communicates with the OLC backend, returning the necessary data to the SDK frontend.

6. Customization and Styling

The SDK allows for extensive customization of the template builder’s appearance. Use the styles prop to apply custom CSS properties and match the look and feel of your application.

7. Example Usage

Below is an example of how to use the SDK within a React component:

import { useEffect } from 'react';
import TemplateBuilder from '@openlettermarketing/olc-react-sdk';
import '@blueprintjs/core/lib/css/blueprint.css';

function App() {
  useEffect(() => {
    TemplateBuilder({
      container: document.getElementById('template-builder-container'),
      secretKey: 'your-secret-key',
      basicAuthUsername: 'your-username',
      basicAuthPassword: 'your-password',
      onSubmit: async (payload) => {
        console.log('Template submitted:', payload);
        // Add your submission logic here
      },
    });
  }, []);

  return (
    <>
      <div id="template-builder-container"></div>
    </>
  );
}

export default App;