​
Embedding OwnID Screens in a Custom Container

By default, OwnID screens open in a drawer, providing a seamless and non-intrusive login experience. However, if you prefer to embed the OwnID flow within a specific HTML wrapper element, you can use the container parameter.

The container parameter allows you to define where the OwnID interface should be rendered by specifying a CSS selector, such as a class or an ID.

Example: Embedding in an Element with a Class
  window.ownid('start', { 
    container: '.block-login',
    ... 
  });

​
CSS Custom Properties

OwnID provides a set of CSS custom properties (variables) that allow you to customize the appearance of the authentication screens to match your application’s design. These variables control various aspects of the drawer’s style, including colors, text, and input fields.

  --ownid-flow-color-primary: #0072EF;
  --ownid-flow-color-primary-hover: #0165FF;
  --ownid-flow-color-primary-disabled: #97C0FF;
  --ownid-flow-color-text-primary: #050102;
  --ownid-flow-color-secondary: #64748B;
  --ownid-flow-font-family: "Helvetica Neue", Helvetica,  sans-serif;
  --ownid-flow-letter-spacing: .5px;

  --ownid-flow-title-font-size: 22px;
  --ownid-flow-title-font-weight: 500;
  --ownid-flow-title-line-height: 44px;

  --ownid-flow-description-font-size: 16px;
  --ownid-flow-description-font-weight: 300;
  --ownid-flow-description-line-height: 23.2px;

  --ownid-flow-note-font-size: 14px;
  --ownid-flow-note-font-weight: 300;
  --ownid-flow-note-line-height: 20.3px;

  --ownid-flow-input-border-color: #E2E8F0;
  --ownid-flow-input-border-focus-color: var(--ownid-flow-color-secondary);
  --ownid-flow-input-border-radius: 10px;
  --ownid-flow-input-font-size: 16px;
  --ownid-flow-input-font-weight: 300;
  --ownid-flow-input-line-height: 24px;
  --ownid-flow-input-background-color: #FFF;
  --ownid-flow-input-placeholder-color: #76767D;
  --ownid-flow-input-color: #000;
  --ownid-flow-input-disabled-color: #737373;
  --ownid-flow-input-error-color: #ED0D00;

  --ownid-flow-btn-color: #FFF;
  --ownid-flow-btn-background-color: var(--ownid-flow-color-primary);
  --ownid-flow-btn-hover-background-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-disabled-background-color: var(--ownid-flow-color-primary-disabled);
  --ownid-flow-btn-border-radius: 10px;
  --ownid-flow-btn-border: 1px solid var(--ownid-flow-btn-background-color);
  --ownid-flow-btn-font-size: 18px;
  --ownid-flow-btn-font-weight: 500;
  --ownid-flow-btn-line-height: 23px;
  --ownid-flow-btn-text-transform: none;

  --ownid-flow-btn-secondary-color: var(--ownid-flow-color-primary);
  --ownid-flow-btn-secondary-hover-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-secondary-disabled-color: var(--ownid-flow-color-primary-disabled);
  --ownid-flow-btn-secondary-border-radius: 10px;
  --ownid-flow-btn-secondary-border: none;
  --ownid-flow-btn-secondary-background-color: none;
  --ownid-flow-btn-secondary-font-size: 14px;
  --ownid-flow-btn-secondary-font-weight: 300;
  --ownid-flow-btn-secondary-line-height: 20px;
  --ownid-flow-btn-secondary-text-transform: none;

  --ownid-flow-btn-tertiary-color: var(--ownid-flow-color-text-primary);
  --ownid-flow-btn-tertiary-hover-color: var(--ownid-flow-color-primary-hover);
  --ownid-flow-btn-tertiary-border: 1px solid var(--ownid-flow-color-text-primary);
  --ownid-flow-btn-tertiary-background-color: transparent;
  --ownid-flow-btn-tertiary-font-size: 18px;
  --ownid-flow-btn-tertiary-font-weight: 500;
  --ownid-flow-btn-tertiary-line-height: 20px;

Customization Example

To customize the OwnID drawer, you can override these CSS custom properties in your stylesheet. Here’s an example of how to change the primary color, hover color, and disabled color of the drawer:

ownid-flow {
  --ownid-drawer-font-family: "Comic Sans MS", Arial, serif;
  --ownid-flow-color-primary: #0072EF;
  --ownid-flow-color-primary-hover: #0165FF;
  --ownid-flow-color-primary-disabled: #97C0FF;
  --ownid-flow-color-text-primary: #050102;
  --ownid-flow-color-secondary: #64748B;
}

Was this page helpful?

Previous
Security
Next