Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Aktualizace: 12. únor 2021

Návod na vlastní design pro kolo štěstí

Postup pro vytvoření kola štěstí s vlastním HTML a CSS kódem


HTML a CSS pro kolo štěstí

Základní HTML layout


<main class="mlctr-underlayer ml-v-2" role="ml" style="background-color:rgba(0, 0, 0, 0.65)">
<form onsubmit="return mailocator.action.do('subscribe')">
<div class="mlctr-wheel mlctr-flex" style="width: 600px">
...
</div>
</form>
</main>

vložte základní kostru přesně v níže uvedeném pořadí tagů. Toto pořadí tagů je povinné.
<main> představuje vrstvu pozadí s nastavenou průhledností
<form> pro odeslání dat do Mailocatoru akcí subscribe
<div class="mlctr-wheel ... výchozí element definující typ kampaně pomocí třídy .mlctr-wheel a s výchozí šířkou


Základní CSS

@import url('https://www.cdn-ml.net/css/mailocator-v2.1.css');

/* background */
.mlctr-underlayer { position:fixed; z-index:99999; width: 100%; height: 100%; top:0px; left:0px; right:0px; bottom:0px;) }

/* campaign */
.mlctr-wheel {
position: relative;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow:hidden;
}

vložte doporučenou sadu stylů pro kampaně v Mailocatoru, verzi mailocator-v2.1.css nebo novější
vynechání této sady může ovlivnit chování animací, responzivity a způsobit nežádoucí chování nebo zobrazení

přidejte nutné minimum stylů pro vykreslení vycentrovaného elementu určeného pro zobrazení obsahu okna, tedy alespoň pro .mlctr-underlayer.mlctr-wheel


Vložení vlastního kola

Grafika a formát

Pro přípravu kola grafikem doporučujeme vytvořit defaultní kolo rozdělené na požadovaný počet segmentů, stáhnout si SVG zdroj a předat grafikovi k dalším úpravám.
Kolo musí mít vždy stejnou výšku a šířku, případné stíny a další designové prvky je třeba vložit jako separátní elementy s vlastním pozicováním.
Striktně doporučujeme kolo připravit ve vektorovém formátu SVG, ale je možné využít i rastrové formáty JPG nebo PNG.


Způsob vložení

Kolo lze vložit buď jako obrázek pomocí tagu <IMG> nebo jako XML zdroj v tagu <SVG>.
Kolo můžete umístit na libovolné místo, excentricky, částečně skryté nebo jiným způsobem.
Kolo nevyžaduje žádné povinné stylování.

Vložení jako obrázek:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" width="500" height="500" data-pointer_deg="0">

Vložení SVG na přímo:
<svg id="mlctr_wheel" width="500" height="500" data-pointer_deg="0" viewBox="20 20 460 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ... </svg>


Označení kola

Kolo musí být označené atributem id="mlctr_wheel"
Příklad:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" ...
<svg id="mlctr_wheel" ...


Nastavení ukazatele výhry

Ukazatel výhry může být v libovolném tvaru a můžete jej umístit kdekoli po obvodu kola. Aby došlo ke správnému ukázání výhry, je třeba Mailocatoru říct, kde se ukazatel nachází. Nastavení je třeba provést pomocí atributu data-pointer_deg na obrázku kola, kam zapíšete číslo s počtem stupňů, které se liší od výchozí pozice, která se nachází na 3 hodinách resp. 90 stupních.

pokud je ukazatel umístěn na 3 hodinách (vpravo uprostřed), jde o výchozí pozici a atribut není třeba nastavovat nebo nastavit na 0
pokud je ukazatel umístěn nahoře na 12 hodinách (nahoře uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy -90 stupňů: data-pointer_deg="-90"
pokud je ukazatel umístěn dole na 6 hodinách (dole uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy 90 stupňů: data-pointer_deg="90"
pokud je ukazatel umístěn dole na 9 hodinách (vlevo uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy 180 stupňů: data-pointer_deg="180"

Tímto způsobem můžete umístit pozici ukazatele kamkoli, pouze musíte uvést dopočítanou pozici ve stupních.

Příklad:
<img src="https://example.com/my-wheel.svg" data-pointer_deg="90" ...
<svg id="mlctr_wheel" data-pointer_deg="90" ...


POMOHL VÁM TENTO ČLÁNEK?

SOUVISEJÍCÍ

Návod na vlastní design pro kolo štěstí

Postup pro vytvoření kola štěstí s vlastním HTML a CSS kódem

Jak na Thank you page v Mailocatoru?

Podívejte se jak lépe přivést své budoucí zákazníky zpátky na svůj web pod dokončení ověřovacího procesu.

Kolo štěstí

Oblíbeným gamifikačním prvkem je kolo štěstí, ve kterém je uživateli nabídnutá odměna za poskytnutí údajů nebo přihlášení odběru k newsletterů.

Označení konverze kampaně pomocí akcí

Kde nedochází k automatickému označení kampaně jako konvertované (např. přihlášení k newsletteru), je možné konverzi přidat pomocí akce a lépe tak vyhodnotit úspěšnost kampaně.

Laboratoř pro testování scénářů

Snadná cesta, jak si ověřit funkčnost scénáře v Mailocatoru je spustit laboratoř, kde vidíte celý průběh zpracování v čase včetně vyhodnocení podmínek a akcí uživatele

Vypnutí a zapnutí Mailocatoru parametrem v URL

Pokud potřebujete načas omezit kampaně a není k dispozici UTM parametr, můžete použít interní parametr Mailocatoru

Stojíte na začátku?

Individuální poradenství

Nevíte, jak zlepšit výsledky vašich kampaní, anebo máte pochybnosti o efektivitě vaší práce? Rádi vám poradíme přímo s vašimi daty a ve vašich kampaních.

Vyberte si, s čím chcete poradit, která data vašich kampaní zlepšit a které novinky vás zajímají.

Zeptejte se...

Školení

Vyberte si z nabídky našich školení, nejsou omezená platformou, mohou být pojatá obecně ale i přesně zacílená na vaše potřeby. Místo školení nerozhoduje.

- obecné školení
- školení na míru
- on-line školení

Nabídka školení

Technická podpora

Pracovníci naší technické podpory jsou vám ochotni kdykoli poradit s vašimi dotazy. Ať již se týkají vlastního nastavení nebo jeho kontroly.

Jsme vám k dispozici on-line - e-mail, instant messaging - i prostřednictvím telefonu.