Skip to main content

​
Customization & Theming

The Dataspike Web SDK can be fully customized to align with your product’s look and feel.
You can modify colors, fonts, and typography, and handle user events through callback functions.
💡 Theming and event callbacks let you deliver a seamless, branded verification experience that feels native to your product.

​
Event Callbacks

The widget provides lifecycle callbacks that help you manage user flow and system events. 
DocsVerificationWidget({
  id: 'VF57124F182867E0',
  elementId: 'root',
  apiUrl: 'https://api.dataspike.io',
  onInit: async (status, error) => {
    console.log('Widget initialized:', status, error);
  },
  onFinish: async () => {
    alert('Verification completed!');
  },
});

​
Theming Overview

You can override the default design by passing a theme object when initializing the widget. Themes can adjust colors, typography, and visual hierarchy to match your brand guidelines. 
const customTheme = {
  palette: {
    primaryA1: '#5A58DF',
    textMain: '#000000',
    secondaryA4: '#FF5050',
  },
  typography: {
    fontFamily: 'Mont, sans-serif',
    h1: { fontSize: '48px', fontWeight: '600' },
  },
};

DocsVerificationWidget({
  id: 'VF57124F182867E0',
  elementId: 'root',
  apiUrl: 'https://api.dataspike.io',
  theme: customTheme,
});
CallbackDescription
onInitInvoked when the widget loads. Provides the current verification status and any initialization errors.
onFinishTriggered when the user completes the verification flow. Use this to update the UI or trigger backend actions (e.g., updating applicant status).
⚙️ Tip: You can dynamically load theme presets for light or dark modes based on user preferences.

​
Theme Properties

PropertyTypeDescription
paletteobjectControls the widget’s color palette including text, background, and accent tones.
typographyobjectConfigures font family, size, weight, and line height for different text elements.
palette.primaryA1stringPrimary brand color used for buttons and interactive highlights.
palette.textMainstringMain text color used for headings and labels.
typography.h1.fontSizestringFont size for main headings (e.g., 48px).
typography.fontFamilystringBase font family applied throughout the widget.
For a complete property reference, visit the Theme schema on GitHub.

​
Example: Full Custom Theme

const theme = {
  palette: {
    textMain: '#1A1A1A',
    primaryA1: '#0F62FE',
    secondaryA3: '#52C27F',
    secondaryA4: '#FF5050',
    secondaryA8: '#EDECFC',
  },
  typography: {
    fontFamily: 'Inter, sans-serif',
    h1: { fontSize: '42px', fontWeight: '600', lineHeight: '56px' },
    text: { fontSize: '14px', lineHeight: '22px' },
  },
};

DocsVerificationWidget({
  id: 'VF57124F182867E0',
  elementId: 'root',
  theme,
});

​
Debugging & Troubleshooting

If the widget does not render or behaves unexpectedly, check the following:
  1. Validate the verificationUrlId.
    Make sure it’s created correctly on your backend and returned to the frontend.
  2. Inspect the browser console.
    Look for JavaScript errors or missing module imports.
  3. Verify the container element.
    Ensure that the HTML element with the specified elementId exists in the DOM before initializing the widget.
  4. Confirm API connectivity.
    Check that the API endpoint (https://api.dataspike.io or the Sandbox equivalent) is reachable from your environment.
🧩 Tip: Use the browser’s Network tab to monitor API requests triggered by the widget. This helps identify failed calls or CORS configuration issues.

​
Frequently Asked Questions

Q: Can I use the SDK in Sandbox mode?
Yes — the Web SDK fully supports Sandbox mode. All verifications and webhooks return simulated data when initialized with the Sandbox API base URL. Q: Does theming affect verification logic?
No — theming only controls appearance. The verification process and logic remain unchanged. Q: Can I host the SDK myself?
Yes. You can install the package via NPM or Yarn, or host the static JS bundle from your own CDN if preferred.

View on GitHub

Explore the theme schema, and advanced configuration examples.