User Customization

Configure user-specific settings including name, custom fonts, signatures, initials, and default font preferences.

userName

Set the user name that appears as the author of annotations and comments. This name is stored in SlOptions.UserName.

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userName: 'John Doe',
});
Copy

This name appears in:

• Annotation author fields
• Comment metadata
• Document history logs

userFonts

Register custom fonts from Google Fonts API or other font sources. See sdk.IUserFont interface.

Google Fonts Format

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userFonts: [
    {
      category: 'sans-serif',
      family: 'Roboto',
      files: {
        '400': 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf',
        '700': 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlvAw.ttf',
        '400italic': 'https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu52xP.ttf',
      },
      kind: 'webfonts#webfont',
      lastModified: '2021-03-31',
      menu: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf',
      subsets: ['latin', 'latin-ext'],
      variants: ['regular', 'bold', 'italic'],
      version: 'v30',
    },
  ],
});
Copy

Font File Keys

Available file keys for font variants:

type fileKeys =
  | '100'
  | '200'
  | '300'
  | '400'
  | '500'
  | '600'
  | '700'
  | '800'
  | '900'
  | '100italic'
  | '200italic'
  | '300italic'
  | '400italic'
  | '500italic'
  | '600italic'
  | '700italic'
  | '800italic'
  | '900italic'
  | 'italic'
  | 'bold'
  | 'regular';
Copy

Font Variants

Font variant types:

// Regular variants
type fontRegularVariants = 'regular' | 'Regular' | 'plain' | 'normal' | 'medium' | '400' | '500';

// Bold variants
type fontBoldVariants = 'bold' | 'heavy' | 'black' | 'extraBold' | 'demiBold' | 'semiBold' | '600' | '700' | '800' | '900';

// Italic variants
type fontItalicVariants =
  | 'italic'
  | 'Italic'
  | 'oblique'
  | 'slanted'
  | '100italic'
  | '200italic'
  | '300italic'
  | '400italic'
  | '500italic'
  | '600italic';

// Bold italic variants
type fontBoldItalicVariants =
  | 'Bold Italic'
  | 'Heavy Italic'
  | 'Black Italic'
  | 'ExtraBold Italic'
  | 'DemiBold Italic'
  | 'SemiBold Italic'
  | 'BoldItalic'
  | 'boldItalic'
  | '700italic'
  | '800italic'
  | '900italic';
Copy

defaultFont

Set the default font family and size for text annotations and form fields. See index.IDefaultFontConfig.

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  defaultFont: {
    family: 'Helvetica', // Default: 'Helvetica'
    size: 12, // Default: 12
  },
});
Copy

Default values:

• family: 'Helvetica'
• size: 12

userSignature

Provide predefined signature appearances for the user. See index.AppearanceModel[].

AppearanceModel Structure

interface AppearanceModel {
  signimage: FillSignSignatureFieldCreateParams;
  timestamp: number;
  type: AppearanceDataType;
  preview?: string;
  appearanceType: AppearanceType;
  id?: string;
}

interface FillSignSignatureFieldCreateParams {
  path: string; // Image path or data
  ext: string; // File extension (e.g., 'png', 'jpg')
  img?: any; // Optional image data
  originalImgData?: string; // Optional original image data
}

enum AppearanceDataType {
  Draw, // 0 - Drawn signature
  Type, // 1 - Typed signature
  Image, // 2 - Image signature
}

enum AppearanceType {
  Signature = 'signature',
  Initials = 'initials',
  SIGNER_NAME = 'signer-name',
  SIGNING_DATE = 'signing-date',
}
Copy

Signature Example

import { PdfEditor, AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userSignature: [
    {
      signimage: {
        path: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Image,
      preview: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
      appearanceType: AppearanceType.Signature,
      id: 'sig-1',
    },
  ],
});
Copy

Multiple Signatures

