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',
contactUsUrl: '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'
},
});
Set a custom URL for the "Contact Us" link in the About dialog:
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY',
container: document.getElementById('pdf-container'),
brandingConfig: {
contactUsUrl: 'https://acme.com/support', // Must be valid HTTP(S) URL
},
});
Default: 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>',
contactUsUrl: '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',
contactUsUrl: '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',
contactUsUrl: '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',
contactUsUrl: '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.***
`,
},
});