DragXcel Logo
Log inGet Started

Developer Guide: API & SDK

PRO

Complete step-by-step documentation to connect your database, utilize the NPM SDK React components, or use the raw REST APIs to automate certificate generation and sending headlessly.

The DragXcel Flow

1

Configure Bridge

Expose database API endpoint

2

Map Template

Bind tokens like {{Name}}

3

Filter Data

Select recipient conditions

4

SMTP Send

Bulk render & send emails

DragXcel never stores your data.
Your records are processed one at a time in memory during certificate generation and are wiped immediately after sending. DragXcel only stores your column structure — never the actual data.

What DragXcel StoresWhat DragXcel Never Stores
Column names onlyActual row data
Certificate template designYour database credentials
API KeysPersonal information of recipients
SMTP config (encrypted)Emails or names after sending

Secure Your Endpoint — 3 Layers of Protection

Implement these 3 layers on your own server to ensure your endpoint cannot be accessed by anyone except DragXcel.

Layer 1 — Validate the Protection Key on your server

Every request DragXcel makes to your endpoint includes your Protection Key as the x-dragxcel-token header. Reject any request that does not include it.

Express Example:
app.get('/api/students', async (req, res) => {
  const token = req.headers['x-dragxcel-token']

  if (!token || token !== process.env.DRAGXCEL_PROTECTION_KEY) {
    return res.status(403).json({ error: 'Forbidden' })
  }

  const data = await db.collection('students').find().toArray()
  res.json(data)
})

Layer 2 — Return Only the Columns You Need

Never expose your full database record. Only return the columns that DragXcel needs for certificate generation.

⚠️ Warning: Never include passwords, payment information, internal IDs, or any sensitive fields in your endpoint response.

Layer 3 — IP Whitelisting (Recommended for Production)

For maximum security, whitelist only DragXcel's server IP addresses on your firewall or hosting provider.

Choose the integration path that matches your stack.

The dragxcel-sdk provides 4 ready-made UI components that handle the entire certificate automation workflow. Install the package, drop the buttons into your page, and they coordinate automatically via localStorage. No custom backend routes or local state providers needed.

A. Install Package

bash
npm install dragxcel-sdk

B. React Dashboard Implementation

Below is a full dashboard implementation that fetches participants from your server and feeds them to the SDK:

jsx
import React, { useEffect, useState } from 'react';
import {
  ConnectDataButton,
  FilterDataButton,
  MapCertificateButton,
  SendCertificatesButton
} from 'dragxcel-sdk';

export default function Dashboard() {
  const [participants, setParticipants] = useState([]);

  // Fetch local participants from your application's database
  useEffect(() => {
    fetch('/api/participants')
      .then(res => res.json())
      .then(data => setParticipants(data))
      .catch(err => console.error("Failed to load data", err));
  }, []);

  return (
    <div style={{ padding: '30px', fontFamily: 'sans-serif' }}>
      <h1>DragXcel Certificate Dashboard</h1>
      
      <div style={{ display: 'flex', gap: '16px', marginTop: '20px' }}>
        {/* Pass your API-fetched data as fallbackData */}
        <ConnectDataButton fallbackData={participants} baseUrl="https://dragxcel.in" />
        
        <FilterDataButton />
        
        <MapCertificateButton baseUrl="https://dragxcel.in" />
        
        <SendCertificatesButton baseUrl="https://dragxcel.in" />
      </div>
    </div>
  );
}

C. Detailed Code Walkthrough

1. Component Imports

We import the 4 pre-built buttons from dragxcel-sdk alongside standard React state hooks.

2. Ingesting State

We declare a participants state to cache our local records fetched from the database on initial mount.

3. ConnectDataButton Config

Receives fallbackData to hold the student list. When clicked, it opens a modal requesting the User-End and Protection Keys, saving records to local storage.

4. FilterDataButton Config

Reads the cached records directly from browser memory. Displays a GUI rule builder allowing users to set qualification filters.

5. MapCertificateButton Config

Uses the Server-End key to request your canvas schema from DragXcel, verifying where tokens (e.g. {Name}) match local data columns.

6. SendCertificatesButton Config

The final trigger wizard. Collects SMTP details, maps final templates, triggers the bulk render worker, and streams progress.

D. Behind the Scenes: LocalStorage Sync

The buttons share records and session details via the browser window's localStorage keys:

dxl_raw_data / dxl_columnsLocal dataset cached from backend
dxl_filtered_data / dxl_filtersFiltered list of students and configurations
dxl_server_key / dxl_templateVisual designs and backend security tokens
dxl_user_key / dxl_protection_keyWorkspace data bridge sync authorizations

E. Complete Component API Reference

1. <ConnectDataButton />

Prompts for User-End Keys and caches the participants dataset.

Props:
  • fallbackData (Array<Object>, optional): Backup list of participants for sandbox/local testing.
  • baseUrl (String, default: "https://dragxcel.in"): Host target to resolve key validation.
Internal States:

Toggles modal view (isOpen), tracks text input fields (userKey, protectionKey), and manages status feedback message.

LocalStorage Writes:

Saves credentials (dxl_user_key, dxl_protection_key), columns headers list (dxl_columns), and full student records cache (dxl_raw_data).

2. <FilterDataButton />

Provides a client-side filter engine to select qualified participants.

Props:

None. Reads directly from cached localStorage records.

Internal States:

Stores active filter rules configurations (rules), logical operation operator (logic: AND/OR), and filters badge count.

LocalStorage Writes:

Saves filtered records (dxl_filtered_data) and active rules schema (dxl_filters).

3. <MapCertificateButton />

Authenticates template mapping structure from the DragXcel server.

Props:
  • baseUrl (String): Gateway URL for templates retrieval.
Internal States:

Stores Server-End Key input string (serverKey) and handles credential confirmation validation.

LocalStorage Writes:

Saves template design token keys list (dxl_template) and server authentication key (dxl_server_key).

4. <SendCertificatesButton />

SMTP configuration wizard, recipient toggling, test sending, and bulk job dispatcher.

Props:
  • baseUrl (String): Server URL pointing to the bulk worker API routes.
Internal States:
  • step (Number: 1 to 4): Active wizard flow step.
  • smtpAccounts (Array): List of email accounts and passwords used for delivery load-balancing.
  • selectedIndices (Set): Set of checked indices targeting selected students.
  • jobId (String) & progress (Number): Progress streaming identifiers.
LocalStorage Interactions:

Reads datasets and templates. Wipes dxl_filtered_data from the client cache upon completion.

React SDK Integration Best Practices
  • DO ensure placeholder tags in the editor (e.g. {Name}) match keys in the local dataset exactly.
  • DO use App-Specific Passwords for SMTP delivery configuration to keep credentials secure.
  • DON'T hardcode key credentials directly in React files. Let the SDK modals handle operator inputs.
  • DON'T close the browser tab while the progress bar in the Send wizard is processing bulk deliveries.

Need help integrating the SDK or API? Contact Support