Custom Activation Pop-up (HTML & CSS) – Anleitung

Überblick

Für Activation Pop-ups bieten wir eine Custom-Pop-up-Funktion, bei der Kund:innen das Pop-up frei über eigenes HTML und CSS gestalten können.
Uptain stellt dafür ein HTML-Grundgerüst und Beispiel-CSS bereit, das als Ausgangspunkt dient und individuell angepasst werden kann.

Typische Use Cases:

Voucher-/Gutschein-Pop-up
Abbruch-/Exit-Intent Pop-up
Aktivierung eines Rabattcodes per Klick oder automatisch

Wie funktioniert das Custom Pop-up?

Das Pop-up besteht aus:

HTML-Struktur
- definiert die Inhalte (z. B. Gutschein-Code, Buttons, Text, Close-Icon)
CSS / Styling
- bestimmt Layout, Größe, Position, Hintergrundbild etc.
- responsive über Breakpoints (Mobile / Tablet / Desktop)
Dynamische Inhalte
- können per Platzhalter eingebunden werden (z. B. {{voucherCode}})

1) HTML – Grundstruktur

Das folgende HTML wird im Custom-Pop-up hinterlegt:

<div class="__up_activation">
  <div id="__up_pop_bg" class="__up_background __up_hidden" data-up-close-event="background"></div>
  <div class="__up_pop __up_hidden __up_visible">
    <button type="button" class="__up_close __up_close_button __up_close_icon" data-up-close-event="close-x">×</button>
    <div class="__up_action">
      <input type="text" class="__up_code_value" value="{{voucherCode}}">
    </div>
  </div>
</div>

Wichtige Bestandteile

__up_pop_bg
→ Background/Overlay (dunkler Hintergrund), wird ebenfalls fürs Schließen genutzt.
__up_pop
→ Container des eigentlichen Pop-ups.
Close Button
→ Schließt das Pop-up (über data-up-close-event="close-x").
{{voucherCode}}
→ Dynamischer Gutschein-Code (Platzhalter wird von Uptain gefüllt).

✅ Hinweis: Die CSS-Klassen sind notwendig, damit Uptain die Elemente korrekt erkennt und steuern kann.

2) CSS – Beispiel-Styling

Wir stellen Beispiel-CSS bereit, das Kund:innen verwenden und anpassen können.
Das Styling nutzt mehrere Variablen, um Anpassungen einfacher zu machen.

A) Muss-Anpassungen (sehr wichtig)

✅ 1. Hintergrundbild ersetzen

In den Variablen:

@popupWidthMobile: 375px;
@popupWidthTablet: 440px;
@popupWidthDesktop: 450px;
@popupHeightMobile: 246px;
@popupHeightTablet: 295px;
@popupHeightDesktop: 295px;

@backgroundImageDesktop: url('https://test.de/Zwischenablage5.jpg?ts=1740392776');
@backgroundImageMobile: url('https://test.de/Zwischenablage5.jpg?ts=1740392776');

@codeTopOffsetMobile: 132px;
@codeTopOffsetTablet: 162px;
@codeTopOffsetDesktop: 162px;
@codeLeftOffsetMobile: 20px;
@codeLeftOffsetTablet: 20px;
@codeLeftOffsetDesktop: 25px;
@codeMaxWidthMobile: 195px;
@codeMaxWidthTablet: 195px;
@codeMaxWidthDesktop: 195px;
@codeFontSizeMobile: 16px;
@codeFontSizeTablet: 16px;
@codeFontSizeDesktop: 16px;
@codeLineHeightMobile: 16px;
@codeLineHeightTablet: 16px;
@codeLineHeightDesktop: 16px;
@codeFontColor: #555;
@codePlaceholderColor: #555;

@closeButtonSize: 24px;
@closeButtonTopOffsetMobile: 12px;
@closeButtonTopOffsetTablet: 14px;
@closeButtonTopOffsetDesktop: 14px;
@closeButtonRightOffsetMobile: 12px;
@closeButtonRightOffsetTablet: 14px;
@closeButtonRightOffsetDesktop: 14px;
@closeButtonColor: #333;

.__up_pop_bg {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  z-index:9998;
  background-color:rgba(0,0,0,0.7);
  transition:visibility .5s, opacity .75s linear;
}

.__up_pop_bg.__up_visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.__up_pop {
  width: @popupWidthMobile;
  height: @popupHeightMobile;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  z-index: 10000;
}

.__up_pop.__up_visible {
  animation-duration: .5s;
  -webkit-animation-name: open-pop;
  animation-name: open-pop;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0s
}

.__up_pop:before {
  content: '';
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: @backgroundImageMobile;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 440px) {
  .__up_pop {
    width: @popupWidthTablet;
    height: @popupHeightTablet;
  }
}

@media screen and (min-width: 756px) {
  .__up_pop {
    width: @popupWidthDesktop;
    height: @popupHeightDesktop;
  }

  .__up_pop:before {
    position: absolute;
    background-image: @backgroundImageDesktop;
    background-position: center left;
  }
}

.__up_action {
  position: absolute;
  text-align: left;
  max-width: @codeMaxWidthMobile;
  left: @codeLeftOffsetMobile;
  top: @codeTopOffsetMobile;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

@media screen and (min-width: 440px) {
  .__up_action {
    top: @codeTopOffsetTablet;
    transform: translateX(0);
    left: @codeLeftOffsetTablet;
    max-width: @codeMaxWidthTablet;
  }
}

@media screen and (min-width: 756px) {
  .__up_action {
    top: @codeTopOffsetDesktop;
    left: @codeLeftOffsetDesktop;
    max-width: @codeMaxWidthDesktop;
  }
}

.__up_pop input::-webkit-input-placeholder {
  color: @codePlaceholderColor;
}

.__up_pop input:-moz-placeholder {
  color: @codePlaceholderColor;
}

.__up_pop input::-moz-placeholder {
  color: @codePlaceholderColor;
}

.__up_pop input:-ms-input-placeholder {
  color: @codePlaceholderColor;
}

.__up_action_button {
  background: #c0bc69;
  border: 0;
  border-radius: 0 4px 4px 0;
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
  transition: all 300ms ease;
}

input.__up_code_value {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 4px 0 0 4px;
  width: 100%;
  color: @codeFontColor;
  box-sizing: border-box;
  transition: all 300ms ease;
  line-height: @codeLineHeightMobile;
  font-size: @codeFontSizeMobile;
  padding: 12px 8px 12px 16px;
  border-right: 0;
  position: relative;
}

@media screen and (min-width: 440px) {
  input.__up_code_value {
    line-height: @codeLineHeightTablet;
    font-size: @codeFontSizeTablet;
  }
}

@media screen and (min-width: 756px) {
  input.__up_code_value {
    line-height: @codeLineHeightDesktop;
    font-size: @codeFontSizeDesktop;
  }
}

input.__up_code_value:focus-visible {
  outline: #eee;
}

input.__up_code_value.__up_code_input_copied {
  border-color: #c0bc69;
}

input.__up_code_value.__up_code_input_copied + .__up_action_button {
  text-shadow: 1px 1px 2px #e1e0b4;
}

.__up_close_button {
  position: absolute;
  right: @closeButtonRightOffsetMobile;
  top: @closeButtonTopOffsetMobile;
  color: @closeButtonColor;
  background: none;
  border: none;
  font-size: @closeButtonSize;
  line-height: @closeButtonSize;
  padding: 0;
  z-index: 1;
  transition: all 300ms ease;
  cursor: pointer;
}

@media screen and (min-width: 440px) {
  .__up_close_button {
    right: @closeButtonRightOffsetTablet;
    top: @closeButtonTopOffsetTablet;
  }
}

@media screen and (min-width: 756px) {
  .__up_close_button {
    right: @closeButtonRightOffsetDesktop;
    top: @closeButtonTopOffsetDesktop;
  }
}

.__up_close_button:hover {
  transform: scale(1.15);
}

@keyframes open-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0)
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes close-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0)
  }
}

A) Muss-Anpassungen (sehr wichtig)

✅ 1. Hintergrundbild ersetzen

In den Variablen:

@backgroundImageDesktop: url('https://.../bild.jpg');
@backgroundImageMobile: url('https://.../bild.jpg');

➡ Kund:innen müssen diese URLs unbedingt ersetzen, wenn sie ein eigenes Hintergrundbild nutzen möchten.

Tipp:

Desktop: Querformat / größere Auflösung
Mobile: optimiertes Bild für Mobile (z. B. kürzerer Fokus, besserer Crop)

