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:
<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:
<style>
.info__company-logo {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
$('.info__company-logo').attr('src', 'URL DO NOWEGO LOGO').on('load', function () {
$(this).css('display', 'unset');
});
})
</script>
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ą
Jeśli chcesz dopasować czcionkę do identyfikacji wizualnej swojej firmy i strony Kariera, użyj tego skryptu::
<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:
Styl:
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: 'B2B/UoP',
description: "umowa",
// https://fontawesome.com/v5/search - TUTAJ SĄ DOSTĘPNE IKONY. WYSTARCZY PODMIENIĆ KOD W LINIJCE PONIŻEJ, NP. 'FA-CLOCK' DLA IKONY ZEGARA.
icon: 'fa-address-card'
},
{
header: "10 000 PLN netto",
description: "umowa B2B",
icon: 'fa-money-bill'
},
{
header: "Hybrydowy / Zdalny",
description: "tryb pracy",
icon: 'fa-laptop-house'
},
];
window.addEventListener("DOMContentLoaded", () => {
const applyButton = document.getElementsByClassName("box__button--apply")[0];
const contactCard = document.createElement('div');
contactCard.classList.add('contact-card');
config.forEach((item, index) => {
const header = document.createElement('h4');
const description = document.createElement('span');
const icon = item?.icon;
const iconElement = document.createElement('i');
const contactCardContent = document.createElement('div');
contactCardContent.classList.add('contact-card__content');
if (!icon) {
contactCardContent.style.gridTemplateColumns = "1fr";
} else {
iconElement.classList.add('fal', icon);
}
if (index !== 0) {
contactCardContent.style.borderTop = '1px solid #cfe0f4';
}
const contactCardContentImage = document.createElement('div');
contactCardContentImage.classList.add('contact-card__image');
const contactCardContentInfo = document.createElement('div');
contactCardContentInfo.classList.add('contact-card__info');
description.style.fontSize = '0.9em';
header.innerHTML = item.header;
description.innerHTML = item.description;
contactCardContentImage.append(iconElement);
contactCardContentInfo.append(header, description);
if (icon) {
contactCardContent.append(contactCardContentImage);
}
contactCardContent.append(contactCardContentInfo);
contactCard.append(contactCardContent);
});
applyButton.parentNode.insertBefore(contactCard, applyButton.nextSibling);
});
/*
<--------------------------------------------------- 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.