UI Customization

The goal of Criipto Signatures is to be fully customizable to fit exactly into your workflow. In the short term you can set a logo and theme the UI via CSS variables.

All UI settings are signature order specific which makes it easy for you to customize based on the context, and you can easily test new UI settings without affecting any new signature orders.

When creating a signature order via createSignatureOrder you can customize the UI by defining the subproperties of the ui input variable.

Full UI settings GraphQL Example

​

Logo

A logo can be added to the top of the signatory screen.

Set ui.logo.src to an absolute HTTPs image url and we will add the image to the top of the signatory frontend.

You can also define ui.logo.href which turns the logo into a link.

{
  "input": {
    "ui": {
      "logo": {
        "src": "https://www.criipto.com/hubfs/logo.svg", // required
        "href": "https://www.criipto.com" // can be left null
      }
    }
  }
}

​

Stylesheet

A custom stylesheet can be added to the frontend to provide unique theming and styling options.

Set ui.stylesheet to an absolute HTTPs css url and it will be loaded when the signatory opens their link.

{
  "input": {
    "ui": {
      "stylesheet": "https://signatures-storybook.criipto.com/custom.css"
    }
  }
}

The fastest way to theme the UI would be to override our CSS variables to show your primary colors.

.criipto-signatures {
  --primary-rgb: 128, 0, 128; // Change the primary color of the UI to purple.
}

​

Storybook

You can test your stylesheet without creating a signature order by using our Storybook (BETA) which is a static rendering of our UI with dummy data.

Open the Signatures Storybook and then paste a stylesheet URL into the "Stylesheet URL" input field, you can use https://signatures-storybook.criipto.com/custom.css to test.

​

CSS Variables

Below you will find a list of all CSS variables that can currently be overriden.

.criipto-signatures {
  --primary-rgb: 32, 76, 130;
  --danger-rgb: 206, 112, 101;
  --success-rgb: 128, 231, 144;

  --font-family: Raleway;

  --button-primary-background-rgb: var(--primary-rgb);
  --button-primary-color-rgb: 255, 255, 255;

  --button-default-background-rgb: 255, 255, 255;
  --button-default-color-rgb: var(--primary-rgb);

  --button-danger-background-rgb: var(--danger-rgb);
  --button-danger-color-rgb: 255, 255, 255;
}