Sprievodca vkladaním pre Webflow

Rovnako ako väčšina vecí s Webflow, pridanie nástroja Ahrefs’s Embeddable Audit Tool na vašu stránku Webflow je jednoduché.

Predtým, ako začnete, sa však uistite, že ste nastavili vzhľad a štýl vašej správy s bielym štítkom a nakonfigurovali formulár na vloženie podľa nášho predchádzajúceho sprievodcu: Ako vložiť formulár auditu na vašu lokalitu.

Skontrolujte svoj plán Webflow

Funkcia vloženia je to, čo Webflow nazýva „vlastný kód“, ktorý je k dispozícii iba v plánoch platených stránok. Ak už používate Webflow’s Základný plán, Vlastný kód je súčasťou tohto plánu, takže svoj plán nebudete musieť meniť. Ak však máte bezplatnú stránku Webflow s blogom, budete musieť prejsť na Webflow’s CMS plán ktorý umožňuje funkciu Vlastný kód (alebo ak máte webovú stránku Webflow bez blogu, postačí vám základný plán!). Tieto podrobnosti plánu boli v čase písania presné, preto ich prosím skontrolujte Cenová stránka Webflow pre ich najnovšie plány, ceny a funkcie.

Keď bude váš plán Webflow pripravený. Je čas vygenerovať si kód na vloženie v SEOptimeri.

Prihláste sa do SEOptimeru a kliknite na záložku Nastavenia vkladania v ľavom menu. Prispôsobil som svoj formulár tak, aby zodpovedal vzhľadu a štýlu mojej stránky Webflow:

Keď budete s formulárom spokojní, kliknite na „Uložiť nastavenia a vygenerovať kód na vloženie“. Tým sa odhalí blok kódu priamo pod tlačidlom.

Skopírujte kód na vloženie na vašu lokalitu Webflow

V tejto časti je inštalácia Webflow trochu odlišná od iných platforiem CMS. Namiesto toho, aby ste skopírovali celý blok kódu a prilepili ho ako jeden veľký kus na svoje stránky, budete musieť skopírovať každú jednotlivú časť bloku kódu a prilepiť ich na rôzne miesta.

Blok kódu Ahrefs je rozdelený do 3 sekcií:

1. 1. 1. CSS (styling)
      2. HTML (skutočný formulár na vloženie)
      3. JavaScript (obslužný nástroj formulára)

Najjednoduchší spôsob, ako zistiť, kde sa ktorá časť začína a končí, je vyhľadať nasledujúce značky:

1. 1. 1. CSS: začína s
         

      2. HTML: začína s
         končí s

      3. JavaScript: začína s

Začnime výberom len strednej časti – tj HTML sekcia, ktorá začína

. Vyberte tento kód pomocou myši a potom ho skopírujte (Ctrl + C / Command + C). Potom prepnite späť na Webflow.

Na účely tejto príručky som vytvoril jednoduchú domovskú stránku s veľkým kontajnerom funkcií a nadpisom „Free SEO Report“ zarovnaným na stred a na stred. Chcem teraz vložiť formulár auditu priamo pod nadpis:

Kliknite na tlačidlo “Pridať prvky” vľavo hore. Potom kliknite a potiahnite rozloženie kontajnera tak, aby bolo priamo pod nadpisom:

Teraz, keď máte nový prázdny kontajner, kliknite znova na tlačidlo „Pridať prvky“ vľavo hore. Posuňte zobrazenie nadol do sekcie „Komponenty“, potom kliknite a presuňte komponent „Vložiť“ (tretia možnosť) a vložte ho do nového kontajnera:

Tým sa automaticky otvorí pole s kódom. Teraz ste pripravení vložiť blok kódu (Ctrl + V / Command + V):

Kliknite na „Uložiť a zavrieť“.

Prepnite späť na Ahrefs a teraz chceme vybrať CSS časť, ktorá začína na prvom riadku

. Vyberte tento kód pomocou myši a potom ho skopírujte (Ctrl + C / Command + C). Potom prepnite späť na Webflow.

Teraz kliknite na ľavé horné tlačidlo „W“ a vyberte „Nastavenia projektu“ a potom kliknite na „Vlastný kód“ v podponuke. Vložte kód do poľa „Kód hlavy“ (Ctrl + V / Command + V) a kliknite na zelené tlačidlo „Uložiť zmeny“:

Prepnite späť na Ahrefs a nakoniec chceme poslednú časť, ktorá je JavaScript časť, ktorá začína . Vyberte tento kód pomocou myši a potom ho skopírujte (Ctrl + C / Command + C). Potom prepnite späť na Webflow.

Vložte kód do poľa „Kód päty“ (Ctrl + V / Command + V) a kliknite na zelené tlačidlo „Uložiť zmeny“:

To je všetko! Kliknite Publikovať na hornom paneli s nástrojmi, aby sa zmeny prejavili naživo.

Otestujte formulár, aby ste sa uistili, že funguje

Načítajte si webovú stránku Webflow a mali by ste vidieť nový formulár na vloženie.

Robím test pomocou adresy URL „https://www.wallywine.com/“ a vložil som svoju e-mailovú adresu SEOptimera, aby som simuloval, aký je zážitok klienta. V nastaveniach vkladania v SEOptimeri som zaškrtol poslať klientovi e-mail a pridal som do e-mailu svoje logo „YourAgency“.

Po odoslaní formulára som okamžite dostal e-mail s priloženou správou, aby som mohol vidieť, čo vidí potenciálny klient. Nezabudnite, že všetky súčasti tohto e-mailu môžete upraviť a prispôsobiť v nastaveniach vkladania:

Nový potenciálny zákazník sa tiež okamžite dostal na kartu „Potenciálni zákazníci“ v Ahrefs:

Nezabudnite, že cez Zapier môžete nastaviť aj automatické spúšťače, aby ste dostali nových potenciálnych zákazníkov do CRM, e-mailového nástroja, Slacku alebo do akejkoľvek inej aplikácie podporovanej Zapierom. Tu je ďalšia príručka, ktorú sme napísali a ktorá popisuje, ako vložiť nových potenciálnych zákazníkov do služby Mailchimp, a ďalšia príručka, ktorá sa týka vloženia nových potenciálnych zákazníkov do HubSpot.

Ak narazíte na nejaké problémy s inštaláciou vloženého formulára, stačí kliknúť na tlačidlo živého rozhovoru v SEOptimeri – radi vám pomôžeme!