Hüpikvormide loomine ja kuvamine

Published: 16. juuli 2026 · Last updated: 21. juuli 2026 · By Marcus Biel

Hüpikaken kuvatakse teie veebisaidi sisu kohal. See asetab registreerumispakkumise külastaja otsesesse vaatevälja, jättes taustal oleva lehe paigale.

Hüpikaknad sobivad uudiskirjapakkumiste, allahindluste, üritustele registreerumise, juhtmagnetite ja muude fookustatud üleskutsete jaoks. Kuna need katkestavad lehe tavapärase kasutuskogemuse, on ajastus ja sagedus sama olulised kui kujundus.

Selles juhendis käsitletakse hüpikakendele omaseid seadeid. Paigutusi, sisublokke, tellijavälju, silte, tüpograafiat, kihte ja registreerumisvooge käsitletakse põhjalikus registreerumisvormi koostaja juhendis.

Hüpikakna loomine

Avage „Signup Forms“, klõpsake „Create Form“ ja valige „Popup“. Sisestage selge sisemine nimi ning jätkake koostajasse.

Olemasolevat hüpikakent saate muuta ka, klõpsates selle nimel registreerumisvormide ülevaates.

Kasutage nime, mis kirjeldab pakkumist või paigutust, näiteks „Homepage Discount Popup“, „Webinar Registration Popup“ või „Guide Download Popup“. Sisemist nime ei kuvata külastajatele automaatselt.

Hüpikakna malli valimine

Hüpikakende jaoks on saadaval tühi vorm, standardvorm ja neli kujundatud malli:

• Puhas allahindlus
• S soe juhend
• Tume veebiseminar
• Pehme kogukond

Valige mall, mille suurus ja sisu struktuur sobivad pakkumisega. Kõiki tekste, välju, värve, pilte, vahesid ja paigutust saab hiljem muuta.

Hüpikakna kujundamine

Kasutage visuaalset koostajat hüpikakna paigutamiseks. Registreerumisvormi saate kombineerida teksti, piltide, video, loendite, nuppude, sotsiaalmeedialinkide, tellijaloenduri, vahede ja eraldajatega.

Hoidke põhisõnum piisavalt lühikesena, et sellest saaks kohe aru. Selge pealkiri, üks lühike selgitus ja konkreetne saatmisnupp on tavaliselt tõhusamad kui mitu konkureerivat sõnumit.

Valige registreerumisvormi blokk, et seadistada välju, nõutavat teavet, peidetud silte, edenemisnäidikut, tellijaloendurit, sisestusvälju ja saatmisnuppu. Üldise hüpikakna tausta ja välimuse vaikeseadete muutmiseks avage „Page settings“.

Hüpikaken kuvatakse veebisaidi kohal koos sulgemisnupuga. Jätke olulise teksti ja väljade ümber piisavalt visuaalset ruumi, et vormi oleks väikesel ekraanil lihtne kasutada.

Hüpikakna käitumise seadistamine

Valige registreerumisvormi blokk ja avage „Widget Settings“. Selles jaotises määratakse, millal hüpikakent kuvatakse ja kui sageli külastaja seda näeb.

Kuvamise viivitus

„Display Delay“ määrab, mitu sekundit Maildroppa ootab enne hüpikakna kuvamist manustatud veebisaidi lehel.

Sisestage 0, et kuvada see ilma täiendava viivituseta. Kasutage suuremat väärtust, kui külastajatel peaks olema aega lehte enne pakkumise ilmumist lugeda. Koostaja lubab viivitust kuni 86 400 sekundit.

Valige viivitus lehe põhjal. Lühike viivitus võib sobida fookustatud kampaanialehel, samas kui pikem viivitus võib artiklis vähem häirivana mõjuda.

Kuvamissagedus

„Display Frequency“ määrab ajavahemiku, mille möödudes saab hüpikakent samale külastajale uuesti kuvada. Saadaval on järgmised valikud:

• Alati
• Kord tunnis
• Kord päevas
• Kord nädalas
• Kord kuus

Kasutage valikut „Always“ ettevaatlikult. Sama külastajat korduvalt katkestav hüpikaken võib muutuda häirivaks. Üldise veebisaidipakkumise puhul on sageli parem lähtekoht igapäevane või iganädalane sagedus.

Sagedus salvestatakse külastaja brauserisse. Seetõttu võib teises brauseris, privaatses sirvimisaknas või kustutatud brauserisalvestusega testimine anda teistsuguse tulemuse.

Väljumiskavatsuse kasutamine

Lubage „Exit Intent Popup“, kui hüpikaken peaks avanema pärast seda, kui külastaja liigutab kursori lehe alast välja, mis näitab, et ta võib olla lahkumas.

Kui väljumiskavatsus on lubatud, ootab hüpikaken tavapärase viivitusega kuvamise asemel seda käitumist. Valitud kuvamissagedus takistab selle liiga varast uuesti kuvamist.

Väljumiskavatsus põhineb kursori liikumisel ja on seetõttu peamiselt oluline laua- ja sülearvutite brauserites. Puuteseadmed ei anna sama väljumissignaali. Veenduge alati, et mobiilikülastajad saaksid teie registreerumispakkumise lehe enda või mõne muu sobiva vormi kaudu siiski avastada.

Hüpikakna käsitsi avamine leheelemendist

Hüpikaken võib avaneda, kui külastaja klõpsab teie veebisaidil kindlal nupul, pildil või lingil. See on käsitsi klõpsupäästik. See erineb valikust „Exit Intent Popup“, mis reageerib sellele, kui külastaja liigutab kursori lehe alast välja.

