📋 Instrukcje Osadzania

Jak osadzić test predyspozycji zawodowych na swojej stronie

🚀 Szybki start

1️⃣ Podstawowe użycie (najprostsze)

Jedna linia kodu - modal automatycznie pojawi się jako pływający przycisk w prawym dolnym rogu.

<script src="https://a4academy-match.vercel.app/api/script" async></script>

2️⃣ Z konfiguracją (zalecane)

Dostosuj pozycję przycisku i tekst według potrzeb.

<script>
window.A4ACADEMY_CONFIG = {
    position: 'bottom-right', // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
    buttonText: 'Test Predyspozycji Zawodowych'
};
</script>
<script src="https://a4academy-match.vercel.app/api/script" async></script>

3️⃣ Z własnym przyciskiem

Użyj własnego przycisku na stronie zamiast pływającego.

<script src="https://a4academy-match.vercel.app/api/script" async></script>
<button onclick="openA4AcademyModal()" class="my-button">
    Rozpocznij test predyspozycji
</button>

⚙️ Konfiguracja

Dostosuj wygląd i zachowanie modala za pomocą obiektu konfiguracyjnego:

window.A4ACADEMY_CONFIG = {
    position: 'bottom-right',  // Pozycja przycisku
    buttonText: 'Test Predyspozycji Zawodowych'  // Tekst na przycisku
};

// Dostępne pozycje:
// - 'bottom-right' (domyślna)
// - 'bottom-left'
// - 'top-right'
// - 'top-left'

🔧 WordPress

Metoda 1: Przez motyw (functions.php)

Dodaj kod do pliku functions.php swojego motywu:

// Dodaj do functions.php
function add_a4academy_script() {
    wp_enqueue_script(
        'a4academy-script',
        'https://a4academy-match.vercel.app/api/script',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'add_a4academy_script');

Metoda 2: Przez wtyczkę "Insert Headers and Footers"

Zainstaluj wtyczkę "Insert Headers and Footers" i dodaj kod w sekcji "Scripts in Footer":

<script>
window.A4ACADEMY_CONFIG = {
    position: 'bottom-right',
    buttonText: 'Test Predyspozycji Zawodowych'
};
</script>
<script src="https://a4academy-match.vercel.app/api/script" async></script>

Metoda 3: Przez blok HTML

Dodaj blok HTML w edytorze Gutenberg i wklej kod:

<script src="https://a4academy-match.vercel.app/api/script" async></script>

Metoda 4: Przez shortcode (dla zaawansowanych)

Dodaj do functions.php, aby używać shortcode [a4academy]:

// Dodaj do functions.php
function a4academy_shortcode($atts) {
    $atts = shortcode_atts(array(
        'position' => 'bottom-right',
        'text' => 'Test Predyspozycji Zawodowych'
    ), $atts);
    
    return '<script>
        window.A4ACADEMY_CONFIG = {
            position: "' . esc_attr($atts['position']) . '",
            buttonText: "' . esc_attr($atts['text']) . '"
        };
    </script>
    <script src="https://a4academy-match.vercel.app/api/script" async></script>';
}
add_shortcode('a4academy', 'a4academy_shortcode');

// Użycie: [a4academy position="bottom-left" text="Sprawdź swój kurs"]

🧪 Test Systemu

Przetestuj modal na tej stronie:

🎨 Test różnych pozycji

Sprawdź jak modal wygląda w różnych miejscach: