# Widget Two ways to put Tysnes Kalender's events on another website: the ready-made JavaScript widget, or your own rendering on top of the [API](/utviklere/api). ## The JavaScript widget A custom element, ``, served from `https://hsk-widget.web.app/embed/hsk.js`. It renders a filterable, paginated grid of this calendar's upcoming events, reads the API itself and needs no key. A configurator with live preview is at [https://hvaskjer-staging.web.app/feed](https://hvaskjer-staging.web.app/feed). Add the script once, in `` or before ``: ```html ``` Then place the element where the events should appear: ```html ``` ### Attributes | Attribute | Values | Meaning | |---|---|---| | `license` | `hvaskjer-staging` | Which calendar to show. Fixed for this calendar. | | `lan` | `nb`, `en`, `auto` | Language of the labels and of the titles picked; `auto` follows the visitor's browser. | | `accentcolor` | hex without `#` | Colour of buttons and highlights. | | `pagesize` | 1–50 | Events per page. | | `showmoreevents` | `true`/`false` | A "load more" button after the first page. | | `navigationstrategy` | `details_url`, `query_parameters` | Open an event on its own page (`detailsurl`), or in place, keyed by query parameters. | | `detailsurl` | URL with `$event_slug` | Where an event opens; `$event_slug` is replaced. Keep the value above to open the event on Tysnes Kalender. | | `moreinfolinkdestination` | `moreinfo`, `organizer`, `facebook`, `link`, `license` | What the "more info" link points at. | | `alleventsurl` | URL | Target of the "all events" link. | | `showbuttonallevents` | `true` | Show that link. | | `onlyfeatured` | `true` | Only events the organiser marked as featured. | | `columns` | `auto`, `3`, `4`, `5` | Grid columns. | | `rows` | `auto`, `1` | One row (a strip) or as many as the page size needs. | | `filteringoptions` | comma list of `search`, `category`, `dates`, `venue` | Which filters the visitor gets. Omit for none. The tokens are singular. | | `showfiltersalways` | `true` | Keep the filters open rather than behind a button. | | `dateinpicture` | `true` | Print the date on the image instead of under it. | | `showmapalternative` | `true` | Offer a map view next to the grid. | Attributes that are omitted take the widget's defaults. The widget identifies itself to the API with `X-Client-Id`; you do not send anything. ### WordPress and other CMSs Paste both snippets into an HTML block (Gutenberg "Custom HTML", or the theme's footer scripts for the `