Copy and the paste the below code anywhere in your html. Replace <YOUR_CLIENT_ID>
with your client ID.
<script src="https://websec.nl/badge_embed/websecbadge.js" defer></script>
<link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
<div id="websec_badge" data-clientid="<YOUR_CLIENT_ID>"></div>
We export a renderWebsecBadge
function from https://websec.nl/badge_embed/websecbadge_exports.js
.
You can import however your build system supports url imports. One way would be like below
<!-- import and bundle the stylesheet according to your build system to minimize network overhead -->
<link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
<div id="BADGE_ROOT"></div>
export const render = async () => {
const { renderWebsecBadge } = await import(
'https://websec.nl/badge_embed/websecbadge_exports.js'
)
/** renderWebsecBadge(target: HTMLElement, cliendId: string, options?) */
renderWebsecBadge(document.getElementById('BADGE_ROOT'), '<YOUR_CLIENT_ID>')
}
/** run render() preferably after page load */
You can use the same renderWebsecBadge
function described above with a little patch
import { useEffect, useRef } from 'react' // or 'preact/hooks`
export function WebsecBadge() {
const ref = useRef()
useEffect(() => {
import('https://websec.nl/badge_embed/websecbadge_exports.js').then(
({ renderWebsecBadge }) => {
renderWebsecBadge(ref.current, '<YOUR_CLIENT_ID>')
}
)
}, [])
return (
<div>
{/* again, import styles according to your build system */}
<link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
<div ref={ref}></div>
</div>
)
}
We support toggling dark mode programatically, instead of detecting users preferance through media.
If you're using vanilla html/script, just add data-dark
to your target element.
<div id="websec_badge" data-clientid="<YOUR_CLIENT_ID>" data-dark="yes"></div>
Alternatively, renderWebsecBadge
function supports an optional isDark flag
renderWebsecBadge(document.getElementById('BADGE_ROOT'), '<YOUR_CLIENT_ID>', {
isDark: true,
})