Customize the "About" dialog and main menu with your company branding. The index.IBrandingConfig interface provides comprehensive control over brand identity within the PDF Web Viewer.
The branding configuration allows you to white-label the application with your company's identity.
Display your company logo in the main menu toggle:
import { PdfEditor } from '@avanquest/pdf-web-viewer';
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
logoSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#1976D2"/></svg>',
name: 'Acme Corporation',
links: [[{ label: 'Contact us', url: 'https://acme.com/contact' }]],
description: 'Custom PDF editor for Acme Corporation.',
},
});
Note: The logo must be a valid SVG string (24x24px recommended). Invalid SVG will fall back to the default menu icon.
Display a custom icon on the "Choose File" screen (the landing page shown when no document is open):
import { PdfEditor } from '@avanquest/pdf-web-viewer';
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
mainScreenSvg:
'<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112"><circle cx="56" cy="56" r="50" fill="#0048CE"/></svg>',
},
});
Note: The icon must be a valid SVG string. It is displayed centered above the "No document is open" title. If the SVG is invalid, an error notification is shown and the icon is not rendered.
Customize the application name shown in the About dialog:
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
name: 'Acme PDF Editor', // Default: 'PDF Web App'
},
});
Override the version string shown next to the name in the About dialog. When omitted, the viewer's own build version is displayed:
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
version: '2.4.1', // Rendered as "v2.4.1"; 'v2.4.1' works too
},
});
Note: The v prefix is added for you — a leading v in your string is stripped so the label never reads vv2.4.1.
Set the links shown at the bottom of the About dialog. links is a 2D array — each inner array is one row of links, rendered left to right. This lets you group links (e.g. a "Contact us" row above a legal row):
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
links: [
[{ label: 'Contact us', url: 'https://acme.com/support' }],
[
{ label: 'Privacy policy', url: 'https://acme.com/privacy' },
{ label: 'Terms of Use', url: 'https://acme.com/terms' },
{ label: 'EULA', url: 'https://acme.com/eula' },
],
],
},
});
Each link is an index.IBrandingLink with a label and a url. Only links with a valid HTTP(S) url are rendered; invalid URLs are dropped and an error notification is shown.
Default: a single row with one link — Contact us → https://developers.avanquest.com/contact-sales.
Customize the About dialog content using Markdown:
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
description: `
Acme PDF Editor is built for enterprise document management.
## Key Features
- Secure document editing
- Advanced collaboration tools
- Enterprise-grade encryption
- Custom workflow integration
## Built For
Legal, Finance, and HR departments handling sensitive documents.
***Need help? Contact our support team.***
`,
},
});
Markdown support:
## Heading → Title (styled with pwv-dialog-title class)**bold** → Bold text- item or * item → List items (styled with pwv-dialog-list class)***text*** → Call-to-action (styled with pwv-dialog-cta-message class)pwv-dialog-message class)Update branding after initialization:
// Initial setup
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
name: 'Initial Name',
logoSvg: '<svg>...</svg>',
},
});
// Get viewer element
const viewer = editor.ui.pdfWebElement;
// Update branding dynamically
viewer.setBranding({
name: 'Updated Company Name',
logoSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#FF6B35"/></svg>',
links: [[{ label: 'Contact us', url: 'https://updated.com/contact' }]],
description: 'Updated description content',
});
import { PdfEditor } from '@avanquest/pdf-web-viewer';
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
logoSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#004E89"/>
<text x="50" y="60" text-anchor="middle" fill="#FFF" font-size="30">AC</text>
</svg>`,
mainScreenSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112">
<circle cx="56" cy="56" r="50" fill="#004E89"/>
<text x="56" y="66" text-anchor="middle" fill="#FFF" font-size="40">AC</text>
</svg>`,
name: 'Acme Corporation PDF Suite',
links: [[{ label: 'Contact us', url: 'https://acme.com/support' }]],
description: `
Acme Corporation PDF Suite - Enterprise document management solution.
## Features
- Advanced security and compliance
- Real-time collaboration
- Cloud integration
- Audit trails and version control
## Support
Enterprise customers get 24/7 priority support.
***Need assistance? Contact our support team.***
`,
},
});
Remove Avanquest branding completely:
import { PdfEditor } from '@avanquest/pdf-web-viewer';
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
logoSvg: '<svg>...</svg>', // Your logo
name: 'Your Product Name',
links: [[{ label: 'Contact us', url: 'https://yourcompany.com/contact' }]],
description: `
Your Product Name - PDF editing solution.
## Your Features
- Your feature list here
***Your call-to-action here***
`,
},
});
import { PdfEditor } from '@avanquest/pdf-web-viewer';
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
logoSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#4CAF50" d="M12,2L2,7v10c0,5.55,3.84,10.74,9,12c5.16-1.26,9-6.45,9-12V7L12,2z"/>
</svg>`,
name: 'DocuFlow Pro',
links: [[{ label: 'Contact us', url: 'https://docuflow.com/help' }]],
description: `
DocuFlow Pro - Streamlined document workflows.
## Platform Features
- Cloud-native architecture
- API-first design
- Webhook integrations
- Audit logging
***Questions? Visit our help center.***
`,
},
});