Verdocs - Getting Started

Welcome to Verdocs! This guide will help you quickly get up and running with the Verdocs platform—whether you want to integrate via our APIs, use our public JavaScript SDKs, or embed rich signing experiences inside your web application. We'll cover:

Verdocs JS SDK (@verdocs/js-sdk)
Verdocs Web Components SDK (@verdocs/web-sdk)

Verdocs JS SDK: Getting Started

The Verdocs JS SDK provides type-safe, convenient access to the Verdocs API for both browser and NodeJS applications. Use this SDK to manage templates, documents, organizations, authentication, and more.

1. Installation

Install using your package manager of choice:

npm install @verdocs/js-sdk
# or
yarn add @verdocs/js-sdk
# or
pnpm add @verdocs/js-sdk

2. Authentication

Standard User Authentication

To authenticate as a standard user, present the user with a login form to enter their username and password, then use code such as shown below. NOTE: You may also embed the VerdocsAuth component in your Web application, and this is strongly recomended.

import {VerdocsEndpoint, authenticate} from '@verdocs/js-sdk';

const endpoint = VerdocsEndpoint.getDefault();
const authResult = await authenticate(endpoint, {
  grant_type: 'password',
  username: USER,
  password: PASS,
});
endpoint.setToken(authResult.access_token);

Server Application Authentication

Server applications should never "know" usernames and passwords. Instead, create an API key in your account, and securely store the Client ID and Secret in an appropriate location such as Vault, Secrets Manager, SSM, etc. Then use code such as the following to authenticate:

import {VerdocsEndpoint, authenticate} from '@verdocs/js-sdk';

const endpoint = VerdocsEndpoint.getDefault();
const authResult = await authenticate(endpoint, {
  grant_type: 'client_credentials',
  client_id: ID,
  client_secret: SECRET,
});
endpoint.setToken(authResult.access_token);

3. Using the SDK

You’re now ready to work with the main Verdocs primitives!

Templates:

import {VerdocsEndpoint, authenticate, getTemplates} from '@verdocs/js-sdk';
const endpoint = VerdocsEndpoint.getDefault();
const authResult = await authenticate(endpoint, {
  grant_type: 'client_credentials',
  client_id: ID,
  client_secret: SECRET,
});
endpoint.setToken(authResult.access_token);
const templates = await endpoint.getTemplates(endpoint);
templates.forEach((template) => {
  console.log('Template: ' + template.id + ' - ' + template.name);
});

See the JS SDK repository for reference.

Verdocs Web Components SDK: Getting Started

The Verdocs Web Components SDK is a library of reusable, embeddable UI components (built using StencilJS) for signature flows, document previews, and more.

1. Installation

Install the SDK and the framework-specific package you need (React, Angular, or plain JS):

For React:

npm install @verdocs/web-sdk-react

For Angular:

npm install @verdocs/web-sdk-angular

For VueJS/Plain JS:

npm install @verdocs/web-sdk-vue

2. Add Fonts

To match Verdocs visual style, add the Barlow font to your site's <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap" rel="stylesheet">

3. Usage Examples

React Example

import React from 'react';
import {VerdocsButton} from '@verdocs/web-sdk-react';

const MyComponent = () => {
  return <VerdocsButton size="small" label="Invite New Member" onClick={() => setInviting(true)} />
}

Angular Example

Include the component in your module:

import { ComponentLibraryModule } from '@verdocs/web-sdk-angular';
@NgModule({
  imports: [ComponentLibraryModule],
})
export class AppModule {}

Use in a template:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { VerdocsButton } from '@verdocs/web-sdk-angular';

@Component({
  selector: 'app-verdocs-button-demo',
  template: `
    <section class="button-demo">
      <h2>Verdocs Button Demo</h2>

      <verdocs-button
        #primaryBtn
        [label]="buttonLabel"
        [size]="'normal'"
        [variant]="'standard'"
        [type]="'button'"
        [disabled]="isDisabled"
        [startIcon]="startIconSvg"
        (click)="handleClick()"
      ></verdocs-button>

      <p>{{ statusMessage }}</p>
    </section>
  `,
})
export class VerdocsButtonDemoComponent implements AfterViewInit {
  @ViewChild('primaryBtn', { read: ElementRef })
  private primaryBtnRef?: ElementRef<VerdocsButton>;

  buttonLabel = 'Continue';
  isDisabled = false;
  statusMessage = 'Waiting for click...';

  // Optional icon sample (string-based SVG)
  startIconSvg = '<svg viewBox="0 0 24 24"><path d="M12 2v20"/></svg>';

  ngAfterViewInit(): void {
    // Accessing the underlying web component instance (typed as VerdocsButton)
    const buttonEl = this.primaryBtnRef?.nativeElement;
    if (buttonEl) {
      // Example of setting prop programmatically
      buttonEl.label = 'Continue';
    }
  }

  handleClick = (): void => {
    this.statusMessage = 'Button clicked!';
  };
}

Vue.js Example

<!-- MyComponent.vue -->
<template>
  <VerdocsButton
    size="small"
    label="Invite New Member"
    @click="setInviting(true)"
  />
</template>

<script setup>
import { ref } from 'vue';
import { VerdocsButton } from '@verdocs/web-sdk-vue';

const inviting = ref(false);

function setInviting(value) {
  inviting.value = value;
}
</script>

For more information, you can visit the Web SDK repository.

Verdocs REST API

Our REST API documentation will allow you to test any route in your browser.

Questions or issues? Contact our support team for a resolution.

Happy building!

Getting Started

On this page