Seadistage ja paigaldage käsitsi klõpsupäästik järgmiselt:

1. Avage hüpikaken registreerumisvormi koostajas.
2. Klõpsake lõuendil registreerumisvormi blokki ja avage paremal „Settings“.
3. Laiendage „Widget Settings“ ja lubage „Open popup when a customer clicks a page element“.
4. Klõpsake „Save changes“.
5. Minge tagasi registreerumisvormide ülevaatesse ja aktiveerige hüpikaken, kui see on inaktiivne.
6. Klõpsake selle hüpikakna real „Show Code Snippet“.

Dialoog sisaldab kahte teie veebisaidil vajalikku väärtust:

1. Kopeerige kogu kood vahekaardilt „JavaScript“ ja lisage see veebisaidi lehele, kus hüpikaken peab saadaval olema.
2. Kopeerige koodi alt väärtus, mis kuvatakse jaotises „Add this ID to element from which you want to manually trigger Popup“.
3. Lisage see täpne väärtus selle nupu, pildi või lingi id-atribuuti, mis peab hüpikakna avama.

ID järgib järgmist vormingut:

maildroppa-popup-btn-[form-id]

Näiteks:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript laadib hüpikakna. ID ühendab hüpikakna valitud leheelemendiga. Mõlemad peavad olema samal avaldatud lehel. Kui külastaja klõpsab täpselt selle ID-ga elemendil, avab Maildroppa skript hüpikakna.

Kui teie veebisaidi nupul on juba mõne muu hüpikaknasüsteemi ID, asendage see Maildroppa päästiku ID-ga, kui Maildroppa peaks klõpsu haldama. Ärge paigutage Maildroppa hüpikakent teise hüpikakna sisse, mida teie veebisaidikoostaja pakub.

Kasutage iga HTML-i ID-d lehel ainult üks kord. Kui mitu elementi peaksid avama sama hüpikakna, paluge veebisaidi rakendajal need elemendid ühendada ilma sama ID-d dubleerimata.

Registreerumisvoo ühendamine

Vaadake üle koostaja päises määratud registreerumisvoog. See juhib saatmise kohest vastust, topeltlubamise e-kirja ja pärast kinnitamist kuvatavat tulemust.

Saate valida olemasoleva voo, seda muuta või luua selle hüpikakna jaoks eraldi voo. Eraldi voog on kasulik, kui pakkumine vajab oma kinnitussõnumit või juhtmagneti edastamist.

Eelvaade ja salvestamine

Klõpsake „Preview“, et kontrollida hüpikakna kujundust ja käitumist ilma teie veebisaidil kasutatavat versiooni muutmata. Vaadake üle paigutus, sulgemisnupp, väljade järjekord, valideerimiseks jäetud ruum ja saatmise vastus.

Kui hüpikaken on valmis, klõpsake „Save changes“. Seejärel minge tagasi registreerumisvormide ülevaatesse.

Hüpikakna automaatne aktiveerimine ja manustamine

Kui hüpikaken pole veel aktiivne, aktiveerige see kolme punktiga toimingumenüüst. Seejärel klõpsake „Show Code Snippet“ ja kopeerige kogu kood vahekaardilt „JavaScript“.

Lisage skript igale veebisaidi lehele, kus hüpikaken peab saadaval olema. Kood sisaldab hüpikakna unikaalset vormi ID-d ja laadib selle hetkel salvestatud konfiguratsiooni.

Vahekaardil „HTML“ on kohandatud rakenduste jaoks loodud märgistus. Kui seda kasutate, testige hoolikalt kogu käitumist ja saatmisetappe, sest teie veebisaidi kood ja stiilid võivad tulemust mõjutada.

See jaotis kehtib siis, kui hüpikaken peaks avanema automaatselt kuvamisviivituse või väljumiskavatsuse alusel. Kui nupp, pilt või link peaks hüpikakna klõpsamisel avama, järgige juhendit

.

Üldised manustamisjuhised leiate juhendist Manustatud vormi loomine ja manustamine.

Hüpikakna testimine veebisaidil

Pärast koodi lisamist testige hüpikakent päris veebisaidi lehel:

1. Kontrollige seadistatud viivitust.
2. Testige sulgemisnuppu ja vormist väljaspool klõpsamist.
3. Kui see on lubatud, liigutage kursor lehe alast välja, et testida väljumiskavatsust.
4. Kui see on lubatud, klõpsake käsitsi päästiku testimiseks seadistatud leheelemendil.
5. Kontrollige paigutust kitsal ekraanil.
6. Saatke vorm ja viige lõpule topeltlubamise protsess.
7. Kontrollige tellijat ja peidetud silte Maildroppas.

Sagedusseade võib korduvate testide ajal takistada hüpikakna uuesti ilmumist. Kui vajate puhast testkülastust, kasutage privaatset sirvimisakent või kustutage asjakohane brauserisalvestus.

Hüpikakna uuendamine või deaktiveerimine

Hüpikakna uuendamiseks avage see Maildroppas, muutke kujundust või käitumist, vaadake eelvaadet ja klõpsake „Save changes“. JavaScripti koodilõik kasutab jätkuvalt sama vormi ID-d.

Selle ajutiseks kuvamise lõpetamiseks valige toimingumenüüst „Deactivate“. Deaktiveerimine säilitab hüpikakna ja varasemad aruandlusandmed. Kui skripti või päästikuelementi pole enam vaja, eemaldage need samuti veebisaidilt.