Muokkaa kirjautumissivujen käyttöliittymää HTML- & CSS-koodilla

Kirjoittanut Natalia Moskaleva päivänä 11. heinäkuuta 2025

2 min lukuaika

Mukautetun HTML:n ja CSS:n käyttöönotto kirjautumisvirtoja varten

Asiakkaan käyttökokemus alkaa usein kirjautumis- tai tunnistautumissivulta. Käyttäjäkokemusta suunniteltaessa tämä kriittinen vaihe saattaa kuitenkin jäädä vaille huomiota.

Siksi haluamme ylpeänä esitellä uusimman ominaisuutemme: Idura Custom UI eli mukautettu käyttöliittymä. 

Se antaa sinulle vapauden luoda kirjautumissivuja ja -prosesseja, jotka ovat paitsi toimivia myös räätälöityjä asiakkaidesi tarpeisiin sekä linjassa brändisi ilmeen kanssa.

Mikä on mukautettu käyttöliittymä?

Mukautettu käyttöliittymämme on suunniteltu sujuvoittamaan asiakkaidesi eID-tunnistautumista.

Käyttämällä Custom ID -toimintoamme voit lisätä oman HTML- ja CSS-koodisi Iduran alustalla toimiviin kirjautumissivuihin tai sovellukseesi sekä muokata niiden ulkoasua haluamallasi tavalla. 

Voit käyttää mukautettua käyttöliittymää tanskalaisen MitID:n, ruotsalaisen BankID:n ja suomalaisen luottamusverkoston palveluiden yhteydessä tai useita eID-vaihtoehtoja sisältävillä valintasivuilla. 

Jos haluat nähdä esimerkin Custom UI:n käytöstä, voit tutustua kuvitteellisen "Cool Energy" -yhtiön muokattuun kirjautumissivuun. Oheisessa kuvassa näet oletusarvoisen, muokkaamattoman tanskalaisen MitID-kirjautumisliittymän:

mitid_defualt

Käyttämällä Custom UI -toimintoamme voit muokata kirjautumissivun sisältämään brändi-ilmeesi lisäksi muutakin asiakkaillesi tärkeää tietoa.

Mahdollisuudet ovat rajattomat. 

Tässä on esimerkki siitä, kuinka kuvitteellinen energiayhtiömme voisi hyödyntää ominaisuutta:

custom_ui_mitid_cool_energy

Kuinka ominaisuutta voi soveltaa?

Custom UI -ratkaisumme soveltuu erinomaisesti muun muassa seuraavanlaisiin käyttötapauksiin:

1. Asiakastuen yksinkertaistaminen

Voit vastata asiakkaidesi mahdollisiin huolenaiheisiin tai kysymyksiin tarjoamalla hyödyllistä tietoa jo kirjautumissivulla. 

Esimerkiksi: 

  • Yhteystiedot: Lisää puhelinnumeroita, sähköpostiosoitteita tai linkki reaaliaikaiseen asiakastukeen, jotta asiakas löytää tarvittaessa heti apua. 
  • Lisätiedot: Voit antaa palvelupäivityksiä tai muita tärkeitä ilmoituksia suoraan kirjautumissivulla. Voit myös jakaa linkin usein kysyttyjen kysymysten sivulle 

2. Käyttäjäkokemuksen parantaminen

Custom UI -käyttöliittymällä voit tehdä kirjautumissivusta brändisi jatkeen. Voit mm: 

  • Soveltaa omaa brändi-ilmettäsi sisällyttämällä brändisi värit, fontit ja kuvat yhtenäisen, visuaalisesti houkuttelevan kirjautumissivun luomiseksi. 
  • Lisätä henkilökohtaista sisältöä: Voit sisällyttää tervetuloviestin tai muuta mukautettua sisältöä sisään kirjautuvien asiakkaiden tervehtimiseen.
  • Lisätä tärkeitä linkkejä: Voit myös lisätä kirjautumissivulle linkkejä relevantteihin resursseihin, asiakirjoihin tai ulkoisille verkkosivuille.

Kuinka otan mukautetun käyttöliittymän käyttöön? 

Prosessi on suoraviivainen.

Lisää vain oma HTML- ja CSS-koodisi luodaksesi haluamasi rakenteen Idura-kirjautumisruudun ympärille.

Voit tehdä tämän suoraan Idura Dashboardin sisäänrakennetun koodieditorin kautta:

custom_ui_dashboard

Kun koodi on valmis, voit aktivoida sen julkaisemalla saman tien.

Taattua laatua

Voit esikatsella muotoilua testiympäristössä ja viedä täsmälleen saman HTML- ja CSS-koodin tuotantoon yhdellä napin painalluksella – kopiointia ja liittämistä ei tarvita.  

Julkaistu versio alkaa välittömästi toimia tuotannossa olevien kirjautumisten yhteydessä. 

Kattavaa opastusta ja inspiraatiota saat täydellisestä dokumentaatiostamme ja esimerkeistämme.

Tule beetatestaajaksi

Mukautetun käyttöliittymän avulla voit auttaa asiakkaitasi paremmin, jakaa arvokasta tietoa tai luoda yksilöllisen brändikokemuksen. 

Voidaksemme kehittää Custom UI -ominaisuutta yhä paremmaksi, kutsumme mukaan beeta-testaajia ja ominaisuutta käyttäviä asiakkaitamme antamaan parannusehdotuksia sekä palautetta. 

Jos haluat olla ensimmäisten joukossa kokeilemassa Custom UI:ta, ota yhteyttä Slackin kautta tai sähköpostitse. Odotamme innolla yhteydenottoasi!