Theming

We include CSS variables to make base parts of the application easily configurable, such as branding colors. Below is a snippet containing the variables available for customization.

  --empty-background-color: #FFFFFF;
  --primary-background-color: #00D9FF;
  --secondary-background-color: #153E43;
  --tertiary-background-color: #1D2023;

  --D1-font: 50px/46px 'DINCondensed-Bold';
  --D1-text-transform: uppercase;

  --H1-font: 32px/26px 'DINCondensed-Bold';
  --H1-text-transform: uppercase;

  --H2-font: 18px/18px 'DINCondensed-Bold';
  --H2-text-transform: uppercase;

  --B1-font: 16px/20px 'AvenirNext-Medium';
  --B1-letter-spacing: -0.5px;

  --C1-font: 12px/10px 'DINCondensed-Bold';
  --C1-opacity: 0.5;

  --button-font: 18px/18px 'DINCondensed-Bold';
  --button-letter-spacing: 3.3px;
  --button-text-transform: uppercase;

To override the default values of these variables, you can create your own definitions by adding styles into index.html. For example to override the secondary background color with the value #000000, we can add a style tag to the end of the <head> section:

<html>
<head>
  ...
  <style>
    :root {
      --secondary-background-color: #000000;
    }
  </style>
</head>

<body>
  ...
</body>
</html>

Payment Information

The Web Discover SDK requires no information about payments to function, but does support displaying the following information:

Parameter Type Required Default Description Notes
amount Number no - The monetary value of the transaction Requires configuration of your application’s paymentType
currency String no USD The currency of the transaction as an ISO 4217 code  
creatorid Object no - An object with keys first_name (required), last_name, email  
recipientInfo Object no - An object with keys first_name, last_name, email  


These parameters are supplied to a VouchrApp object as the optional second argument of its render method. For example:


var vouchrApp = new window.VouchrApp({..., paymentType: 'PASSTHROUGH'}, ...);

var paymentInfo = {
  amount: 10,
  currency: 'USD',
  creatorid: {
    first_name: 'sender_first',
    last_name: 'sender_last',
    email: '[email protected]'
  },
  recipientInfo: {
    first_name: 'reciever_first',
    last_name: 'reciever_last',
    email: '[email protected]'
  }
}

vouchrApp.render(document.getElementById("vouchrAppRoot"), paymentInfo);

Custom Content

The Web Discover SDK supports inserting custom content, see the Web Reveal SDK documentation for details.