Indlejringsguide - Toyota Elbil Besparelsesberegner

🚀 Hurtig Start

Den nemmeste måde at indlejre beregneren på din hjemmeside:

<!-- Tilføj dette hvor du vil have beregneren -->
<toyota-calculator></toyota-calculator>

<!-- Tilføj dette i bunden af din side (før </body>) -->
<script src="/embed/toyota-calculator.js"></script>

📋 Detaljeret Opsætning

Indlæs JavaScript komponenten
Tilføj denne linje til din HTML, helst i bunden af siden før </body> tagget:
```
<script src="/embed/toyota-calculator.js"></script>
```
Placer beregneren
Indsæt beregneren hvor du ønsker den på din side:
```
<toyota-calculator></toyota-calculator>
```
Færdig!
Beregneren vil automatisk tilpasse sig din sides styling og fungere fuldt funktionelt.

💡 Komplet Eksempel

Her er et komplet HTML eksempel der viser hvordan beregneren indlejres:

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Side med Elbil Beregner</title>
</head>
<body>
    <header>
        <h1>Velkommen til min bilforretning</h1>
    </header>
    
    <main>
        <section>
            <h2>Beregn din besparelse ved elbil</h2>
            <p>Brug vores beregner til at se hvor meget du kan spare:</p>
            
            <!-- Her bliver beregneren indsat -->
            <toyota-calculator></toyota-calculator>
        </section>
    </main>
    
    <!-- Indlæs beregner komponenten -->
    <script src="/embed/toyota-calculator.js"></script>
</body>
</html>

⚙️ Avanceret Brug

Forudindstil Værdier

Du kan forudindstille beregneren med specifikke værdier:

<script>
// Vent på at komponenten er klar
document.addEventListener('DOMContentLoaded', function() {
    const calculator = document.querySelector('toyota-calculator');
    
    // Indstil forudindstillede værdier
    calculator.setValues({
        yearlyDistance: 25000,        // 25.000 km om året
        carConsumption: 18,           // 18 km/l
        fuelPrice: 15,               // 15 kr/l
        electricConsumption: 180,     // 180 Wh/km
        homeElectricityPrice: 1.2,    // 1,2 kr/kWh hjemme
        awayElectricityPrice: 3.8,    // 3,8 kr/kWh ude
        homeChargingPercentage: 80,   // 80% hjemme opladning
        unlimitedSubscription: false  // Ikke unlimited
    });
});
</script>

Læs Beregningsresultater

Du kan få adgang til beregningsresultaterne programmatisk:

<script>
const calculator = document.querySelector('toyota-calculator');

// Få alle værdier og resultater
const results = calculator.getValues();

console.log('Årlig besparelse:', results.annualSavings, 'kr');
console.log('Månedlig besparelse:', results.monthlySavings, 'kr');
console.log('Årlige brændstofudgifter:', results.annualFuelCost, 'kr');
console.log('Årlige el-udgifter:', results.annualElectricCost, 'kr');
</script>

🎨 Tilpasning af Udseende

Beregneren bruger Shadow DOM, så den ikke påvirkes af din sides CSS. Du kan dog ændre størrelsen og placeringen:

<style>
toyota-calculator {
    /* Tilpas størrelse og placering */
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    display: block;
    
    /* Tilpas skygge omkring beregneren */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
}

/* Responsivt design */
@media (max-width: 768px) {
    toyota-calculator {
        margin: 1rem;
        max-width: none;
    }
}
</style>

🔧 Tekniske Detaljer

Web Component

Bruger moderne Web Components teknologi for maksimal kompatibilitet og isolation.

Shadow DOM

CSS isolation betyder beregneren ikke påvirker eller påvirkes af din sides styling.

Responsive

Tilpasser sig automatisk til forskellige skærmstørrelser og enheder.

Real-time

Alle beregninger sker øjeblikkeligt når brugeren ændrer værdierne.

Toyota Design

Følger Toyotas officielle designsystem med korrekte farver og typografi.

Ingen Cookies

Beregneren gemmer ingen data og kræver ingen samtykke.

🌐 Browser Kompatibilitet

Browser	Minimum Version	Status
Chrome	54+	✅ Fuldt understøttet
Firefox	63+	✅ Fuldt understøttet
Safari	10.1+	✅ Fuldt understøttet
Edge	79+	✅ Fuldt understøttet
Internet Explorer	Ikke understøttet	❌ Ikke kompatibel

🛠️ Fejlfinding

Beregneren vises ikke

Kontroller at JavaScript filen indlæses korrekt
Tjek browser konsollen for fejlmeddelelser
Sørg for at domænet er tilgængeligt

Styling ser forkert ud

CSS indlæses automatisk fra beregneren
Hvis du ser fallback styling, kontroller netværksforbindelsen
Toyota fonts indlæses fra beregnerens domæne

Beregninger virker ikke

Kontroller at alle input felter har gyldige værdier
Tjek browser konsollen for JavaScript fejl
Prøv at genindlæse siden

Vigtigt: Beregneren kræver en moderne browser der understøtter Web Components. Internet Explorer er ikke understøttet.

📚 API Reference

Tilgængelige Metoder

Metode	Beskrivelse	Eksempel
`setValues(object)`	Indstil værdier programmatisk	`calc.setValues({yearlyDistance: 25000})`
`getValues()`	Få alle værdier og resultater	`const results = calc.getValues()`

Tilgængelige Properties

Property	Type	Beskrivelse
`yearlyDistance`	number	Årlig kørsel i km
`carConsumption`	number	Bil forbrug i km/l
`fuelPrice`	number	Brændstofpris i kr/l
`electricConsumption`	number	Elektrisk forbrug i Wh/km
`homeElectricityPrice`	number	Elpris hjemme i kr/kWh
`awayElectricityPrice`	number	Elpris ude i kr/kWh
`homeChargingPercentage`	number	Procent opladning hjemme (0-100)
`unlimitedSubscription`	boolean	Om unlimited abonnement er aktivt
`annualSavings`	number	Beregnet årlig besparelse (read-only)
`monthlySavings`	number	Beregnet månedlig besparelse (read-only)

🎯 Live Demo

Her kan du se beregneren i aktion:

💬 Support

Har du spørgsmål eller brug for hjælp med implementeringen?

Teknisk Support

For tekniske spørgsmål om implementering og fejlfinding.

Tilpasninger

Har du brug for særlige tilpasninger eller funktioner?

Updates

Beregneren opdateres automatisk. Ingen handling kræves fra din side.

🚗 Indlejringsguide