Skip to main content

Style Templates

Using style templates, you can tailor the styling of Otentica to your company. This means that your logo and colours will appear in the flow your professional goes through, and will customize the report that is generated at the end.

Creating a Style Template​

You can create multiple styles and determine which style to use per flow you create.

To create a new style template, execute the following request:

POST https://[api-url]/single-check-style
Content-Type: application/json
Authorization: Bearer YOUR_API_KEY
Authorization-Method: api-token

{
  "whitelabelStyleId": "yourStyleId",
  "logoUrl": "https://url-to.your/logo.jpg",
  "primaryColor": "#012345",
  "secondaryColor": "#546798",
  "primaryButtonColor": "#ABCDEF"
}

Style Properties​

PropertyDescriptionRequired
whitelabelStyleIdYour unique identifier for this styleYes
logoUrlURL to your company logo (JPG or PNG only)Yes
primaryColorPrimary brand color (hex format)Yes
secondaryColorSecondary brand color (hex format)Yes
primaryButtonColorColor for primary buttons (hex format)Yes
companyIdThe company the style belongs to. Defaults to your own companyNo
fullWhitelabellingHide Otentica branding in the emails and the reportNo
Important

Only JPG and PNG logos are supported. If you provide another format, generating of the report will fail.

Using a Style Template​

After creation, you can use the style in your flows by referencing it by the whitelabelStyleId:

{
  "firstName": "John",
  "lastName": "Doe",
  "email": "john.doe@example.com",
  "whitelabelStyleId": "yourStyleId",
  "requestedChecks": [...]
}

Updating a Style Template​

To update a style, send the same POST request with the existing whitelabelStyleId and the new values. The style is created if the id does not exist yet, and replaced if it does. All required properties must be sent again.

Best Practices​

Logo Requirements​

  • Format: JPG or PNG only
  • Recommended size: 400x100 pixels
  • Maximum file size: 500KB
  • Aspect ratio: Horizontal logos work best
  • Background: Transparent background recommended for PNG

Color Selection​

  • Contrast: Ensure sufficient contrast between colors and white text
  • Accessibility: Test colors for accessibility compliance
  • Brand consistency: Use your official brand colors
  • Testing: Test the flow with your style before production use

Multiple Styles​

You might want to create multiple styles for:

  • Different brands or subsidiaries
  • Different types of flows (e.g., basic vs comprehensive)
  • A/B testing different designs
  • Seasonal or campaign-specific branding

Example Implementation​

// Create a style template
const createStyle = async () => {
  const response = await fetch('https://api-demo.otentica.nl/single-check-style', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Authorization-Method': 'api-token',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      whitelabelStyleId: 'company-default',
      logoUrl: 'https://example.com/logo.png',
      primaryColor: '#1ED9B4',
      secondaryColor: '#131848',
      primaryButtonColor: '#1ED9B4'
    })
  });
  
  return await response.json();
};

// Use the style in a flow
const createFlow = async () => {
  const response = await fetch('https://api-demo.otentica.nl/validation-flow', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Authorization-Method': 'api-token',
      'Content-Type': 'application/vnd.otentica.singlecheck.integrated.request+json'
    },
    body: JSON.stringify({
      language: 'ENGLISH',
      whitelabelStyleId: 'company-default',
      firstName: 'John',
      lastName: 'Doe',
      email: 'john.doe@example.com',
      requestedChecks: [
        {
          checkName: 'identity-data',
          importance: 'SKIPPABLE'
        }
      ]
    })
  });
  
  return await response.json();
};

Troubleshooting​

Common Issues​

  1. Report generation fails

    • Ensure logo is JPG or PNG format
    • Verify logo URL is publicly accessible
    • Check logo file size is under 500KB

  2. Colors not appearing correctly

    • Use valid hex color codes (6 characters)
    • Include the # prefix
    • Test in both light and dark backgrounds

  3. Style not applying to flow

    • Verify the whitelabelStyleId matches exactly
    • Ensure style was created before the flow