> For the complete documentation index, see [llms.txt](https://documentation.akowe.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.akowe.app/documentation/readme.md).

# 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:

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

***

### 2. Initialize the SDK

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

```html
<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.

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

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

Example output:

```json
{
  "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

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

Example `demoTemplate`:

```js
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:

```html
<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:

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

***

### 8. Full Example

```html
<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>
```

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://documentation.akowe.app/documentation/readme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.