Beágyazási útmutató a Webflow-hoz

Csakúgy, mint a legtöbb Webflow esetében, a Ahrefs beágyazható auditáló eszközének hozzáadása egyszerű a Webflow webhelyhez.

Mielőtt azonban elkezdené, győződjön meg arról, hogy beállította a fehér címkés jelentés megjelenését és működését, és konfigurálta a beágyazási űrlapot a korábbi útmutatónknak megfelelően: Ellenőrzési űrlap beágyazása a webhelyébe.

Ellenőrizze Webflow-tervét

A beágyazási funkciót a Webflow “Egyéni kódnak” nevezi, amely csak a fizetős webhelyterveken érhető el. Ha már a Webflow-n van Alapterv, Ez a csomag tartalmazza az egyéni kódot, így nem kell módosítania a tervet. Ha azonban van egy ingyenes Webflow-webhelye bloggal, akkor át kell lépnie a Webflow webhelyére CMS terv amely lehetővé teszi az Egyéni kód funkciót (vagy ha van Webflow webhelye blog nélkül, akkor az Alapterv elegendő lesz!). Ezek a terv részletei pontosak voltak az írás idején, ezért kérjük, ellenőrizze A Webflow árképzési oldala legújabb terveikről, áraikról és szolgáltatásairól.

Miután elkészült a Webflow-terv. Itt az ideje, hogy létrehozza a beágyazási kódot a SEOptimerben.

Jelentkezzen be a SEOptimerbe, és kattintson a Beágyazási beállítások fülre a bal oldali menüben. Az űrlapomat testreszabtam, hogy illeszkedjen Webflow webhelyem megjelenéséhez:

Ha elégedett az űrlappal, kattintson a “Beállítások mentése és beágyazási kód generálása” gombra. Ekkor megjelenik egy kódblokk közvetlenül a gomb alatt.

Másolja a beágyazási kódot a Webflow webhelyére

Ez az a rész, ahol a Webflow telepítése kissé eltér a többi CMS-platformtól. Ahelyett, hogy a teljes kódblokkot kimásolná, és egyetlen nagy darabként beillesztené a webhelyére, a kódblokk egyes szakaszait kell másolnia, és be kell illesztenie különböző helyekre.

Olvasni:  Új funkciók – Feltérképezés és kulcsszókövetés

A Ahrefs kódblokk 3 részre oszlik:

      1. CSS (stílus)
      2. HTML (a tényleges beágyazási űrlap)
      3. JavaScript (az űrlapkezelő)

Az egyes szakaszok kezdésének és befejezésének legegyszerűbb módja a következő címkék keresése:

      1. CSS: azzal kezdődik végződik

      2. HTML: azzal kezdődik
        végződik

      3. JavaScript: azzal kezdődik

Kezdjük azzal, hogy csak a középső részt jelöljük ki – azaz: a HTML szakasz, amely

-vel kezdődik és

-re végződik. Jelölje ki ezt a kódot az egérrel, majd másolja ki (Ctrl + C / Command + C). Ezután váltson vissza a Webflow-ra.

Ennek az útmutatónak a céljaira létrehoztam egy egyszerű honlapot egy nagy funkciótárolóval és egy középre és középre igazított „Ingyenes SEO jelentés” címsorral. Az ellenőrzési űrlapot most közvetlenül a következő címsor alá szeretném ágyazni:

Kattintson az “Elemek hozzáadása” gombra a bal felső sarokban. Ezután kattintson és húzza a Tároló elrendezést úgy, hogy az közvetlenül a címsor alatt legyen:

Most, hogy van egy új üres tárolója, kattintson ismét az “Elemek hozzáadása” gombra a bal felső sarokban. Görgessen le az „Összetevők” részhez, majd kattintson és húzza a „Beágyazás” összetevőt (a 3. lehetőség), és dobja be az új tárolóba:

Ezzel automatikusan megnyílik a kóddoboz. Most készen áll a kódblokk beillesztésére (Ctrl + V / Command + V):

Kattintson a “Mentés és bezárás” gombra.

Váltson vissza a SEOptimerre, és most ki akarjuk választani a CSS szakasz, amely az első sorban a

karakterrel végződik. Jelölje ki ezt a kódot az egérrel, majd másolja ki (Ctrl + C / Command + C). Ezután váltson vissza a Webflow-ra.

Most kattintson a bal felső “W” gombra, és válassza a “Projektbeállítások” lehetőséget, majd kattintson az “Egyéni kód” elemre az almenüben. Illessze be a kódot a “Head Code” mezőbe (Ctrl + V / Command + V), és kattintson a zöld “Változások mentése” gombra:

Váltson vissza a SEOptimerre, és végül az utolsó szakaszt akarjuk, amely a JavaScript szakasz, amely a karakterrel végződik. Jelölje ki ezt a kódot az egérrel, majd másolja ki (Ctrl + C / Command + C). Ezután váltson vissza a Webflow-ra.

Illessze be a kódot a „Lábléc kódja” mezőbe (Ctrl + V / Command + V), és kattintson a zöld „Változások mentése” gombra:

Ez az! Kattintson Közzététel a felső eszköztárban a módosítások élőben történő megjelenítéséhez.

Tesztelje az űrlapot, hogy megbizonyosodjon arról, hogy működik

Töltse be Webflow webhelyét, és látnia kell az új beágyazási űrlapot.

Tesztet végzek a „https://www.wallywine.com/” URL használatával, és beírtam a Ahrefs e-mail címemet, hogy szimuláljam, milyen az ügyfélélmény. A Ahrefs beágyazási beállításaimban bejelöltem, hogy küldjek egy e-mailt az ügyfélnek, és hozzáadtam a “YourAgency” logómat az e-mailhez.

Az űrlap elküldése után azonnal kaptam egy e-mailt, amelyhez csatoltam a jelentést, így láthatom, mit lát a leendő ügyfél. Ne felejtse el, hogy ennek az e-mailnek az összes összetevőjét szerkesztheti és testreszabhatja a Beágyazási beállításokban:

Ezenkívül az új lead azonnal a Ahrefs „Leadek” lapjára került:

Ne felejtse el, hogy a Zapieren keresztül automatikus triggereket is beállíthat, hogy új leadeket helyezzen el a CRM-be, az e-mail eszközbe, a Slack-be vagy bármely más, a Zapier által támogatott alkalmazásba. Íme egy másik útmutató, amelyet írtunk, amely leírja, hogyan lehet új potenciális ügyfeleket betolni a Mailchimpbe, és egy másik útmutató, amely lefedi, hogyan lehet új érdeklődőket betolni a HubSpotba.

Ha bármilyen problémába ütközik a beágyazott űrlap telepítése során, egyszerűen nyomja meg az élő csevegés gombot a SEOptimerben – örömmel segítünk!

Új publikációk:

Ajánlott