Verify JavaScript Widget CSS

Overview

The Verify widget is the identity verification step you drop into your own web page. When someone reaches that point in your journey, the widget renders inside the page, walks them through verifying their identity, and hands control back to you once they're done.

Its appearance is driven by a stylesheet you load alongside it. Out of the box, the widget ships with a default set of styles, so it looks tidy from the moment you add it. From there, you can add your own styling on top to match your brand colours, fonts, and spacing.

This guide covers the two ways to load the widget's styling, where each piece goes on your page, and how to override the defaults so the widget feels like a natural part of your site rather than a bolt-on.

‍

Bundled or unbundled, at a glance
‍The widget's styling comes in two versions. Pick bundled if your site doesn't already load Bootstrap. Pick unbundled if your site already runs jQuery and Bootstrap and you want to keep the download lighter.

‍

Choose between bundled and unbundled

The version you choose depends on what your site already loads. There's a matching pair for both the styling and the script, so whichever flavour you pick, use the same one for both.

‍

Bundled

The simplest option. The bundled stylesheet includes everything the widget needs to display correctly, so you don't have to worry about any other dependencies. This is the right choice if your site doesn't already use Bootstrap.

‍

Unbundled

Built for sites that already load jQuery and Bootstrap. Because those libraries are already on the page, the unbundled version leaves them out, which keeps the download smaller and avoids loading the same thing twice. Reach for this if you're already running Bootstrap and want to keep things lean.

‍

Add the widget to your page

Whichever version you choose, the widget needs four things on the page: the stylesheet, a target element to render into, the script, and a short block that starts it up. Here's the order they go in.

Add the widget stylesheet to the <head> of your page. Use the bundled CSS unless your site already loads Bootstrap, in which case use the unbundled version.
Add the target element where you want the widget to appear. The widget renders inside a <div> with the id ChandlerVerify.
Add the widget script below your page content, matching it to your stylesheet (bundled with bundled, unbundled with unbundled).
Provide the verification key, which is a JSON Web Token (JWT), along with your API host, then call Setup to start the widget.

‍

Here's how the whole thing fits together on a page:

<!DOCTYPE html>
<html>
<head>
  <!-- Your normal site head, CSS includes, etc. -->

  <!-- Verify bundled CSS. If your site already uses Bootstrap, use the unbundled version. -->
  <link rel="stylesheet"
        href="https://{your-instance}.chandlerverify.com.au/cdn/css/dist/ChandlerVerify.v1.0.bundled.min.css" />

  <!-- Your own custom CSS goes after the widget CSS so your styles take priority. -->
  <link rel="stylesheet" href="/css/your-custom-styles.css" />
</head>
<body>

  <!-- Your normal site layout: heading, menu, content, etc. -->

  <!-- Verify widget target. The widget renders inside this element. -->
  <div id="ChandlerVerify"></div>

  <!-- Verify bundled JS. If your site already uses jQuery and Bootstrap, use the unbundled version. -->
  <script src="https://{your-instance}.chandlerverify.com.au/cdn/js/dist/ChandlerVerify.Main.v1.0.bundled.min.js"></script>

  <script>
    // Provide the JWT and API host to the client.
    var verificationKey = "jwt-key";
    var apiHost = "https://{your-instance}.chandlerverify.com.au";

    $(document).ready(function () {
      var successCallback = function () {
        // Normally you'd redirect to the next step here.
        window.location.href = "/nextstep?verificationId=" + verificationKey;
      };

      var errorCallback = function () {
        // Error handling code, e.g. a modal or alert suggesting the user retries.
      };

      ChandlerVerify.Setup(apiHost, '#ChandlerVerify', verificationKey, successCallback, errorCallback);
    });
  </script>

</body>
</html>

‍

A few things worth knowing about that snippet. Replace {your-instance} with your own instance address in both the stylesheet link and the script. The successCallback and errorCallback are what move the page along once verification finishes. The success callback is usually just a simple redirect to the next step, but you can customise it for a single-page application (SPA) or any other flow you need.

‍

Customise the look and feel

The default styles get you up and running, but most teams want the widget to sit comfortably alongside the rest of their site. Here's how to take control of it.

‍

Load your own stylesheet after the widget's CSS

The browser applies stylesheets in the order they appear, so anything you load after the bundled CSS takes priority. Add a link to your own stylesheet just below the widget's stylesheet, as shown in the example above, and your rules will win where they overlap.

‍

Scope your styles to the widget container

Everything the widget renders lives inside the #ChandlerVerify element. If you target that container in your styles, you can restyle the widget with confidence that you won't affect the rest of your page.

‍

Find the class names you need

Open the page in your browser, right-click the part of the widget you want to change, and choose Inspect. That shows you the class names the widget uses, which you can then style to match your brand colours, fonts, buttons, and spacing.

‍

Heads up if you're using the unbundled version
‍With the unbundled version, you're in charge of the Bootstrap and jQuery your site loads. Stick to a version the widget supports to avoid layout surprises, and test your changes in a staging environment before you push them live.

‍

That's it. Once your stylesheet is loading after the widget's CSS and scoped to the widget container, your branding carries straight through, and the verification step will look like a natural part of your journey.

‍