import { PdfEditor, AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userSignature: [
    {
      signimage: {
        path: '/signatures/formal.png',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Image,
      appearanceType: AppearanceType.Signature,
      id: 'sig-formal',
    },
    {
      signimage: {
        path: '/signatures/casual.png',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Draw,
      appearanceType: AppearanceType.Signature,
      id: 'sig-casual',
    },
  ],
});
Copy

userInitial

Provide predefined initial appearances for the user. Uses the same index.AppearanceModel[] structure as signatures.

import { PdfEditor, AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userInitial: [
    {
      signimage: {
        path: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Image,
      appearanceType: AppearanceType.Initials,
      id: 'initial-1',
    },
    {
      signimage: {
        path: '/initials/jd-cursive.png',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Draw,
      appearanceType: AppearanceType.Initials,
      id: 'initial-2',
    },
  ],
});
Copy

Dynamic Updates

Update User Name

const viewer = editor.ui.pdfWebElement;

viewer.setUserName('Jane Smith');
Copy

Update Default Font

const viewer = editor.ui.pdfWebElement;

viewer.setUserDefaultFont({
  family: 'Arial',
  size: 14,
});
Copy

Add User Fonts at Runtime

const viewer = editor.ui.pdfWebElement;

viewer.setUserFonts([
  {
    category: 'serif',
    family: 'Merriweather',
    files: {
      '400': 'https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZM.ttf',
      '700': 'https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZVcf6.ttf',
    },
    kind: 'webfonts#webfont',
    lastModified: '2021-09-22',
    menu: 'https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZM.ttf',
    subsets: ['latin'],
    variants: ['regular', 'bold'],
    version: 'v30',
  },
]);
Copy

Update Signatures

import { AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const viewer = editor.ui.pdfWebElement;

viewer.setUserSignature([
  {
    signimage: {
      path: 'data:image/png;base64,NEW_SIGNATURE_DATA...',
      ext: 'png',
    },
    timestamp: Date.now(),
    type: AppearanceDataType.Image,
    appearanceType: AppearanceType.Signature,
    id: 'sig-updated',
  },
]);
Copy

Update Initials

import { AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const viewer = editor.ui.pdfWebElement;

viewer.setUserInitial([
  {
    signimage: {
      path: '/initials/new-initial.png',
      ext: 'png',
    },
    timestamp: Date.now(),
    type: AppearanceDataType.Draw,
    appearanceType: AppearanceType.Initials,
    id: 'initial-new',
  },
]);
Copy

Apply Signature to Field

Apply a signature appearance directly to a signature field:

import { AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const viewer = editor.ui.pdfWebElement;

viewer.applyUserAppearance({
  path: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
  ext: 'png',
});
Copy

Complete User Customization Example

import { PdfEditor, AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),

  // User identity
  userName: 'John Doe',

  // Default font
  defaultFont: {
    family: 'Helvetica',
    size: 12,
  },

  // Custom Google Fonts
  userFonts: [
    {
      category: 'sans-serif',
      family: 'Open Sans',
      files: {
        '400': 'https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf',
        '700': 'https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf',
      },
      kind: 'webfonts#webfont',
      lastModified: '2023-04-19',
      menu: 'https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf',
      subsets: ['latin', 'latin-ext'],
      variants: ['regular', 'bold'],
      version: 'v34',
    },
  ],

  // User signatures
  userSignature: [
    {
      signimage: {
        path: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Image,
      preview: 'data:image/png;base64,iVBORw0KGgoAAAANS...',
      appearanceType: AppearanceType.Signature,
      id: 'sig-formal',
    },
    {
      signimage: {
        path: '/signatures/casual.png',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Draw,
      appearanceType: AppearanceType.Signature,
      id: 'sig-casual',
    },
  ],

  // User initials
  userInitial: [
    {
      signimage: {
        path: '/initials/jd.png',
        ext: 'png',
      },
      timestamp: Date.now(),
      type: AppearanceDataType.Image,
      appearanceType: AppearanceType.Initials,
      id: 'initial-1',
    },
  ],
});
Copy

Loading User Preferences from Storage

Restore user preferences from localStorage or a database:

import { PdfEditor, AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

// Load saved preferences
const userPrefs = JSON.parse(localStorage.getItem('pdfUserPrefs') || '{}');

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  userName: userPrefs.userName || 'Anonymous',
  defaultFont: userPrefs.defaultFont || { family: 'Helvetica', size: 12 },
  userSignature: userPrefs.signatures || [],
  userInitial: userPrefs.initials || [],
});
Copy

Reference

• index.IDefaultFontConfig - Default font configuration interface
• sdk.IUserFont - Custom font interface
• index.AppearanceModel - Signature/initial appearance interface
• index.FillSignSignatureFieldCreateParams - Signature field parameters
• index.IDocumentViewerWrapperElement.setUserName - Update user name dynamically
• index.IDocumentViewerWrapperElement.setUserFonts - Add custom fonts dynamically
• index.IDocumentViewerWrapperElement.setUserDefaultFont - Update default font dynamically
• index.IDocumentViewerWrapperElement.setUserSignature - Update signatures dynamically
• index.IDocumentViewerWrapperElement.setUserInitial - Update initials dynamically
• index.IDocumentViewerWrapperElement.applyUserAppearance - Apply signature to field