Recruitis.io - Vlastní HTML šablony pracovních nabídek

Při přípravě pracovní nabídky pro kandidáta jste doposud měli k dispozici výchozí šablonu, do které jste pouze doplnili potřebné údaje a měli jste tak rychle připravenou nabídku. Pokud vám však výchozí šablona není dostačující nebo potřebujete přidat další proměnné či vlastní design, nyní máte možnost vytvořit si vlastní šablony v HTML editoru a definovat vlastní proměnné.

Nastavení šablony a proměnných v HTML editoru

Šablona

Pokud si přejete vytvořit novou šablonu vzhledu PDF dokumentu, který se posílá v rámci offer managementu kandidátovi, přejděte do Nastavení | Šablony pracovních nabídek, kde najdete HTML editor.

V editoru můžete:

definovat vzhled PDF dokumentu ve formátu HTML
a také přidat vlastní proměnné, které chcete zobrazit na pracovní nabídce

Proměnné

Vlastní proměnné můžete jednoduše přidat pod HTML editorem. Můžete určit, zda se jedná o text, datum nebo datum a čas. Po přidání se proměnná zobrazí mezi dostupnými proměnnými, které můžete vybrat pro editaci šablony. Tyto proměnné se po vybrání příslušné šablony také zobrazí v rámci formuláře pro tvrobu nabídky.

Zobrazení proměnných v datech a v PDF

V rámci nabídky jsou scénáře, kdy potřebujete mít určitou hodnotu viditelnou interně pro schvalovatele, ale nechcete ji zobrazovat uchazeči v rámci jeho PDF. Např. chcete mít pole "Náhrada za", kde bude napsáno jméno kolegy, kterého nový zaměstnanec bude nahrazovat. V takovém případě vytvoříte proměnnou, ale nepoužijete ji v rámci HTML kódu pro tvorbu PDF.

Doporučení pro nastavení HTML

V rámci HTML kódu nejsou žádná zásadní omezení kromě těch, která vyplývají z toho, že HTML kód bude převeden do formátu PDF pro tisk. Neboli, kandidát si ho bude moci uložit a pravděpodobně i vytisknout.

Pro vkládání obrázků a grafiky je nutné, aby byly vloženy přímo v HTML kódu ve fromátu Base64 - např.: background-image: url(data:image/png;base64,iVBORw0KGgoAAAAN...CHY65G7AA=)
Pro správné formátování na A4 stránku doporučujeme umístit následující HTML kód nv sekci <style>.

💡 Funkce offer managementu jsou dostupné pouze v rámci Premium a Enterprise licencí. Pro aktivaci HTML editoru se prosím obratťe na podpora@recruitis.io

💡 Přiklad HTML kódu kompletní nabídky:

_{<!DOCTYPE html>}

_{<html lang="cs">}

_<head>

_{<meta charset="UTF-8">}

_{<meta name="viewport" content="width=device-width, initial-scale=1.0">}

_{<title>Pracovní nabídka - Prémiový kontrakt</title>}

_<style>

