Hej! W tym artykule znajdziesz informacje o tym jak zmieniać domyślny wygląd ogłoszeń i formularzy TRAFFIT. Dołączyliśmy też listę działających skryptów i styli, wykorzystywanych przez naszych użytkowników.
Czym są skrypty i style i jak z nich korzystać?
W TRAFFIT nie musisz korzystać z domyślnego wyglądu ogłoszenia, lub formularza aplikacyjnego. W specjalnym polu w edycji ogłoszenia możesz wkleić odpowiednie do tego skrypty lub style, które zmodyfikują wygląd części systemu, widocznych dla kandydatów.
Skrypty i style to nic innego, jak parę linijek kodu, nadających np. nowe atrybuty przyciskom (np. zmiana koloru, tekstu), lub umożliwiające dodanie linków do treści klauzuli.
Skrypty możesz umieszczać na pojedynczych ogłoszeniach, w szablonach ogłoszeń oraz na stronie Kariera utworzonej z naszego generatora.
Specjalnie dla Ciebie, przygotowaliśmy listę przykładowych skryptów i styli, z których możesz skorzystać już teraz. Znajdziesz je poniżej 👇
Skrypt wyświetlający w formularzu całą treść obowiązku informacyjnego.
Z tym skryptem wyświetlisz w formularzu aplikacyjnym pełną treść obowiązku informacyjnego, która domyślnie nie wyświetla się w pełni i trzeba użyć przycisku "pokaż więcej".
Skrypt:
<script>
window.onload = function() {
$('.clause-text').each(function(key, value) {
$(value).addClass('text-shown');
});
$('.show-more-btn').each(function(key, value) {
$(value).css('display', 'none');
});
}
</script>
Zmiana LUB usunięcie lokalizacji
Tem skrypt pozwala na naniesienie zmian na liście ogłoszeń. Tyczy się to zarówno listy widocznej na stronie z generatora, jak i z gotowego skryptu umieszczonego na stronie.
Poniższy przykład to skrypt, który pozwala zmienić nazwę miasta (lokalizację) na liście ogłoszeń na słowo Remote:
Skrypt:
input[name="geolocation"] {
display: none !important;
}
.info > .details > div:last-child > span {
display: none;
}
.info > .details > div:last-child:after {
content: "Remote";
}
Drugi przykład to skrypt ukrywający całkowicie lokalizację na liście ogłoszeń:
Skrypt:
input[name="geolocation"] {
display: none !important;
}
.info > .details > div:last-child {
display: none;
}
Styl zmieniający kolor przycisków "Aplikuj" i "Wyślij".
Za pomocą tego stylu, zmienisz kolory przycisków i tekstów w przyciskach "aplikuj" na stronie ogłoszenia i "wyślij" na stronie formularza, na jakie tylko chcesz. Dzięki niemu, utrzymasz wszędzie jednolity branding, związany z Twoją marką. W przykładowo podanym przez nas stylu, podmieniamy kolory na biały font i zielone tło:
Styl:
<style>
/* ADVERT */
.job-post .button--cta, .job-post .job-post__mobile-menu .mobile-menu__button {
color: white;
background-color: #44B759
}
/* FORM */
.traffit-public-form .traffit-public-form__main .main__form .form__button-wrapper .submit-button {
color: white;
background-color: #44B759
}
</style>
Skrypt zmieniający nazwy przycisków w ogłoszeniu i formularzu.
Jeśli według Ciebie, nasze domyślne wezwania do działania na przyciskach w ogłoszeniu i formularzu nie odpowiadają do końca temu, co chcesz przekazać, możesz je zmienić za pomocą tego skryptu. Podmieni on teksty "aplikuj" oraz "wyślij", na Twoje autorskie:
Skrypt:
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var buttonText = $("#dynamic_form_submit span");
if (buttonText.length) {
buttonText.text("CHANGE THIS TEXT (FORM)");
}
var applyButtons = $(".button--cta");
applyButtons.each(function(i, el){
$(el).text("CHANGE THIS TEXT (ADV)");
})
})
</script>
Skrypt zmieniający tekst "Pokaż więcej" przy treści obowiązku informacyjnego.
Domyślnie, aby rozwinąć treść obowiązku informacyjnego w ogłoszeniu, należy kliknąć przycisk "Pokaż więcej". Jeśli chcesz, by przycisk zawierał inny tekst, pomoże Ci w tym poniższy skrypt.
Skrypt:
<script>
window.onload = function() {
var showMoreButtons = $("span[more] > span");
showMoreButtons.each(function(i, el){
$(el).text("Read full information");
})
}
</script>
Skrypt zmieniający logo w formularzu aplikacyjnym.
Jeśli prowadzisz rekrutację dla klienta i chcesz w formularzu aplikacyjnym zawrzeć jego logo, od teraz możesz to zrobić za pomocą tego skryptu:
Skrypt:
<script>
document.addEventListener('DOMContentLoaded', function() {
$(".company-logo__image").css("backgroundImage", "url('URL DO NOWEGO LOGO')");
})
</script>
Skrypt powiększający logo w ogłoszeniu i na formularzu aplikacyjnym.
<style>
.info__company-logo {
border-radius: 0 !important;
width: 100px !important;
height: 100px !important;
}
.info__company-logo > .company-logo__image {
width: inherit !important;
height: inherit !important;
margin: 0 !important;
}
.header__company-logo {
border-radius: 0 !important;
width: 100px !important;
height: 100px !important;
}
.header__company-logo > .company-logo__image {
width: inherit !important;
height: inherit !important;
margin: 0 !important;
}
</style>
Styl usuwający logo z formularza aplikacyjnego.
W formularzu aplikacyjnym pojawia się logo Twojej firmy/agencji, a wolisz, aby pozostał on neutralny brandingowo? Nic prostszego! Wystarczy, że wykorzystasz poniższy styl, by usunąć logo z formularza:
Styl:
<style>
.info__company-logo, .header__company-logo {
display: none;
}
</style>
Styl zmieniający czcionkę na dedykowaną
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap” rel=“stylesheet”>
<style>
body {
font-family: ‘Raleway’, sans-serif;
}
</style>
Zmiana tekstu przycisku w górnym rogu Strony Kariera.
Jeśli chcesz zmienić treść przycisku kierującego domyślnie ze Strony Kariera do Twojej strony głównej, możesz to zrobić tym skryptem:
Skrypt:
document.addEventListener('DOMContentLoaded', function() {
var button = $(".menu__action > a");
if (button.length) {
button[0].innerText = '{PUT TEXT HERE}';
}
});
Skrypt ukrywający przycisk Aplikuj na ogłoszeniu
Możesz ukryć przycisk Aplikuj (kierujący do formularza aplikacyjnego) widoczny na ogłoszeniu rekrutacyjnym dodając do ogłoszenia poniższy skrypt.
Skrypt:
<script> document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.box__button--apply, .mobile-buttons__button').forEach(button => button.remove()); }); </script>
Skrypt dodający dodatkowe nagłówki pod przyciskiem Aplikuj
Możesz dodać pod przyciskiem Aplikuj dodatkowe, kluczowe dla tego ogłoszenia informacje. Na przykład:
<script>
/*
<--------------------------------------------------- DODATKOWE NAGŁÓWKI --------------------------------------------------->
*/
// TUTAJ MODYFIKUJEMY STRUKTURĘ DODATKOWYCH NAGŁÓWKÓW POD PRZYCISKIEM APLIKUJ
const config = [
{
header: 'Przykładowy nagłówek 1',
description: "Przykładowy opis 1",
// hr odpowiada za poziomą linię
hr: true,
// br odpowiada za dodatkowy enter
br: true,
},
{
header: "Przykładowy nagłówek 2",
description: "Przykładowy opis 2",
br: true,
}
];
window.addEventListener("DOMContentLoaded", () => {
const rightPanel = document.getElementsByClassName("box__info")[0];
const customContent = document.createElement('div');
config.forEach(item => {
const header = document.createElement('h3');
const description = document.createElement('span');
header.style.margin = '0';
description.style.fontSize = '0.9em';
header.innerHTML = item.header;
description.innerHTML = item.description;
customContent.append(header, description);
if (item.hr) {
const hr = document.createElement('hr');
customContent.append(hr);
}
if (item.br) {
const br = document.createElement('br');
customContent.append(br);
}
});
rightPanel.innerHTML = customContent.innerHTML;
});
/*
<--------------------------------------------------- DODATKOWE NAGŁÓWKI --------------------------------------------------->
*/
</script>
Dodanie takiego skryptu skutkować będzie pojawieniem się dodatkowych informacji na ogłoszeniu, pod przyciskiem Aplikuj:
Dodawanie linka do obrazka w nagłówku
Jeśli chcesz podlinkować obrazek nagłówka, możesz to zrobić za pomocą poniższego skryptu:
<script>
const HEADER_IMAGE_URL = 'https://traffit.com/pl/';
window.addEventListener('DOMContentLoaded', () => {
const headerImage = document.querySelector('.header__image .image__image');
if (!headerImage) {
return;
}
const anchor = document.createElement('a');
anchor.href = HEADER_IMAGE_URL;
headerImage.parentNode.insertBefore(anchor, headerImage);
anchor.appendChild(headerImage);
});
</script>
Pamiętaj, aby w miejsce adresu https://traffit.com/pl/ wkleić adres URL, na który ma byc przekierowywana osoba, która kliknie na obrazek nagłówka.
Zmiana favicona na ogłoszeniach i formularzach
Czym jest favicon? Favicon to ikona zakładki powiązana z konkretną stroną internetową, widoczna w przeglądarce użytkownika.
Domyślny favicon dla ofert pracy i formularzy aplikacyjnych zawiera logo TRAFFIT:
Możesz użyć tego skryptu aby zmienić favicon w ogłoszeniach i formularzach aplikacyjnych tworzonych w TRAFFIT:
<script>
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = 'https://traffit.com/favicon.ico';
</script>
Adres https://traffit.com/favicon.ico w skrypcie prowadzi do domyślnego favicona TRAFFIT - zastąp go linkiem z lokalizacją Twojego favicona.