Kalkulačka na váš web

Umožněte návštěvníkům vašeho webu jednoduše spočítat úsporu z fotovoltaiky s chytrým řízením Cubee. Kalkulačku vložíte krátkým kódem. K dispozici jsou dvě verze: nová, kterou doporučujeme, a starší, která na původní adrese zatím běží beze změny.

Nová a starší verze

	Nová verze	Starší verze
Adresa	`https://cubee.cz/embed/v2/{ICO}`	`https://cubee.cz/embed/calculator/{ICO}`
Vložení	skript `loader.js` nebo iframe	iframe
Zadání údajů	průvodce po krocích, údaje lze načíst z vyúčtování v PDF	formulář
Výsledek pro zákazníka	studie úspor v PDF e-mailem s vaším logem a webem	e-mail s odkazem na výsledky na cubee.cz
Povolení domény	není potřeba	nutné, pošlete nám URL a IČO
Výška	pevná, 580 px	podle obsahu (zpráva `setHeight`)
Událost po odeslání `calculatorSubmit`	ne	ano
Vlastní poplatky v URL	ne	ano

Náhled kalkulačky

Nová verze
Starší verze

Vložení na web

Nová verze (doporučeno)
Starší verze

Nová verze nevyžaduje povolení domény. Stačí vložit kód na stránku a nahradit {ICO} vaším IČO.

Za {ICO} dosaďte své IČO bez složených závorek: osm číslic bez mezer. Správně data-partner-cin="12345678" a https://cubee.cz/embed/v2/12345678, ne {12345678}.

Skript (doporučeno)

Kód pro vložení kalkulačky

<div data-cubee-calculator data-partner-cin="{ICO}"></div>
<script src="https://cubee.cz/embed/v2/loader.js" async></script>

Skript na místě prvku div vytvoří iframe s kalkulačkou: šířka 100 %, výška 580 px. Na jednu stránku můžete vložit i víc kalkulaček, skript stačí vložit jednou.

Web postavený jako SPA (React, Vue, Next.js…): když prvek div vložíte až po načtení skriptu, zavolejte window.__cubeeCalcLoader.boot().

Iframe

Pokud nechcete na web vkládat skript, vložte rovnou iframe:

Iframe s novou verzí

<iframe
  src="https://cubee.cz/embed/v2/{ICO}"
  title="Kalkulačka úspor Cubee"
  width="100%"
  height="580"
  loading="lazy"
  style="border: 0; display: block;">
</iframe>

Výška je pevná, 580 px, obsah kalkulačky se posouvá uvnitř. Skript pro přizpůsobení výšky ze starší verze můžete ponechat: nová verze pošle jednu zprávu setHeight s hodnotou 580.

Bez iframe (pokročilé)

S atributem data-render="shadow" se kalkulačka vykreslí přímo do vaší stránky. Běží v Shadow DOM, takže ji styly vašeho webu neovlivní.

Vykreslení bez iframe

<div data-cubee-calculator data-partner-cin="{ICO}" data-render="shadow"></div>
<script src="https://cubee.cz/embed/v2/loader.js" async></script>

V tomto režimu si zákazník nezakládá účet a studii dostane jen na e-mail. Když se kalkulačku nepodaří načíst, skript místo ní vloží iframe.

Pokud váš web používá Content Security Policy, povolte https://cubee.cz v script-src a frame-src, pro vykreslení bez iframe navíc v connect-src.

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

Údaje pošlete na email info@cubee.cz

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 {ICO} vaším IČO.

HTML kód pro vložení kalkulačky

<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>

Za {ICO} dosaďte své IČO bez složených závorek a bez mezer. Správně https://cubee.cz/embed/calculator/12345678, ne https://cubee.cz/embed/calculator/{12345678}.

JavaScript pro přizpůsobení výšky a zachycení odeslání

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.

Co zákazník dostane v nové verzi