_{:root {}

_{--ink: #202124;}

_{--muted: #687076;}

_{--line: #c8d1d9;}

_{--blue: #0b5cad;}

_{--mint: #a7ead6;}

_{--paper: #f7f9fb;}

_{--white: #ffffff;}

_{--gold: #c49a3a;}

_}

_{* { box-sizing: border-box; }}

_{body {}

_{margin: 0;}

_{background: #dfe6ec;}

_{color: var(--ink);}

_{font-family: "Aptos", "Segoe UI", Tahoma, sans-serif;}

_{line-height: 1.5;}

_}

_{.sheet {}

_{width: min(980px, calc(100% - 28px));}

_{margin: 30px auto;}

_{background: var(--white);}

_{border: 1px solid #cfd8df;}

_{box-shadow: 0 22px 55px rgba(36, 48, 61, 0.13);}

_}

_{.masthead {}

_{min-height: 250px;}

_background:

_{linear-gradient(135deg, rgba(11,92,173,0.96), rgba(18,35,55,0.96)),}

_{repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.16) 18px 19px);}

_{color: white;}

_{padding: 38px 42px;}

_{display: grid;}

_{grid-template-columns: 1fr 220px;}

_{gap: 34px;}

_{align-items: end;}

_}

_{.doc-type {}

_{display: inline-block;}

_{margin-bottom: 26px;}

_{padding: 7px 10px;}

_{border: 1px solid rgba(255,255,255,0.35);}

_{color: var(--mint);}

_{font-size: 12px;}

_{font-weight: 800;}

_{letter-spacing: 1.8px;}

_{text-transform: uppercase;}

_}

_{h1 {}

_{margin: 0;}

_{font-size: 54px;}

_{line-height: 1.02;}

_{letter-spacing: 0;}

_}

_{.company {}

_{margin-top: 16px;}

_{color: #d7ecff;}

_{font-size: 18px;}

_{font-weight: 700;}

_}

_{.validity {}

_{background: rgba(255,255,255,0.1);}

_{border: 1px solid rgba(255,255,255,0.22);}

_{padding: 20px;}

_}

_{.validity span,}

_{.field span,}

_{.summary span {}

_{display: block;}

_{color: var(--muted);}

_{font-size: 11px;}

_{font-weight: 900;}

_{letter-spacing: 1.3px;}

_{text-transform: uppercase;}

_}

_{.validity span { color: rgba(255,255,255,0.68); }}

_{.validity b { display: block; color: #fff; font-size: 18px; margin-top: 8px; }}

_{.body {}

_{padding: 38px 42px 46px;}

_}

_{.recipient {}

_{display: grid;}

_{grid-template-columns: 1fr 1fr 1fr;}

_{gap: 14px;}

_{margin-bottom: 32px;}

_}

_{.summary {}

_{background: var(--paper);}

_{border: 1px solid var(--line);}

_{padding: 18px;}

_}

_{.summary b {}

_{display: block;}

_{margin-top: 8px;}

_{font-size: 18px;}

_{line-height: 1.25;}

_}

_{.message {}

_{max-width: 780px;}

_{margin: 0 0 34px;}

_{color: #35404a;}

_{font-size: 18px;}

_}

_{.section-title {}

_{margin: 0 0 14px;}

_{display: flex;}

_{align-items: center;}

_{gap: 14px;}

_{color: var(--blue);}

_{font-size: 14px;}

_{font-weight: 900;}

_{letter-spacing: 1.5px;}

_{text-transform: uppercase;}

_}

_{.section-title::after {}

_{content: "";}

_{height: 1px;}

_{flex: 1;}

_{background: var(--line);}

_}

_{.fields {}

_{display: grid;}

_{grid-template-columns: repeat(4, minmax(0, 1fr));}

_{border-top: 1px solid var(--line);}

_{border-left: 1px solid var(--line);}

_}

_{.field {}

_{min-height: 106px;}

_{padding: 16px;}

_{border-right: 1px solid var(--line);}

_{border-bottom: 1px solid var(--line);}

_}

_{.field b {}

_{display: block;}

_{margin-top: 10px;}

_{font-size: 17px;}

_{line-height: 1.22;}

_}

_{.compensation {}

_{margin: 32px 0;}

_{display: grid;}

_{grid-template-columns: 1fr 1fr;}

_{gap: 0;}

_{border: 1px solid var(--blue);}

_}

_{.money {}

_{padding: 26px;}

_{background: #ffffff;}

_}

_{.money + .money { border-left: 1px solid var(--blue); }}

_{.money span { color: var(--blue); }}

_{.money b { display: block; margin-top: 8px; font-size: 34px; line-height: 1.05; }}

_{.note {}

_{padding: 24px;}

_{background: #fff8df;}

_{border: 1px solid #ead9a5;}

_{color: #493c1f;}

_}

_{.footer {}

_{margin-top: 34px;}

_{padding-top: 22px;}

_{border-top: 1px solid var(--line);}

_{display: grid;}

_{grid-template-columns: 1fr auto;}

_{gap: 28px;}

_{align-items: center;}

_}

_{.stamp {}

_{padding: 12px 16px;}

_{border: 2px solid var(--gold);}

_{color: var(--gold);}

_{font-weight: 900;}

_{letter-spacing: 1.5px;}

_{text-transform: uppercase;}

_{transform: rotate(-2deg);}

_}

_{@media (max-width: 820px) {}

_{.masthead, .recipient, .fields, .compensation, .footer {}

_{grid-template-columns: 1fr;}

_}

_{.body, .masthead { padding: 28px 22px; }}

_{h1 { font-size: 39px; }}

_{.money + .money { border-left: 0; border-top: 1px solid var(--blue); }}

_}

_</style>

_</head>

_<body>

_{<main class="sheet">}

_{<header class="masthead">}

_<div>

_{<span class="doc-type">Pracovní nabídka</span>}

_{<h1>%POSITION%</h1>}

_{<div class="company">%COMPANY%</div>}

_</div>

_{<aside class="validity">}

_{<span>Platnost nabídky</span>}

_{<b>%DATE_START% - %DATE_END%</b>}

_{<span style="margin-top:18px;">Nástup</span>}

_{<b>%DATE_START%</b>}

_</aside>

_</header>

_{<section class="body">}

_{<div class="recipient">}

_{<div class="summary"><span>Kandidát</span><b>%FULLNAME%</b></div>}

_{<div class="summary"><span>Oslovení</span><b>%SALUTATION% %SALUTATION_SURNAME%</b></div>}

_{<div class="summary"><span>Rod</span><b>%GENDER%</b></div>}

_</div>

_{<p class="message">}

_{%SALUTATION_SURNAME%, děkujeme za dosavadní jednání. S radostí Vám předkládáme}

_{nabídku na pozici <strong>%POSITION%</strong> u společnosti <strong>%COMPANY%</strong>.}

_</p>

_{<h2 class="section-title">Podmínky spolupráce</h2>}

_{<section class="fields">}

_{<div class="field"><span>Pracovní poměr</span><b>%EMPLOYMENT%</b></div>}

_{<div class="field"><span>Typ smlouvy</span><b>%CONTRACT_TYPE%</b></div>}

_{<div class="field"><span>Místo výkonu práce</span><b>%PLACE_OF_WORK%</b></div>}

_{<div class="field"><span>Týdenní pracovní doba</span><b>%WORKING_HOURS%</b></div>}

_{<div class="field"><span>Úvazek</span><b>%FTE%</b></div>}

_{<div class="field"><span>Délka zkušební doby</span><b>%TEST_TIME%</b></div>}

_{<div class="field"><span>Vlastní proměnná 1</span><b>%MOJE_PROM_NN__1%</b></div>}

_{<div class="field"><span>Vlastní proměnná 2</span><b>%MOJE_PROM_NN__2%</b></div>}

_</section>

_{<section class="compensation">}

_{<div class="money"><span>Měsíční mzda</span><b>%WAGE_MONTHLY%</b></div>}

_{<div class="money"><span>Roční mzda</span><b>%WAGE_YEARLY%</b></div>}

_</section>

_{<section class="note">}

_{<strong>Poznámka pro kandidáta:</strong> %NOTE%}

_</section>

_{<footer class="footer">}

_<div>

_{<strong>%COMPANY%</strong><br>}

_{Nabídka je připravena pro %FULLNAME% a vztahuje se k pozici %POSITION%.}

_</div>

_{<div class="stamp">Proposal</div>}

_</footer>

_</section>

_</main>

_</body>

_</html>