> ## Documentation Index
> Fetch the complete documentation index at: https://podpora.cubee.cz/llms.txt
> Use this file to discover all available pages before exploring further.

# iFrame Kalkulátoru

> Vložete kalkulátor na váš web

Umožněte návštěvníkům vašeho webu jednoduše **spočítat návratnost investice do fotovoltaiky s chytrým řízením Cubee** pomocí našeho vložitelného kalkulátoru. Stačí aktivovat přístup a vložit krátký kód na vaši stránku.

## Náhled kalkulátoru

<Frame>
  <iframe id="cubee-calculator-iframe" src="https://cubee.cz/embed/calculator/08934061" width="100%" frameborder="0" />
</Frame>

## Aktivace iframe kalkulačky

Před vložením kalkulačky do vaší webové stránky je nezbytné nejprve aktivovat přístup. Kvůli bezpečnostním omezením (CORS) nám prosím zašlete následující informace:

* URL, na které bude kalkulačka umístěna (např. `https://www.vasespolecnost.cz`)
* Vaše IČO

<Info>Údaje pošlete na email `info@cubee.cz`</Info>

Po obdržení těchto údajů aktivujeme kalkulačku pro váš web a povolíme doménu pro přístup.

Pro zobrazení kalkulátoru na vašem webu použijte následující kód. Vložte jej do HTML kódu vaší stránky, kde chcete kalkulátor zobrazit. Nezapomeňte nahradit `{IČO}` vaším IČO.

```html HTML kód pro vložení kalkulačky {4} theme={null}
<div id="cubee-calculator-container" style="width: 100%; max-width: 800px; margin: 0 auto;">
  <iframe
    id="cubee-calculator-iframe"
    src="https://cubee.cz/embed/calculator/{ICO}"
    width="100%"
    frameborder="0"
    style="border: none;">
  </iframe>
</div>
```

<Warning>Nezapomeňte nahradit `{ICO}` vaším skutečným IČO, např. 12345678. Ičo by mělo být bez mezer.</Warning>

```javascript JavaScript pro přizpůsobení výšky a zachycení odeslání theme={null}
window.addEventListener('message', function(event) {
    // Ověření, že zpráva pochází z  domény cubee
    if (event.origin !== "https://cubee.cz") return;

    // Automatické nastavení výšky iframe
    if (event.data.type === 'setHeight') {
        const iframe = document.getElementById('cubee-calculator-iframe');
        if (iframe) {
            iframe.style.height = event.data.height + 2 + 'px';
        }
    }

    // Zpracování odeslaného formuláře
    if (event.data.type === 'calculatorSubmit') {
        const email = event.data.email;
        console.log(email);
    }
});
```

Tento skript vložte na stránku pomocí `<script>` tagu.

## Volitelné parametry

Kalkulátor umožňuje nastavit vlastní poplatky za nákup a prodej elektřiny, které se použijí při výpočtu **Optimálního řešení**. Tyto parametry se předávají jako query parametry v URL iframe.

| Parametr               | Popis                        | Jednotka | Výchozí hodnota |
| ---------------------- | ---------------------------- | -------- | --------------- |
| `optimalBuyFeePerMwh`  | Poplatek za nákup elektřiny  | CZK/MWh  | 350             |
| `optimalSellFeePerMwh` | Poplatek za prodej elektřiny | CZK/MWh  | 350             |

Oba parametry jsou volitelné a nezávislé — můžete nastavit jen jeden, druhý, nebo oba. Pokud nejsou uvedeny, použijí se výchozí hodnoty.

### Příklad použití

```html theme={null}
<iframe
  id="cubee-calculator-iframe"
  src="https://cubee.cz/embed/calculator/{ICO}?optimalBuyFeePerMwh=300&optimalSellFeePerMwh=300"
  width="100%"
  frameborder="0"
  style="border: none;">
</iframe>
```

### Časté dotazy

<AccordionGroup>
  <Accordion title="Mohu iframe vložit na více domén?">
    Ano, můžete. Stačí nám při aktivaci zaslat všechny URL adresy, kde bude iframe nasazen, a my je přidáme mezi povolené zdroje (CORS whitelist).
  </Accordion>

  <Accordion title="Mohu kalkulačku stylovat pomocí CSS?">
    Kalkulačka běží v sandboxovaném iframe, takže ji nelze ovlivnit pomocí stylů z vaší stránky. Můžete ale stylovat její obalový kontejner (`div`) – například šířku, zarovnání nebo ohraničení.
  </Accordion>

  <Accordion title="Existuje callback po odeslání formuláře?">
    Ano, iframe odešle událost přes `postMessage` s typem `calculatorSubmit`. Událost obsahuje email zadaný uživatelem, který můžete dále zpracovat např. odesláním na vlastní backend.
  </Accordion>

  <Accordion title="Podporuje iframe lazy-loading?">
    Ano. Pro optimalizaci načítání můžete do iframe elementu přidat atribut `loading="lazy"`:

    ```html theme={null}
    <iframe loading="lazy" ... ></iframe>
    ```
  </Accordion>

  <Accordion title="Jak často se kalkulačka aktualizuje?">
    Kalkulačka je vždy načítána z našich serverů. Veškeré změny a aktualizace se projeví automaticky bez potřeby zásahu z vaší strany.
  </Accordion>

  <Accordion title="Funguje iframe i na localhostu při vývoji?">
    Ano. Pro účely vývoje je automaticky povolen přístup z následujících domén:

    * `localhost`
    * `localhost:3000`
    * `localhost:5173`
    * `127.0.0.1`
      Díky tomu můžete iframe snadno testovat i v lokálním vývojovém prostředí (např. při použití Reactu, Vite, Next.js apod.).

    > ⚠️ Po nasazení na produkční doménu je nutné nám tuto doménu nahlásit, jinak se iframe z bezpečnostních důvodů nezobrazí (CORS).
  </Accordion>
</AccordionGroup>
