Miten lisään Termly-evästebannerin Website Builder -sivustolleni?

Termly-lisäosan avulla voit käyttää edistynyttä evästebanneria, jonka asetuksia ja ulkoasua voit muokata, sekä monia muita hyödyllisiä ominaisuuksia, jotka voivat auttaa verkkosivustoasi noudattamaan tietosuojalakeja.

Alla näytämme vaiheet, joiden avulla voit lisätä Termly-evästebannerin Website Builder -sivustollesi koodikomponentin avulla.

Katsotko mieluummin videon samasta aiheesta?
Olemme tehneet myös videon, jossa näytämme, miten käytät Termly-hallintapaneelia ja lisäät evästebannerin Website Builder -sivustollesi: katso YouTubessa.

• Ennen kuin aloitat
• Vaihe 1 - Poista evästebanneri käytöstä Website Builder -hallintapaneelissa
• Vaihe 2 - Kirjaudu sisään Termly-hallintapaneeliin
• Vaihe 3 - Tee evästetarkistus sivustollesi
• Vaihe 4 - Muokkaa evästebanneria
• Vaihe 5 - Kopioi evästebannerin HTML-koodi
• Vaihe 6 - Valitse koodikomponentti Website Builderissä
• Vaihe 7 - Upota evästebannerin koodi sivustollesi
• Vaihe 8 - Muuta koodi-komponentin asetuksia
• Vaihe 9 - Upota Evästeasetukset-sivun koodi sivustollesi
• Vaihe 10 - Säädä Evästeasetukset-sivun linkin sijoittelua ja tyyliä
• Vaihe 11 - Tallenna ja julkaise sivustosi

Ennen kuin aloitat

Jotta voit lisätä edistyneen evästebannerin Website Builder -sivustollesi, tarvitset Termly-tilauksen ja Website Builderin koodikomponentin, joka sisältyy Website Builder Premium- ja Business + Verkkokauppa -paketteihin. 

Vaihe 1 - Poista evästebanneri käytöstä Website Builder -hallintapaneelissa

Jos käytät jo Website Builderin oletusevästebanneria (joka on myös Termlyn tarjoama), poista se käytöstä, ennen kuin upotat premium-evästebannerin sivustollesi.

1. Avaa Website Builder -hallintapaneeli one.com-ohjauspaneelista.
2. Klikkaa Verkkosivuston asetukset ja valitse Evästebanneri vasemmanpuoleisessa valikossa.
3. Varmista, että evästebanneri ei ole käytössä – liukukytkimen pitäisi näkyä harmaana. Jos evästebanneri on aktiivinen, poista se käytöstä klikkaamalla kytkintä.
4. Julkaise sivustosi.

Vaihe 2 - Kirjaudu sisään Termly-hallintapaneeliin

1. Kirjaudu sisään one.com-ohjauspaneeliin ja klikkaa Lisäasetukset-kohdan alla Termly.

   

2. Klikkaa sinistä Siirry Termlyyn -painiketta. Jos sinulla ei vielä ole Termly-tilausta, voit ostaa sen tältä sivulta.

   

3. Kirjoita sähköpostiosoitteesi ja Termly-salasanasi ja klikkaa Kirjaudu sisään -painiketta, niin pääset Termly-hallintapaneeliin.

Vaihe 3 - Tee evästetarkistus sivustollesi

1. Klikkaa Termly-hallintapaneelin vasemmassa valikossa Consent management > Cookies.
2. Klikkaa Scan now.

Vaihe 4 - Mukauta evästebanneria

1. Klikkaa vasemmanpuoleisessa valikossa Consent management > Consent Banner. Tällä sivulla voit säätää bannerin asetuksia ja ulkoasua.
2. Kun olet valmis, klikkaa Save sivun alareunassa.

Lisätietoja bannerin ulkoasusta ja asetuksista löydät oppaastamme.

Vaihe 5 - Kopioi evästebannerin HTML-koodi

1. Klikkaa Consent Banner -sivulla Install-painiketta sivun yläreunassa.
2. Avautuneessa ponnahdusikkunassa näet evästetarkistuksen tilan ja bannerin asennuksen seuraavat vaiheet. Klikkaa Embed vaiheen 2 alla.
3. Klikkaa seuraavassa ikkunassa Plain HTML.
4. Näet nyt koodin, joka pitää lisätä Website Builderin koodikomponenttiin. Voit myös valita, haluatko aktivoida Auto Blocker -ominaisuuden. Kopioi koodi klikkaamalla Copy to clipboard.

Vaihe 6 - Valitse koodikomponentti Website Builderissä

1. Siirry Website Builder -editoriin.
2. Klikkaa vasemmalla olevassa valikossa Lisää ja valitse Koodi.

Vaihe 7 - Upota evästebannerin koodi sivustollesi

1. Valitse ponnahdusikkunassa Ennen sulkevaa </head>-tunnistetta kohdassa Koodin sijoittaminen.
2. Liitä evästebannerin komentosarja kenttään ja klikkaa Tallenna.

Vaihe 8 - Muuta koodi-komponentin asetuksia

1. Näet nyt koodikomponentin sivusi yläreunassa editorissa. Klikkaa sitä avataksesi sen asetukset.
2. Klikkaa koodikomponentin asetuksissa Sijainti ja valitse valintaruutu kohdassa Käytä kaikilla sivuilla, jotta evästebanneri voidaan näyttää sivustosi kaikilla sivuilla.

Vaihe 9 - Upota Evästeasetukset-sivun koodi sivustollesi

Evästebannerin lisäksi suosittelemme, että lisäät sivustollesi Preference center- eli evästeasetukset-linkin. Klikkaamalla sitä kävijät voivat muuttaa evästeasetuksiaan.

1. Luo Website Builder -editorissa toinen koodikomponentti klikkaamalla Lisää ja sitten Koodi vasemmanpuoleisessa valikossa.

2. Valitse ponnahdusikkunassa koodin sijainniksi Normaali.

3. Kopioi ja liitä seuraava koodi kenttään ja klikkaa Tallenna:

<a href="#" class="termly-display-preferences" style="color:#000000;">Evästeasetukset</a>

Vaihe 10 - Säädä Evästeasetukset-linkin sijoittelua ja tyyliä

1. Vedä Evästeasetukset-linkin koodikomponentti siihen kohtaa sivulla, johon haluat sijoittaa linkin. Suosittelemme sijoittamaan sen alatunnisteeseen, sillä se näkyy silloin kaikilla sivuilla.

2. Voit muuttaa linkin ulkonäköä säätämällä sen koodia CSS-tyyleillä. Klikkaa koodi-komponenttia, valitse Muokkaa koodia ja lisää haluamasi CSS-tyylit.
   Alla olevassa esimerkissä olemme määrittäneet linkin värin mustaksi ja poistaneet alleviivauksen:

<a href="#" class="termly-display-preferences" style="color:#000000; text-decoration: none;">Evästeasetukset</a>

Vaihe 11 - Tallenna ja julkaise sivustosi

Tallenna ja julkaise verkkosivustosi, jotta muutokset näkyvät verkossa.

Tarkista vielä, että evästebannerisi toimii. Avaa sivustosi incognito-tilassa, ja katso, näetkö evästebannerin. Jos et näe evästebanneria, kokeile tyhjentää evästeet ja tarkista, että olet suorittanut kaikki yllä olevat vaiheet.

Aiheeseen liittyviä artikkeleita:

• Termlyn käytön aloittaminen
• Tarvitsenko evästebannerin sivustolleni?