Forestil dig en knap på din WordPress-side, som først viser en kuponkode eller et affiliate-link, når du klikker. En reveal-knap skaber et lille øjeblik af forventning, og så kommer belønningen. Det føles mere som en opdagelse end bare endnu et stykke tekst.
Det giver flere klik, fordi folk trykker for at se, hvad der gemmer sig. Du får også data på, hvor mange der interagerer, så du kan justere kampagner og placeringer, indtil de fungerer optimalt.
“Coupon & Discount Code Reveal Button” gør det nemt at lægge funktionen ind. Ingen kode, ingen bøvl. Du får en knap, der ser pæn ud, viser det skjulte indhold ved klik og hjælper dig med at måle, hvad der virker.
Trin for trin til opsætning og custom style af Coupon & Discount Code Reveal Button i WordPress
Det er nemt at komme i gang med Coupon & Discount Code Reveal Button i WordPress. Gå til Plugins > Add New, søg på navnet, og tjek udvikler og antal installationer for at undgå forkerte kopier. Klik Install, derefter Activate. Pluginet kører bedst på WordPress 6.x+ og PHP 7.4 eller nyere. Der findes også en pro version her.
Åbn et indlæg eller en side, og indsæt “Reveal Button”-blokken i blok-editoren. Udfyld felterne: skriv kuponkoden (fx SPRING15), sæt knapteksten (fx “Vis kupon”), og tilføj et link hvis brugeren skal videre til butikken. Vælg nyt faneblad ved behov, og beskyt med rel=”noopener”.
Bruger du affiliate-links, så læg UTM-parametre direkte i linket for tracking. Pretty Links eller ThirstyAffiliates virker fint, brug den cloaked URL som destination, så tæller både reveal og klik i dit affiliate-dashboard.
Giv knappen et udtryk, der passer til designet. I blok-indstillingerne justerer du typografi, farver, kant og afstande:
- Fontstørrelse på 18 – 20 px er tydelig
- Border-radius på 8 – 12 px giver bløde hjørner
- Padding på 12 – 16 px giver luft omkring teksten
- Hold kontrast på mindst WCAG AA (4,5:1) for læsbarhed
Vil du styre detaljerne, så tilføj CSS under Appearance > Customize > Additional CSS:css .reveal-button.is-style-primary { background:#0E7CFF; color:#fff; border-radius:10px; transition:.2s; } .reveal-button.is-revealed { background:#16a34a; }
Tilføj hover-effekter og tydelige fokus-stater for tastatur, fx outline: 2px solid.
Vælg klikadfærd efter behov:
- Reveal koden på stedet,
- Reveal + auto-copy med feedback som “Kopieret”,
- Reveal + åbn link i nyt faneblad. Vær tydelig om hvad der sker ved tryk.
Tænk tilgængelighed ind. Brug aria-expanded på knappen og id/aria-controls på det skjulte område. Test navigation med Tab, Enter og Space. Sørg for tydelig fokusmarkering, fx en 3 px outline eller markant farveskift.
Undgå flere plugins til samme reveal-funktion, da de ofte clasher via JavaScript-events. Tjek Console for fejl hvis noget driller. Bruges cache/minify som Autoptimize eller Cloudflare, så ekskluder pluginets JS fra defer, hvis triggeren ikke fyrer.
Hold sikkerheden stram. Brug nofollow/sponsored på affiliate-links i blokken. Skjul kuponkoder indtil klik, så de ikke ligger i klartekst i HTML.
Mål effekten i Google Analytics via events (fx click_reveal_coupon) i gtag.js eller Tag Manager, og match mod affiliate-rapporter for indblik i konverteringer. Test forskellige tekster (“Vis kupon” vs “Hent rabat”) og farver. Små ændringer flytter ofte resultater.
Clipboard API kan fejle i Safari privat tilstand. Pluginet viser så en fallback-tekst, der beder om manuel kopiering. Overskriver temaet dine styles, så øg CSS-specificitet (.wp-block .reveal-button), eller brug !important som sidste udvej.