Widget customization

This tutorial is mostly a collection of visual changes to the widget through data-styles attribute.

Full-width widget

The only thing you need to do is to add display: block to data-styles (and make sure form itself is wide enough).

<form>
    <div class="private-captcha"
         data-styles="display: block;">
    </div>
</form>

Large widget

There’re 2 things you can do: changing font-size scales everything inside the widget and stretching widget itself is done with display attribute (which by default is inline-block).

<form style="width: 500px; height: 160px;">
    <div class="private-captcha"
         style="height: 100%"
         data-styles="display: block; height: 100%; font-size: 24px;">
    </div>
</form>

Small widget

To “squish” the widget you need to add min-width: 0; to data-styles.

<form style="width: 200px; height: 100px;">
    <div class="private-captcha"
         data-styles="display: block; min-width: 0; height: 100%;">
    </div>
</form>

Border customization

Border color is customized with --border variable (a proxy to border CSS property) and border radius is customized with --border-radius

<form>
    <div class="private-captcha"
         data-styles="--border-radius: 1rem; --border: 1px dashed blue;">
    </div>
</form>

Box shadow

Make sure that container’s parent (or form itself) has the same border-radius so there’re no visual conflicts. Also make sure the container does not have overflow: hidden.

<form>
    <div class="private-captcha"
         data-styles="box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --border-radius: 0.5rem;">
    </div>
</form>

Accent colors

Here’s how to make a red widget. You need to override --border (obviously), then --accent-color, --pie-color and --checkbox-hover-color.

<form>
    <div class="private-captcha"
         data-styles="--border: 1px solid #cd1811; --accent-color: #cd1811; --pie-color: #fdb8b7; --checkbox-hover-color: #feeded;">
    </div>
</form>

Responsive size

For mobile clients we want to show a smaller widget. We can achieve this using font-size and clamp CSS built-in to have smth like font-size: clamp(18px, 4vw, 20px). Trick can be also used to things like --extra-spacing.

<form>
    <div class="private-captcha"
         data-styles="font-size: clamp(18px, 4vw, 20px); --extra-spacing: clamp(0.025rem, 2vw, 0.25rem);">
    </div>
</form>

Extra spacing

Depending on preferred widget size, you might want to add more horizontal padding between sides and checkbox and logo. You can achieve that using --extra-spacing.

<form style="width: 400px">
    <div class="private-captcha"
         data-styles="display: block; --extra-spacing: 1.5rem;">
    </div>
</form>

Forcing color theme

If data-theme="auto", but you want to force a dark theme, you can set CSS color-scheme: dark; on any parent of .private-captcha div. Simple(r) version of that is just setting data-theme="dark" attribute, but this way you can make it more dynamic or add custom logic for your website.

<form style="color-scheme: dark;">
    <div class="private-captcha" data-theme="auto">
    </div>
</form>

Compact widget

To build a “squished” widget (vertically), you can change height and set --logo-direction: row. After that you can adjust, as needed, a bunch of other properties: --control-size and --logo-height for checkbox and logo dimensions and --widget-padding for self-evident padding.

<form>
    <div class="private-captcha"
        data-styles="height: 36px;
                     --control-size: 20px; 
                     --logo-direction: row; 
                     --logo-height: 24px; 
                     --logo-margin: 8px; 
                     --widget-padding: 0.5rem;">
    </div>
</form>

Even more customization

For absolutely custom visualization, you can make Private Captcha widget “invisible” and make your own visualizations based on widget’s callbacks and/or events. You can see an example of it in the linked page.