Interactive calculators and tools used as lead magnets on shiftbase.com. Each snippet is a self-contained vanilla JavaScript widget that can be embedded on any page via jsDelivr.
| Snippet | Mount ID | Description |
|---|---|---|
nl-roi-businesscase |
sb-roi-businesscase |
ROI & business case calculator |
nl-zelftest-rooster |
sb-zelftest-rooster |
Schedule self-assessment checklist |
example-counter |
sb-counter |
Demo snippet (click counter) |
- Add the shared stylesheet in the
<head>of your page (once per page):
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/shared/styles.css">- Place a
<div>with the correct mount ID where you want the widget to appear, followed by the snippet script:
<div id="sb-roi-businesscase"></div>
<script
src="https://cdn.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/snippets/nl-roi-businesscase/snippet.js">
</script>The snippet will automatically render inside the <div>. Each snippet preview page includes a ready-to-copy embed block.
When embedding via a HubSpot embed module, make sure the module or column width is set to at least 800px. By default HubSpot may limit the embed wrapper to 540px, which compresses the layout.
jsDelivr caches files aggressively. After pushing changes to trunk, a GitHub Action automatically purges the cache for any changed files in shared/ and snippets/. If you need to purge manually, replace cdn with purge in the URL:
https://purge.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/shared/styles.css
Open index.html in the browser (via file:// or Live Server) for an overview of all snippets. Each snippet folder also has its own index.html for a standalone preview. No build step needed.
- Create a folder under
snippets/with a descriptive name (kebab-case) - Create
snippet.js— wrap all code in an IIFE:(function() { ... })(); - The snippet mounts itself on a
<div>with a specificid(e.g.sb-counter) - Create
index.htmlfor local preview — load../../shared/styles.cssand your script - Add a link to the snippet grid in the root
index.html
- All CSS classes use the
sb-prefix to avoid conflicts with host pages - The root container gets the class
sb-widget - No external dependencies — everything is vanilla JS
- No
document.write(), no globals - Snippet-specific styles are injected via JS; shared styles live in
shared/styles.css