|
1 | | -# marketing-js |
2 | | -Marketing-js repository |
| 1 | +# Marketing JS |
| 2 | + |
| 3 | +Interactive calculators and tools used as lead magnets on [shiftbase.com](https://www.shiftbase.com). Each snippet is a self-contained vanilla JavaScript widget that can be embedded on any page via [jsDelivr](https://www.jsdelivr.com/). |
| 4 | + |
| 5 | +## Available snippets |
| 6 | + |
| 7 | +| Snippet | Mount ID | Description | |
| 8 | +|---|---|---| |
| 9 | +| `nl-roi-businesscase` | `sb-roi-businesscase` | ROI & business case calculator | |
| 10 | +| `nl-zelftest-rooster` | `sb-zelftest-rooster` | Schedule self-assessment checklist | |
| 11 | +| `example-counter` | `sb-counter` | Demo snippet (click counter) | |
| 12 | + |
| 13 | +## How to embed |
| 14 | + |
| 15 | +1. Add the shared stylesheet in the `<head>` of your page (once per page): |
| 16 | + |
| 17 | +```html |
| 18 | +<link rel="stylesheet" |
| 19 | + href="https://cdn.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/shared/styles.css"> |
| 20 | +``` |
| 21 | + |
| 22 | +2. Place a `<div>` with the correct mount ID where you want the widget to appear, followed by the snippet script: |
| 23 | + |
| 24 | +```html |
| 25 | +<div id="sb-roi-businesscase"></div> |
| 26 | +<script |
| 27 | + src="https://cdn.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/snippets/nl-roi-businesscase/snippet.js"> |
| 28 | +</script> |
| 29 | +``` |
| 30 | + |
| 31 | +The snippet will automatically render inside the `<div>`. Each snippet preview page includes a ready-to-copy embed block. |
| 32 | + |
| 33 | +## HubSpot |
| 34 | + |
| 35 | +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. |
| 36 | + |
| 37 | +## CDN caching |
| 38 | + |
| 39 | +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: |
| 40 | + |
| 41 | +``` |
| 42 | +https://purge.jsdelivr.net/gh/shiftbase-com/marketing-js@trunk/shared/styles.css |
| 43 | +``` |
| 44 | + |
| 45 | +## Local development |
| 46 | + |
| 47 | +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. |
| 48 | + |
| 49 | +## Creating a new snippet |
| 50 | + |
| 51 | +1. Create a folder under `snippets/` with a descriptive name (kebab-case) |
| 52 | +2. Create `snippet.js` — wrap all code in an IIFE: `(function() { ... })();` |
| 53 | +3. The snippet mounts itself on a `<div>` with a specific `id` (e.g. `sb-counter`) |
| 54 | +4. Create `index.html` for local preview — load `../../shared/styles.css` and your script |
| 55 | +5. Add a link to the snippet grid in the root `index.html` |
| 56 | + |
| 57 | +### Conventions |
| 58 | + |
| 59 | +- All CSS classes use the `sb-` prefix to avoid conflicts with host pages |
| 60 | +- The root container gets the class `sb-widget` |
| 61 | +- No external dependencies — everything is vanilla JS |
| 62 | +- No `document.write()`, no globals |
| 63 | +- Snippet-specific styles are injected via JS; shared styles live in `shared/styles.css` |
0 commit comments