# Getting Started (/docs/guides/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 SDKs, or embed rich signing experiences inside your web application. We'll cover:
* [Verdocs JS SDK (@verdocs/js-sdk)](#verdocs-js-sdk-getting-started)
* [Verdocs Web Components SDK (@verdocs/web-sdk)](#verdocs-web-components-sdk-getting-started)
***
## Verdocs JS SDK: Getting Started [#verdocs-js-sdk-getting-started]
The [Verdocs JS SDK](/docs/reference/SDK/languages/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 [#1-installation]
Install using your package manager of choice:
```sh
npm install @verdocs/js-sdk
# or
yarn add @verdocs/js-sdk
# or
pnpm add @verdocs/js-sdk
```
### 2. Authentication [#2-authentication]
#### Standard User 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.
```ts
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-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:
```ts
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 [#3-using-the-sdk]
You’re now ready to work with the main Verdocs primitives!
**Templates:**
```typescript
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](https://github.com/Verdocs/js-sdk) for reference.
***
## Verdocs Web Components SDK: Getting Started [#verdocs-web-components-sdk-getting-started]
The [Verdocs Web Components SDK](/docs/reference/SDK/web) is a library of reusable, embeddable UI components (built using StencilJS) for signature flows, document previews, and more.
### 1. Installation [#1-installation-1]
Install the SDK and the framework-specific package you need (React, Angular, or plain JS):
**For React:**
```sh
npm install @verdocs/web-sdk-react
```
**For Angular:**
```sh
npm install @verdocs/web-sdk-angular
```
**For VueJS/Plain JS:**
```sh
npm install @verdocs/web-sdk-vue
```
### 2. Add Fonts [#2-add-fonts]
To match Verdocs visual style, add the Barlow font to your site's ``:
```html
```
### 3. Usage Examples [#3-usage-examples]
#### **React Example** [#react-example]
```tsx
import React from 'react';
import {VerdocsButton} from '@verdocs/web-sdk-react';
const MyComponent = () => {
return setInviting(true)} />
}
```
#### **Angular Example** [#angular-example]
Include the component in your module:
```typescript
import { ComponentLibraryModule } from '@verdocs/web-sdk-angular';
@NgModule({
imports: [ComponentLibraryModule],
})
export class AppModule {}
```
Use in a template:
```ts
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { VerdocsButton } from '@verdocs/web-sdk-angular';
@Component({
selector: 'app-verdocs-button-demo',
template: `
Verdocs Button Demo
{{ statusMessage }}
`,
})
export class VerdocsButtonDemoComponent implements AfterViewInit {
@ViewChild('primaryBtn', { read: ElementRef })
private primaryBtnRef?: ElementRef;
buttonLabel = 'Continue';
isDisabled = false;
statusMessage = 'Waiting for click...';
// Optional icon sample (string-based SVG)
startIconSvg = '';
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** [#vuejs-example]
```ts
```
For more information, you can visit the [Web SDK repository](https://github.com/Verdocs/web-sdk).
***
## Verdocs REST API [#verdocs-rest-api]
Our [REST API documentation](/docs/reference/Rest-API) will allow you to test any route in your browser.
***
**Questions or issues?** [Contact our support team](https://verdocs.com/contact) for a resolution.
Happy building!