Gratis for alle nettsteder

Gi leserne dine finansforklaringer – rett i artikkelen

Med én linje kode får du tooltip, definisjonskort, dagens begrep og søk. Ingen API-nøkkel, ingen kostnad – bare bedre innhold for publikum ditt.

Klar på få minutter
Helt gratis
10 000+ begreper
Lett å integrere

Kom i gang Se live-demo

1. Legg inn scriptet én gang

Lim inn denne linjen rett før </body> på siden din. Den lastes asynkront og påvirker ikke sidehastigheten nevneverdig.

<script src="https://www.finansordbok.no/api/embed.js" defer></script>

2. Velg widget

Tooltip på et ord

Marker et ord i teksten. Leseren holder musepekeren over (eller fokuserer med tastatur) og ser definisjonen uten å forlate siden.

<span class="finansordbok" data-term="aksje">aksje</span>

Definisjonskort

Et selvstendig kort med begrep, definisjon og lenke. Fint i sidekolonner, ordlister eller artikler.

<div class="finansordbok-card" data-term="P/E"></div>

Dagens begrep

Viser automatisk et nytt begrep hver dag – uten at du trenger å gjøre noe. Perfekt for en «lær noe nytt»-boks.

<div class="finansordbok-daily"></div>

Søkeboks

En søkeboks med live-forslag. Treff åpnes på finansordbok.no i ny fane. Valgfri data-placeholder.

<div class="finansordbok-search"></div>

Referanse

Widget	HTML	Attributter
Tooltip	`<span class="finansordbok">`	`data-term` (valgfri – faller tilbake til teksten)
Definisjonskort	`<div class="finansordbok-card">`	`data-term` (påkrevd)
Dagens begrep	`<div class="finansordbok-daily">`	ingen
Søkeboks	`<div class="finansordbok-search">`	`data-placeholder` (valgfri)

Alle widgets henter data fra det åpne, nøkkelfrie endepunktet /api/widget.php (CORS aktivert). Trenger du rå JSON eller mer kontroll, bruk det fullverdige API-et med nøkkel.

Vilkår

Widgetene er gratis. Vi ber om at du krediterer finansordbok.no (søkeboksen gjør det automatisk) og ikke misbruker tjenesten. Les de fullstendige vilkårene. Innholdet er kun til informasjonsformål og utgjør ikke investeringsråd.

3. Stil widgetene selv (valgfritt)

Widgetene leveres med ferdig styling, men du kan overstyre utseendet med din egen CSS. Siden stilene settes inn av JavaScript, bruker du !important eller høyere spesifisitet for å slå gjennom.

Tooltip

/* stiplede linje under ordet */
.fo-trigger { border-bottom: 2px solid #f59e0b; color: #b45309; }

/* tooltip-boks */
.fo-tooltip {
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

Definisjonskort / Dagens begrep

.fo-card {
  border: none; border-radius: 0;
  background: #f8fafc;
  box-shadow: none;
  padding: .75rem;
  max-width: 100%;
}
.fo-card-label { color: #dc2626; }
.fo-card-term { font-size: 1.25rem; color: #0f172a; }
.fo-card-def { color: #334155; }
.fo-card a { color: #dc2626; }

Søkeboks

.fo-search input {
  border: 2px solid #e2e8f0;
  border-radius: 999px;
}
.fo-search button { background: #10b981; border-radius: 999px; }
.fo-search-list { border-radius: 12px; }
.fo-search-list a:hover { background: #ecfdf5; }
.fo-credit { text-align: right; }

Widget	CSS-klasser
Tooltip	`.fo-trigger` (ordet), `.fo-tooltip` (boblen), `.fo-widget` (wrapper)
Definisjonskort	`.fo-card`, `.fo-card-label`, `.fo-card-term`, `.fo-card-def`
Dagens begrep	`.fo-card`, `.fo-daily`, `.fo-card-label`, `.fo-card-term`, `.fo-card-def`
Søkeboks	`.fo-search`, `.fo-search input`, `.fo-search button`, `.fo-search-list`, `.fo-credit`

Legg din egen CSS i et vanlig <style>-element eller i stilarket ditt. Den må plasseres etter script-taggen til embed.js, eller bruk !important på reglene dine.