White-Labeling and Styling Web Components

White-labeling and Styling Web Components

Verdocs provides a wide variety of embeddable Web components that developers can use to quickly build bespoke Web and mobile applications with e-Signing functionality. These components were designed to be aesthetically pleasing and with a consistent look and feel across the collection, but they may also be completely restyled to provide a truly integrated look and feel.

What Are Web Components?

It is important to understand what Web Components are and how they work. Competing solutions typically offer a small handful of "components" served via old-school IFRAME embeds. While these do work, they generally do not provide very fine-grained control over styling, because:

1. IFRAME embeds have traditionally been used as security sandboxes in Web browsers, to provide features such as login dialogs. It is very difficult for application developers to override styles or functionality inside them.
2. Typically the component developer must coordinate any style overrides that need to be applied.
3. Where these overrides are not provided, it may be impossible to do.
4. Communication between embedded components and host applications is challenging.

Web Components are a modern approach that create custom HTML elements that can be directly used in applications without an IFRAME. (For a more detailed description, see the excellent MDN guide.)

From a developer's perspective, an IFRAME-based component must be styled using mechanisms provided by the component's developer. A Web Component is styled like any other <div> or <span> tag, using standard CSS. This applies both to simple changes like color or font overrides as well as to hiding unwanted elements (e.g. the Verdocs logo), moving or resizing elements (via flexbox overrides), and with some custom Javascript, even replacing some elements entirely.

Simple Example

Suppose you are working with the Verdocs Sign component. This is a higher-order component (HOC) that combines Verdocs Loader, View, KBA Dialog, and other controls to make embedding a signing experience as simple as:

<verdocs-sign
  envelopeId="envelope-id"
  roleName="role-name"
  inviteCode="1234...."
  onEnvelopeUpdated={envelope => console.log('Envelope status change', envelope);} />

This produces a signing experience similar to the screenshot below:

Suppose you want to make two changes to this experience:

1. Change the toolbar color to your brand's primary color (e.g. #2733b7).
2. Hide the top-right dropdown menu to simplify the experience.

The following CSS code in your page will allow you to achieve the visual shown below:

#verdocs-sign-header { background-color: ##2733b7; }
#verdocs-sign-header verdocs-dropdown { display: none; }

‍