SDK Documentation

The Akowe Template SDK allows you to design and edit certificate templates directly in your application using a drag-and-drop editor. Once a template is created or edited, you can easily pass the resulting data to the Template Create or Template Edit API endpoints.

1. Installation

Include the SDK script in your HTML file:

<script src="https://issuance.akowe.app/sdk"></script>

2. Initialize the SDK

Create a new instance of CertificateSDK with lifecycle callbacks for handling events.

<script>
  const certApp = new CertificateSDK({
    onLoad: (res) => {
      console.log("SDK Loaded:", res);
    },
    onCreateCompleted: (data) => {
      console.log("New template created:", data);
      // Send this `data` to your Template Create API
    },
    onEditCompleted: (data) => {
      console.log("Template edited:", data);
      // Send this `data` to your Template Edit API
    },
    onClose: () => {
      console.log("Modal closed");
      // Call this when after a successful request to template Create or Edit endpoint
    },
    onError: (err) => {
      console.error("SDK error:", err);
    }
  });
</script>

3. Create a New Template

To allow a user to design a new certificate template, call the createTemplate() method. This will open the drag-and-drop editor in a modal.

<button onclick="certApp.createTemplate()">Create Template</button>

✅ When the user saves the design, the onCreateCompleted callback returns the final template JSON.

Example output:

{
  "name": "My New Template",
  "imageUrl": "https://domain.com/template-background.jpg",
  "fields": [
    {
      "type": "name",
      "text": "Full Name",
      "x": 50,
      "y": 40,
      "fontSize": 16,
      "fontFamily": "Arial",
      "color": "#000000",
      "alignment": "center"
    }
  ],
  "dimensions": { "width": 1920, "height": 1080 }
}

You can then send this JSON to the Template Create API endpoint.

4. Edit an Existing Template

To load and edit a previously saved template, call editTemplate(templateObject) with the template JSON you want to edit. You can get templates by utilizing the Get Template endpoint

<button onclick="certApp.editTemplate(demoTemplate)">Edit Template</button>

Example demoTemplate:

const demoTemplate = {
  id: "99be58b7-57a4-4cc7-8b64-37f3d72784c0",
  name: "Demo",
  imageUrl: "https://cdn.example.com/templates/demo-bg.jpg",
  fields: [
    { type: "name", text: "Display Name", x: 50, y: 40, fontSize: 16 },
    { type: "date", text: "Issue Date", x: 50, y: 50, fontSize: 16 },
    { type: "qr", text: "QR Code", x: 50, y: 70, fontSize: 50 }
  ],
  dimensions: { width: 2560, height: 1920 }
};

✅ When editing is complete, the onEditCompleted callback provides the updated template JSON. You can then send this to the Template Edit API endpoint.

5. Closing the Modal

You can programmatically close the editor modal with:

<button onclick="certApp.close()">Close Modal</button>

The onClose callback will be triggered when the modal is closed.

6. Typical Workflow

  1. User clicks Create Template → designs template → result JSON returned via onCreateCompleted.

  2. You send the result JSON to your backend via the Template Create API.

  3. Later, user clicks Edit Template → loads existing template JSON → edits and saves → updated JSON returned via onEditCompleted.

  4. You send the updated JSON to the Template Edit API.

7. Error Handling

The SDK may throw errors (e.g., missing container, invalid template object). Always handle them with the onError callback:

onError: (err) => {
  console.error("Error in SDK:", err.message);
}

8. Full Example

<html>
  <head>
    <script src="http://localhost:4003/sdk"></script>
  </head>
  <body>
    <script>
      const demoTemplate = {
        id: "99be58b7-57a4-4cc7-8b64-37f3d72784c0",
        name: "Demo",
        imageUrl: "https://cdn.example.com/templates/demo-bg.jpg",
        fields: [
          { type: "name", text: "Display Name", x: 50, y: 40, fontSize: 16 },
          { type: "date", text: "Issue Date", x: 50, y: 50, fontSize: 16 },
          { type: "qr", text: "QR", x: 50, y: 70, fontSize: 50 }
        ],
        dimensions: { width: 2560, height: 1920 }
      };

      const certApp = new CertificateSDK({
        onCreateCompleted: (data) => {
          console.log("Send this to Template Create API:", data);
        },
        onEditCompleted: (data) => {
          console.log("Send this to Template Edit API:", data);
        },
        onError: (err) => {
          console.error("SDK error:", err);
        },
        onClose: () => {
          console.log("Modal closed");
          // Call this when after a successful request to template Create or Edit endpoint
        },
      });
    </script>

    <button onclick="certApp.createTemplate()">Create Template</button>
    <button onclick="certApp.editTemplate(demoTemplate)">Edit Template</button>
    <button onclick="certApp.close()">Close Modal</button>
  </body>
</html>

Last updated