Dutch
English

How to embed Websec Badge

The WebSec badge increases trust, safety and confidence among your customers!

How to embed

Step 1: Get a badge id from websec. If you're eligible, you should recieve one shortly after a successful audit.

Step 2: Copy/paste the below code somewhere in your html. Replace <BADGE_ID> with the one you recieved from websec.

<div style="width: 64px" data-websec-badge-id="<BADGE_ID>"></div>
<script defer src="https://websec.nl/snippets/badge/v2/badge.js" />

Make sure the the div has appropriate width. The badge will expand to full width.

With Next.js

Use the Script component next.js provides and you're all good.

import Script from 'next/script'
import { useEffect } from 'react'

export function WebsecBadge() {
    // re-mount on soft navigation
    useEffect(() => {
        if (window.WebSecSecureBadge) window.WebSecSecureBadge.initialize()
    }, [])

    return (
        <>
            <div style={{ width: 64 }} data-websec-badge-id="<BADGE_ID>"></div>
            <Script strategy="lazyOnload" src="https://websec.nl/snippets/badge/v2/badge.js" />
        </>
    )
}

If you use typescript, make sure to add type window.WebSecSecureBadge

declare global {
    interface Window {
        WebSecSecureBadge?: { initialize: () => void }
    }
}

React Hydration errors

You should not encounter this with the Next Script component. But if you're not satisfied with next/script, try conditionally rendering in client instead.

Also notice we used next head component. Script might not load without it.

import Head from 'next/head'

export function WebsecBadge() {
    const [isClient, setIsClient] = useState(false)

    useEffect(() => setIsClient(true), [])

    return isClient ? (
        <>
            <div style={{ width: 64 }} data-websec-badge-id="<BADGE_ID>"></div>
            {/* notice the head tag is used, otherwise the script might not load */}
            <Head>
                <script async src="https://websec.nl/snippets/badge/v2/badge.js" />
            </Head>
        </>
    ) : null
}

If you use Next /app directory, take a look at the next script optimization guide for app dir.

Prevent layout shift

Ideally you should give the badge same height/width to prevent layout shifts.

<div style="width: 64px; height: 64;" data-websec-badge-id="<BADGE_ID>"></div>

If you conditionally render the badge, try to wrap with another element and give the wrapper explicit height/width. Something like below:

return (
    <div style={{ width: 64, height: 64 }}>
        {isClient && (
            <>
                <div style={{ width: 64 }} data-websec-badge-id="<BADGE_ID>"></div>
                <Head>
                    <script async src="https://websec.nl/snippets/badge/v2/badge.js" />
                </Head>
            </>
        )}
    </div>
)

Dark mode

We support dark mode automatically through (prefers-color-scheme: dark) css media.

Just embed the badge as you normally do and we promise, your night owl customers won't be lasered down with beam of bright light.