Průvodce po krocích. Údaje může načíst z vyúčtování v PDF, nebo je zadat ručně.
Studii úspor v PDF e-mailem s vaší značkou. Na titulní straně je vaše logo a věta „Studii pro Vás připravila společnost…“ s názvem vaší firmy. Na konci studie je jako kontakt vaše firma a váš web. Osobu, e-mail ani telefon studie neuvádí. Logo i web nastavíte v partnerské konzoli v Nastavení.
Slevu 500 Kč. Kdo si v kalkulačce založí účet, dostane slevový kód na Cubee One nebo Cubee Air v e-shopu Cubee.

K čemu slouží vaše IČO

IČO v adrese kalkulačky nemá jen roli bezpečnostního klíče. Cubee podle něj pozná, z čího webu výpočet přišel:

Studie úspor nese vaši značku (nová verze). Když se k výpočtu generuje PDF studie, Cubee předá vaše IČO partnerskému API v hlavičce X-Cubee-Cin. Podle ní se do studie doplní vaše logo a kontakt místo obecného Cubee brandingu. IČO, které u nás není vedené jako partner, znamená obecnou studii, výpočet proběhne stejně.
Počet kalkulací z vašeho webu (nová verze) vidíte na přehledu v partnerské konzoli.

Hlavičku X-Cubee-Cin posílá Cubee sama za vás — je vyhrazená pro naši vlastní integraci a z partnerského tokenu ji použít nelze (API vrátí 403). Vy nastavujete jen IČO v adrese kalkulačky.

Volitelné parametry (starší verze)

Starší verze 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. Nová verze je nepoužije.

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í

<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

Mohu kalkulačku vložit na více domén?

Ano. Novou verzi můžete vložit na libovolný počet domén bez nahlašování. U starší verze nám při aktivaci zašlete všechny URL adresy, kde bude iframe nasazen, a my je přidáme mezi povolené zdroje (CORS whitelist).

Mohu kalkulačku stylovat pomocí CSS?

Ne. Kalkulačka běží v iframe, při vykreslení bez iframe v Shadow DOM, takže ji styly vaší stránky neovlivní. Můžete ale stylovat její obalový kontejner (div) – například šířku, zarovnání nebo ohraničení.

Existuje callback po odeslání formuláře?

Jen ve starší verzi: 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. Nová verze po odeslání žádnou událost neposílá.

Podporuje kalkulačka lazy-loading?

Ano. Do iframe elementu přidejte atribut loading="lazy":

<iframe loading="lazy" ... ></iframe>

Skript loader.js nové verze se načítá asynchronně (atribut async) a stránku nebrzdí.

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.

Funguje kalkulačka i na localhostu při vývoji?

Nová verze funguje odkudkoli, včetně localhostu. U starší verze je pro účely vývoje 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í starší verze 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).

Začínáme

Kalkulačka

Endpoints

Nová a starší verze

Náhled kalkulačky

Vložení na web

Skript (doporučeno)

Iframe

Bez iframe (pokročilé)

Aktivace iframe kalkulačky

Co zákazník dostane v nové verzi

K čemu slouží vaše IČO

Volitelné parametry (starší verze)

Příklad použití

Časté dotazy

​Nová a starší verze

​Náhled kalkulačky

​Vložení na web

​Skript (doporučeno)

​Iframe

​Bez iframe (pokročilé)

​Aktivace iframe kalkulačky

​Co zákazník dostane v nové verzi

​K čemu slouží vaše IČO

​Volitelné parametry (starší verze)

​Příklad použití

​Časté dotazy

Nová a starší verze

Náhled kalkulačky

Vložení na web

Skript (doporučeno)

Iframe

Bez iframe (pokročilé)

Aktivace iframe kalkulačky

Co zákazník dostane v nové verzi

K čemu slouží vaše IČO

Volitelné parametry (starší verze)

Příklad použití

Časté dotazy