Průvodce vkládáním pro Webflow

Stejně jako u většiny věcí s Webflow je přidání nástroje Ahrefs Embeddable Audit Tool na váš web Webflow snadné.

Než však začnete, ujistěte se, že jste nastavili vzhled a chování vaší zprávy s bílým štítkem a nakonfigurovali formulář pro vložení podle našeho předchozího průvodce: Jak vložit formulář auditu na váš web.

Zkontrolujte svůj plán Webflow

Funkce vkládání je to, co Webflow nazývá „Vlastní kód“, který je k dispozici pouze na jejich placených plánech stránek. Pokud již používáte Webflow’s Základní plán, Vlastní kód je součástí tohoto plánu, takže nebudete muset svůj plán měnit. Pokud však máte bezplatný web Webflow s blogem, budete muset přejít na web Webflow CMS plán který umožňuje funkci Vlastní kód (nebo pokud máte web Webflow bez blogu, bude stačit základní plán!). Tyto podrobnosti plánu byly v době psaní přesné, proto je prosím zkontrolujte Cenová stránka Webflow pro jejich nejnovější plány, ceny a funkce.

Jakmile bude váš plán Webflow připraven. Je čas vygenerovat kód pro vložení v SEOptimeru.

Přihlaste se do SEOptimeru a v levém menu klikněte na záložku Nastavení vkládání. Upravil jsem svůj formulář tak, aby odpovídal vzhledu a chování mého webu Webflow:

Jakmile budete s formulářem spokojeni, klikněte na „Uložit nastavení a vygenerovat kód pro vložení“. Tím se odhalí blok kódu přímo pod tlačítkem.

Zkopírujte kód pro vložení na svůj web Webflow

V této části je instalace Webflow trochu odlišná od jiných platforem CMS. Namísto kopírování celého bloku kódu a jeho vkládání jako jedné velké části na váš web budete muset zkopírovat každou jednotlivou část bloku kódu a vložit je na různá místa.

Blok kódu Ahrefs je rozdělen do 3 sekcí:

1. 1. 1. CSS (styling)
      2. HTML (skutečný formulář pro vložení)
      3. JavaScript (obslužný program formuláře)

Nejjednodušší způsob, jak zjistit, kde každá sekce začíná a končí, je vyhledat následující značky:

1. 1. 1. CSS: začíná s končí s

      2. HTML: začíná s
         končí s

      3. JavaScript: začíná s

Začněme výběrem pouze střední části – tj HTML sekce, která začíná

. Vyberte tento kód pomocí myši a poté jej zkopírujte (Ctrl + C / Command + C). Poté se přepněte zpět na Webflow.

Pro účely tohoto průvodce jsem vytvořil jednoduchou domovskou stránku s velkým kontejnerem funkcí a nadpisem „Free SEO Report“ zarovnaným na střed a na střed. Chci nyní vložit formulář auditu přímo pod nadpis:

Klikněte na tlačítko “Přidat prvky” vlevo nahoře. Poté klikněte a přetáhněte rozvržení kontejneru tak, aby bylo přímo pod nadpisem:

Nyní, když máte nový prázdný kontejner, klikněte znovu na tlačítko “Přidat prvky” vlevo nahoře. Přejděte dolů do sekce Komponenty, klikněte a přetáhněte komponentu Vložit (3. možnost) a vložte ji do nového kontejneru:

Tím se automaticky otevře pole s kódem. Nyní jste připraveni vložit blok kódu (Ctrl + V / Command + V):

Klikněte na “Uložit a zavřít”.

Přepněte zpět na Ahrefs a nyní chceme vybrat CSS sekce, která začíná na prvním řádku

. Vyberte tento kód pomocí myši a poté jej zkopírujte (Ctrl + C / Command + C). Poté se přepněte zpět na Webflow.

Nyní klikněte na tlačítko „W“ vlevo nahoře a vyberte „Nastavení projektu“ a poté v podnabídce klikněte na „Vlastní kód“. Vložte kód do pole ‘Head Code’ (Ctrl + V / Command + V) a klikněte na zelené tlačítko ‘Save Changes’:

Přepněte zpět na Ahrefs a nakonec chceme poslední sekci, která je JavaScript sekce, která začíná . Vyberte tento kód pomocí myši a poté jej zkopírujte (Ctrl + C / Command + C). Poté se přepněte zpět na Webflow.

Vložte kód do pole ‘Kód zápatí’ (Ctrl + V / Command + V) a klikněte na zelené tlačítko ‘Uložit změny’:

A je to! Klikněte Publikovat na horním panelu nástrojů, aby se vaše změny projevily.

Otestujte formulář, abyste se ujistili, že funguje

Načtěte svůj web Webflow a měli byste vidět svůj nový formulář pro vložení.

Dělám test pomocí adresy URL “https://www.wallywine.com/” a vložil jsem svou e-mailovou adresu SEOptimeru, abych simuloval, jaká je zkušenost klienta. V nastavení vkládání v SEOptimeru jsem zaškrtl, že chci klientovi poslat e-mail, a do e-mailu přidal své logo „YourAgency“.

Po odeslání formuláře jsem okamžitě obdržel e-mail s připojenou zprávou, abych viděl, co vidí potenciální klient. Nezapomeňte, že všechny součásti tohoto e-mailu můžete upravit a přizpůsobit v Nastavení vkládání:

Nový potenciální zákazník také okamžitě přistál na kartě „Potenciální zákazníci“ v SEOptimeru:

Nezapomeňte, že přes Zapier můžete také nastavit automatické spouštěče, které vloží nové potenciální zákazníky do vašeho CRM, e-mailového nástroje, Slacku nebo jiné aplikace podporované Zapierem. Zde je další příručka, kterou jsme napsali a která popisuje, jak vložit nové potenciální zákazníky do Mailchimpu, a další příručka, která popisuje, jak vložit nové potenciální zákazníky do HubSpot.

Pokud narazíte na nějaké problémy s instalací vkládacího formuláře, stačí stisknout tlačítko živého chatu v SEOptimeru – rádi vám pomůžeme!