> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dataspike.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

> Customize the Dataspike Web SDK to match your brand’s style and user experience, with full control over colors, typography, and callbacks.

# 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.

```javascript theme={null}
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.

```javascript theme={null}
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,
});
```

| **Callback** | **Description**                                                                                                                                  |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `onInit`     | Invoked when the widget loads. Provides the current verification status and any initialization errors.                                           |
| `onFinish`   | Triggered 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

| **Property**             | **Type** | **Description**                                                                    |
| ------------------------ | -------- | ---------------------------------------------------------------------------------- |
| `palette`                | `object` | Controls the widget’s color palette including text, background, and accent tones.  |
| `typography`             | `object` | Configures font family, size, weight, and line height for different text elements. |
| `palette.primaryA1`      | `string` | Primary brand color used for buttons and interactive highlights.                   |
| `palette.textMain`       | `string` | Main text color used for headings and labels.                                      |
| `typography.h1.fontSize` | `string` | Font size for main headings (e.g., `48px`).                                        |
| `typography.fontFamily`  | `string` | Base font family applied throughout the widget.                                    |

For a complete property reference, visit the [**Theme schema on GitHub**](https://github.com/dataspike-io/docver-widget#theming).

***

## Example: Full Custom Theme

```javascript theme={null}
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.

***

<Columns cols={1}>
  <Card title="View on GitHub" icon="github" href="https://github.com/dataspike-io/docver-widget">
    Explore the theme schema, and advanced configuration examples.
  </Card>
</Columns>