Inbäddningsguide för Webflow

Precis som de flesta saker med Webflow är det enkelt att lägga till SEOptimers inbäddningsbara granskningsverktyg till din Webflow-webbplats.

Innan du börjar bör du dock se till att du har ställt in utseendet och känslan för din white label-rapport och konfigurerat inbäddningsformuläret enligt vår tidigare guide: Hur man bäddar in ett granskningsformulär på din webbplats.

Kontrollera din webbflödesplan

Inbäddningsfunktionen är vad Webflow kallar “Custom Code” som endast är tillgänglig på deras betalda webbplatsplaner. Om du redan är på Webflow's Grundplan, anpassad kod ingår i denna plan så att du inte behöver ändra din plan. Men om du har en gratis Webflow-webbplats med en blogg, måste du gå upp till Webflows CMS-plan som aktiverar Custom Code-funktionen (eller om du har en Webflow-webbplats utan blogg räcker grundplanen!). Dessa plandetaljer var korrekta i skrivande stund, så kontrollera Webflows prissida för deras senaste planer, priser och funktioner.

När din Webflow-plan är klar. Det är dags att generera din inbäddningskod i Ahrefs.

Logga in på Ahrefs och klicka på fliken Inbäddningsinställningar i menyn till vänster. Jag har anpassat mitt formulär för att matcha utseendet och känslan på min Webflow-webbplats:

När du är nöjd med formuläret klickar du på “Spara inställningar och generera inbäddningskod”. Detta visar ett kodblock direkt under knappen.

Kopiera inbäddningskoden till din webbflödeswebbplats

Den här delen är där Webflow-installationen skiljer sig lite från andra CMS-plattformar. Istället för att kopiera hela kodblocket och klistra in det som en stor bit på din webbplats, måste du kopiera varje enskild del av kodblocket och klistra in dem på olika ställen.

Ahrefs-kodblocket är uppdelat i 3 sektioner:

1. 1. 1. CSS (styling)
      2. HTML (det faktiska inbäddningsformuläret)
      3. JavaScript (formulärhanteraren)

Det enklaste sättet att se var varje avsnitt börjar och slutar är att leta efter följande taggar:

1. 1. 1. CSS: börjar med slutar med

      2. HTML: börjar med
         slutar med

      3. JavaScript: börjar med slutar med

Låt oss börja med att bara välja mittsektionen – dvs HTML avsnitt som börjar med

. Välj den här koden med musen och kopiera den sedan (Ctrl + C / Kommando + C). Byt sedan tillbaka till Webflow.

För syftet med den här guiden har jag skapat en enkel hemsida med en stor funktionsbehållare och en mitt- och mittjusterad rubrik “Gratis SEO-rapport”. Jag vill nu bädda in revisionsformuläret direkt under rubriken:

Klicka på knappen “Lägg till element” längst upp till vänster. Klicka och dra sedan containerlayouten så att den är direkt under rubriken:

Nu när du har en ny tom behållare klickar du på knappen “Lägg till element” igen uppe till vänster. Rulla ned till avsnittet “Komponenter”, klicka och dra sedan “Bädda in”-komponenten (det tredje alternativet) och släpp den i din nya behållare:

Detta öppnar automatiskt kodrutan. Nu är du redo att klistra in kodblocket (Ctrl + V / Kommando + V):

Klicka på “Spara och stäng”.

Byt tillbaka till Ahrefs och nu vill vi välja CSS avsnitt som börjar på första raden med

. Välj den här koden med musen och kopiera den sedan (Ctrl + C / Kommando + C). Byt sedan tillbaka till Webflow.

Klicka nu på den övre vänstra knappen “W” och välj “Projektinställningar” och klicka sedan på “Anpassad kod” i undermenyn. Klistra in koden i rutan “Rubrikkod” (Ctrl + V / Kommando + V) och klicka på den gröna knappen “Spara ändringar”:

Byt tillbaka till Ahrefs och slutligen vill vi ha den sista delen som är JavaScript avsnitt som börjar med . Välj den här koden med musen och kopiera den sedan (Ctrl + C / Kommando + C). Byt sedan tillbaka till Webflow.

Klistra in koden i rutan “Sidfotskod” (Ctrl + V / Kommando + V) och klicka på den gröna knappen “Spara ändringar”:

Det är allt! Klick Publicera i det övre verktygsfältet för att skicka dina ändringar live.

Testa formuläret för att se till att det fungerar

Ladda din Webflow-webbplats och du bör se ditt nya inbäddningsformulär.

Jag gör ett test med webbadressen “https://www.wallywine.com/” och jag har lagt in min Ahrefs-e-postadress för att simulera hur klientupplevelsen är. I mina inbäddningsinställningar i Ahrefs bockade jag för att skicka ett e-postmeddelande till klienten och lade till min “YourAgency”-logotyp i e-postmeddelandet.

Efter att ha skickat in formuläret fick jag ett omedelbart e-postmeddelande med min rapport bifogad så att jag kan se vad den potentiella kunden ser. Glöm inte att du kan redigera och anpassa alla komponenter i detta e-postmeddelande i inbäddningsinställningarna:

Dessutom landade den nya leaden omedelbart på fliken “Leads” i Ahrefs:

Glöm inte att du också kan ställa in automatiska triggers via Zapier för att skjuta in nya Leads i ditt CRM, e-postverktyg, Slack eller faktiskt någon annan app som stöds av Zapier. Här är en annan guide vi skrev som täcker hur man pushar nya leads till Mailchimp och en annan guide som täcker hur man pushar nya leads till HubSpot.

Om du stöter på några problem med installationen av din inbäddningsformulär, tryck bara på livechattknappen i Ahrefs – vi hjälper dig mer än gärna!