✅ 2. Pop-up-Größe prüfen und ggf. anpassen

Die Default-Werte sind:

@popupWidthMobile: 375px;
@popupWidthTablet: 440px;
@popupWidthDesktop: 450px;

@popupHeightMobile: 246px;
@popupHeightTablet: 295px;
@popupHeightDesktop: 295px;

➡ Kund:innen sollten diese Werte überprüfen, wenn:

das Hintergrundbild andere Maße hat
Inhalte abgeschnitten werden
Buttons/Inputs nicht passen

B) Inhalt positionieren (Gutschein-Code / Elemente)

Der Bereich .__up_action ist das Element, das den Gutschein-Code enthält.

Positionierung erfolgt über:

@codeTopOffsetMobile: 132px;
@codeTopOffsetTablet: 162px;
@codeTopOffsetDesktop: 162px;

@codeLeftOffsetMobile: 20px;
@codeLeftOffsetTablet: 20px;
@codeLeftOffsetDesktop: 25px;

@codeMaxWidthMobile: 195px;
@codeMaxWidthTablet: 195px;
@codeMaxWidthDesktop: 195px;

➡ Das ist typischerweise der wichtigste Bereich, den Kund:innen anpassen müssen, damit:

Input exakt über einem “Code-Feld” im Hintergrundbild liegt
oder generell richtig platziert ist

So geht’s:

@codeTopOffset… → verschiebt nach unten/oben
@codeLeftOffset… → verschiebt nach links/rechts
@codeMaxWidth… → max. Breite des Code-Containers

3) Buttons und Input (Styling & Anpassungen)

A) Input-Feld anpassen

Das Input-Feld:

input.__up_code_value { ... }

Anpassbar sind u. a.:

font-size, line-height
padding
Textfarbe via @codeFontColor
Placeholder-Farbe via @codePlaceholderColor

Beispiel:

@codeFontColor: #555;
@codePlaceholderColor: #555;

➡ Wenn der Gutschein-Code auf dem Hintergrund zu schlecht lesbar ist, sollte hier ein höherer Kontrast gewählt werden.

4) Close Button (Position, Farbe, Größe)

Close Button: .__up_close_button

Wichtige Variablen:

@closeButtonSize: 24px;

@closeButtonTopOffsetMobile: 12px;
@closeButtonRightOffsetMobile: 12px;

@closeButtonTopOffsetTablet: 14px;
@closeButtonRightOffsetTablet: 14px;

@closeButtonTopOffsetDesktop: 14px;
@closeButtonRightOffsetDesktop: 14px;

@closeButtonColor: #333;

➡ Wenn Kund:innen den Button versetzen möchten:

@closeButtonTopOffset…
@closeButtonRightOffset…

➡ Wenn er zu klein/groß ist:

@closeButtonSize

5) Responsives Verhalten (Mobile / Tablet / Desktop)

Das Pop-up arbeitet mit Breakpoints:

Mobile: Standard
Tablet: min-width: 440px
Desktop: min-width: 756px

Damit können:

Pop-up-Größe
Background-Image
Positionen des Inputs

je nach Gerät getrennt gesteuert werden.

Beispiel:

@media screen and (min-width: 756px) {
  .__up_pop:before {
    background-image: @backgroundImageDesktop;
  }
}

✅ Wichtig: Kund:innen sollten Desktop- & Mobile-Hintergrundbild getrennt optimieren, weil sonst Cropping/Lesbarkeit nicht passt.

Custom Popups Erstellen

Custom Activation Pop-up (HTML & CSS) – Anleitung

Überblick

Wie funktioniert das Custom Pop-up?

1) HTML – Grundstruktur

2) CSS – Beispiel-Styling

A) Muss-Anpassungen (sehr wichtig)

✅ 1. Hintergrundbild ersetzen

A) Muss-Anpassungen (sehr wichtig)

✅ 1. Hintergrundbild ersetzen

✅ 2. Pop-up-Größe prüfen und ggf. anpassen

B) Inhalt positionieren (Gutschein-Code / Elemente)

3) Buttons und Input (Styling & Anpassungen)

A) Input-Feld anpassen

4) Close Button (Position, Farbe, Größe)

5) Responsives Verhalten (Mobile / Tablet / Desktop)