PikkumerkkiHinta ja värinappi yhdellä rivillä. Sopii valikkoon, yläpalkkiin ja tekstin sekaan.
Sähkön hinta -widget omalle sivullesi
Ilmainen widget, joka näyttää pörssisähkön hinnan millä tahansa verkkosivulla. Valitse malli ja teema, kopioi koodi ja liitä se sivullesi. Hinta päivittyy itsestään 15 minuutin välein.
Ilmainen · Ei evästeitä · 10 mallia · Tumma ja vaalea teema · 5 kieltä
Rakenna oma widget
Esikatselu
Widgetin koodi
Liitä koodi sivun HTML:ään kohtaan, jossa widgetin pitää näkyä. Jos sivulla on monta widgettiä, skriptirivi tarvitaan vain kerran.
Kaikki mallit
Tässä jokainen malli oikeilla hinnoilla. Vaihda teemaa nähdäksesi, miltä widget näyttää vaalealla ja tummalla sivulla.
Hinta nytIso hinta, hintataso ja seuraavan vartin hinta.
HintapalkkiKoko leveyden palkki: nyt, seuraava, päivän vaihteluväli, keskihinta ja halvin jakso.
HintakorttiHinta, pieni päiväkaavio sekä alin, keskihinta ja ylin. Sivupalkin suosikki.
Päivän kaavioTämän päivän hinnat varteittain, huomisen välilehti heti julkaisun jälkeen.
Halvin aikaHalvin yhtenäinen jakso ja halvimmat tulevat tunnit, esimerkiksi pyykeille tai sähköauton lataukseen.
TuntitaulukkoKaikki päivän tuntihinnat väreillä, nykyinen tunti korostettuna.
Huomisen hintaHuomisen kaavio ja yhteenveto. Ennen julkaisua näkyy julkaisuaika.
KeskihinnatTämän päivän, 7 ja 30 päivän sekä 12 kuukauden keskihinnat.
Laaja näkymäKaikki yhdessä: hinta, halvin jakso, kaavio, keskihinnat ja tuntitaulukko.
Mikä widget mihinkin kohtaan?
| Paikka | Suositus | Vinkki |
|---|---|---|
| Ylätunniste (header) | Pikkumerkki tai hintapalkki | Pikkumerkki mahtuu valikon viereen. Palkki sopii koko leveyden yläpalkiksi. |
| Sivupalkki | Hintakortti, halvin aika tai keskihinnat | Toimii 260–360 px leveydessä. Laita enimmäisleveydeksi esim. 360. |
| Alatunniste (footer) | Hintapalkki tai hinta nyt | Läpinäkyvä tausta sulautuu sivuston alatunnisteeseen. |
| Sivu | Laaja näkymä tai päivän kaavio | Laaja näkymä on tehty omaksi sähkön hinta -sivuksi. |
| Artikkeli | Päivän kaavio, tuntitaulukko tai huomisen hinta | Sähköä, taloutta tai kotia käsittelevään juttuun: lukija näkee aina ajantasaisen hinnan. |
Näin lisäät widgetin
1
WordPress: sivu tai artikkeli
Avaa sivu muokkaimessa, lisää lohko ”Mukautettu HTML” (Custom HTML), liitä koodi ja tallenna. Esikatselu näyttää widgetin vasta julkaistulla sivulla tai esikatselussa.
2
WordPress: sivupalkki tai alatunniste
Mene kohtaan Ulkoasu → Vimpaimet (Widgets), valitse alue (esim. Sidebar tai Footer), lisää ”Mukautettu HTML” -lohko ja liitä koodi. Lohkoteemoissa sama tehdään kohdassa Ulkoasu → Editori → Mallipohjat.
3
WordPress: ylätunniste
Lohkoteemassa: Ulkoasu → Editori → Mallipohjan osat → Header → lisää ”Mukautettu HTML”. Elementorissa: muokkaa headeria ja lisää HTML-elementti. Muissa teemoissa käytä teeman header-asetusta tai lisäosaa, jolla voi lisätä HTML:ää headeriin.
4
Wix, Squarespace, Webflow, Shopify ja muut
Käytä sivunrakentajan upotuselementtiä: Wix ”Embed code / Custom HTML”, Squarespace ”Code block”, Webflow ”Embed”, Shopify ”Custom Liquid”. Liitä koodi sellaisenaan.
5
Oma HTML-sivu
Liitä div-elementti kohtaan, jossa widget näkyy, ja skriptirivi ennen </body>-tagia. Voit lisätä saman sivun eri kohtiin monta div-elementtiä eri asetuksilla.
WordPress: [shn_widget type="card" theme="light"]
Kaikki asetukset (data-attribuutit)
| Attribuutti | Arvot | Selitys |
|---|---|---|
data-type | badge | price | bar | card | chart | cheapest | table | tomorrow | averages | detailed | Widgetin malli. |
data-theme | dark | light | auto | Värit. auto seuraa kävijän laitteen tummaa tai vaaleaa tilaa. |
data-zone | FI | SE1 | SE2 | SE3 | SE4 | NO1 | NO2 | NO3 | NO4 | NO5 | DK1 | DK2 | EE | DE | Hinta-alue. Suomi on FI. |
data-vat | 1 | 0 | 25.5 | 1 = alueen ALV (Suomessa 25,5 %), 0 = veroton, tai oma prosentti. |
data-lang | fi | en | sv | de | nb | Tekstien kieli. Oletuksena sivusi kieli, jos se on tuettu, muuten suomi. |
data-hours | 1–12 (3) | Halvimman jakson pituus tunteina (1–12). |
data-count | 3–12 (5) | Halvimpien tuntien määrä Halvin aika -mallissa (3–12). |
data-resolution | quarter | hour | Kaavion pylväät vartteina tai tunteina. |
data-day | today | tomorrow | Mitä päivää kaavio ja taulukko näyttävät ensin. |
data-bg | transparent | transparent poistaa taustan, reunan ja varjon. |
data-radius | 0–40 (18) | Kulmien pyöristys pikseleinä. |
data-max-width | 160–2000 | Widgetin enimmäisleveys pikseleinä. |
data-title | … | Oma otsikko. |
data-show-title | 1 | 0 | 0 piilottaa otsikkorivin. |
data-accent | #RRGGBB | Ison hinnan väri, esim. #0A84FF. |
data-font | inherit | inherit käyttää sivustosi fonttia. |
data-currency | EUR | SEK | NOK | DKK | Valuutta muille alueille (öre tai øre). |
Usein kysyttyä widgetistä
Maksaako widget jotain?
Ei. Widget on ilmainen sekä yksityisille että yrityksille, myös kaupallisilla sivuilla.
Pitääkö lähdelinkki jättää näkyviin?
Kyllä. Widgetin alareunassa oleva ”Lähde: Sähkön hinta nyt” -linkki on käytön ehto. Sen ansiosta palvelu pysyy ilmaisena.
Hidastaako widget sivuani?
Ei merkittävästi. Skripti latautuu asynkronisesti (noin 10 kt pakattuna), ei estä sivun latausta ja hakee hinnat Cloudflaren välimuistista.
Käyttääkö widget evästeitä tai seurantaa?
Ei. Widget ei aseta evästeitä eikä kerää kävijöiden tietoja, joten se ei vaadi evästeilmoitusta.
Kuinka usein hinta päivittyy?
Hinta vaihtuu 15 minuutin välein ja widget päivittää itsensä automaattisesti, kun sivu on auki. Huomisen hinnat tulevat noin klo 14.15.
Voiko samalla sivulla olla monta widgettiä?
Voi. Lisää jokaiselle oma div-elementti. Skriptirivi tarvitaan vain kerran, ja samat hinnat haetaan vain kerran.
Widgetin tyyli ei sovi sivustooni. Mitä teen?
Kokeile vaaleaa teemaa, läpinäkyvää taustaa ja sivustosi fonttia. Voit myös vaihtaa hinnan värin ja kulmien pyöristyksen. Widget on eristetty Shadow DOMiin, joten sivusi tyylit eivät riko sitä.
Sivuni on tiukka Content-Security-Policy. Mitä sallin?
Salli script-src ja connect-src osoitteelle https://api.xn--shknhintanyt-gcb8w.org.
Käyttöehdot lyhyesti
Widgetin saa upottaa vapaasti mille tahansa sivulle. Lähdelinkki on pidettävä näkyvissä ja sitä ei saa piilottaa. Hinnat perustuvat ENTSO-E:n julkaisemiin day-ahead-hintoihin. Tiedot ovat suuntaa antavia, emmekä vastaa niiden perusteella tehdyistä päätöksistä.
Tarvitsetko hinnat automaatioon? Katso integraatiot ja avoin API.