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"></script>

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" />
        </>
    )
}

TypeScript

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

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 execute 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 execute */}
            <Head>
                <script async src="https://websec.nl/snippets/badge/v2/badge.js"></script>
            </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: 64px;" data-websec-badge-id="<BADGE_ID>"></div>

If you conditionally render the badge in nextjs like environements, 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: '100%' }} data-websec-badge-id="<BADGE_ID>"></div>
                <Head>
                    <script async src="https://websec.nl/snippets/badge/v2/badge.js"></script>
                </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 bright beam of light.

Development

For development environments, you may use one our test IDs. Make sure to replace it with a valid ID before going into production.

testid_valid   
testid_invalid 
testid_expired

Happy Hacking!