V kostce
- Našeptávač adres Launify se do Webflow vkládá přes Site settings → Custom code → Footer code.
- Vlastní kód ve Webflow vyžaduje placený tarif webu nebo workspace a projeví se až po publikování.
- Skripty se spouštějí jen na publikovaném webu, ne v náhledu Designeru.
- API klíč funguje jen na doménách, které u něj v administraci Launify povolíte, včetně domény webflow.io.
- Celé nastavení včetně mapování polí košíku zabere zhruba 15 minut.
Našeptávač adres pro Webflow od Launify nasadíte vložením krátkého skriptu do vlastního kódu webu, bez programátora. Launify je našeptávač adres pro e-shopy: zákazník v košíku začne psát ulici, vybere adresu z návrhů a Launify doplní město a PSČ. Ve Webflow vložíte kód do Site settings → Custom code, web publikujete a namapujete pole adresy v košíku Webflow Ecommerce. Celé nastavení zabere zhruba 15 minut.
Co našeptávač adres přinese e-shopu na Webflow
- Adresy bez překlepů. Launify doplní košík Webflow Ecommerce o našeptávání adres ve střední Evropě, takže zákazník vybírá z existujících adres místo ručního psaní.
- Rychlejší košík. Po výběru návrhu se adresa vyplní najednou, což ocení hlavně zákazníci na mobilu.
- Bez zásahu do designu. Skript se vkládá do vlastního kódu webu, takže nemusíte měnit layout ani komponenty v Designeru.
Co budete potřebovat
- Účet v administraci Launify na app.launify.com.
- Web na Webflow s tarifem Ecommerce. Vlastní kód je dostupný jen v placených tarifech.
- Oprávnění upravovat nastavení webu a publikovat.
Krok 1
Vytvořte API klíč v administraci Launify
- Přihlaste se do administrace Launify.
- Klikněte na Integrace → Vytvořit klíč.
- Vyplňte název klíče a domény, na kterých má klíč fungovat. Když chcete našeptávač otestovat i na testovací adrese
*.webflow.io, přidejte i ji. Pak klikněte na Uložit. - Na řádku s klíčem klikněte na symbol </> a zkopírujte kód z vyskakovacího okna.
Zkopírovaný kód už obsahuje váš API klíč. Vypadá zhruba takto:
<script>
(function(){
function init() {
if(window.Launify) return;
var s = document.createElement("script");
s.src = "https://cdn.launify.com/launify.min.js?t=" + Date.now();
s.async = true;
s.onload = function() {
try {
var launifyInstance = new Launify('YOUR_API_KEY_HERE');
launifyInstance.updateCountry('CZ');
launifyInstance.init();
} catch(e) { console.error(e); }
};
document.head.appendChild(s);
}
if(document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
</script>Pokud kód kopírujete odsud, nahraďte YOUR_API_KEY_HERE svým klíčem a v updateCountry('CZ') nastavte cílovou zemi e-shopu (ISO kód, např. SK, PL, HU, DE).
Krok 2
Vložte našeptávač adres pro Webflow do vlastního kódu webu
- Ve Webflow otevřete Site settings svého webu a přejděte na kartu Custom code.
- Do pole Footer code (vkládá se před
</body>) vložte kód zkopírovaný z Launify. Pokud pole už obsahuje jiné skripty, přidejte ho na konec. - Klikněte na Save changes.
- Web publikujte tlačítkem Publish. Bez publikování se změna na webu neprojeví.
Chcete skript načítat jen v košíku? Otevřete v Designeru v panelu Pages stránku Checkout, v jejím nastavení najděte sekci Custom code a kód vložte do pole Before </body> tag. Pak web znovu publikujte.
Krok 3
Namapujte pole košíku
V administraci Launify klikněte na Integrace a sjeďte k části Mapování vstupů a výstupů. První mapovací skupina je už připravená, upravte ji podle polí vašeho košíku nebo přidejte další. Pole můžete zadat podle atributu id, name, class nebo data atributu.
| Údaj | Jak pole v košíku Webflow namapovat |
|---|---|
| Ulice a číslo domu | podle atributu name nebo id pole pro adresu |
| Město | podle atributu name nebo id pole pro město |
| PSČ | podle atributu name nebo id pole pro PSČ |
Pole v košíku Webflow sdílejí společnou třídu w-commerce-commercecheckoutinput, proto podle třídy nemapujte. Použijte atribut name nebo id konkrétního pole.
Atributy zjistíte na publikovaném webu v prohlížeči: v košíku klikněte pravým tlačítkem na pole a zvolte Prozkoumat. Doručovací a fakturační adresa mají vlastní pole, pro každou proto přidejte samostatnou mapovací skupinu. Když si nebudete vědět rady, napište nám a mapování nastavíme za vás.
Jak ověřit, že našeptávač funguje
- Na publikovaném webu vložte zboží do košíku a přejděte k vyplňování doručovací adresy.
- Začněte psát ulici do pole adresy. Měly by se objevit návrhy adres.
- Po výběru návrhu zkontrolujte, že se správně doplnilo město a PSČ.
Časté otázky
Proč našeptávač nevidím v Designeru?
Webflow spouští vlastní skripty jen na publikovaném webu, v náhledu Designeru se nenačítají. Našeptávač proto testujte na živé doméně nebo na adrese webflow.io po publikování. Obě domény musí být povolené u API klíče v administraci Launify, jinak se návrhy adres nezobrazí.
Jak dlouho trvá nasazení našeptávače na Webflow?
Zhruba 15 minut. Vytvoření API klíče v administraci Launify zabere pár minut, vložení kódu do Custom code a publikování webu další pár minut a zbytek času připadá na namapování polí košíku podle atributů name nebo id a na zkušební vyplnění adresy na publikovaném webu.
Jaký tarif Webflow potřebuji?
Vlastní kód ve Webflow je dostupný jen v placených tarifech webu nebo workspace. E-shop na Webflow Ecommerce placený tarif vyžaduje vždy, takže pokud už prodáváte, vložení skriptu vám nic nebrání. Na bezplatném tarifu pole pro vlastní kód není k dispozici.
Zpomalí skript Launify můj web?
Ne výrazně. Skript se načítá asynchronně, takže neblokuje vykreslení stránky, a je optimalizovaný na rychlost. Pokud chcete zátěž minimalizovat úplně, vložte kód jen do vlastního kódu stránky Checkout místo do celého webu. Na ostatních stránkách se pak skript vůbec nenačte.
Ovlivní vlastní kód platby ve Webflow?
Našeptávač Launify pracuje jen s poli doručovací a fakturační adresy a do platebních údajů nijak nezasahuje. Webflow obecně upozorňuje, že vlastní kód na e-shopu nespadá pod jeho ověření PCI, proto vkládejte jen skripty z důvěryhodných zdrojů a kód zkopírujte přímo z administrace Launify.
Hledáte obecný postup pro jinou platformu? Podívejte se na návod Vlastní integrace nebo na nasazení přes Google Tag Manager. Přehled všech podporovaných platforem najdete v článku Launify teď funguje na více než 20 e-shopových platformách.
Nebudete si vědět rady?
Napište nám a integraci nastavíme společně.