Så lägger du till ett inbäddat Klaviyo-formulär på din BigCommerce-webbplats
Du kommer att lära dig
Läs mer om hur du lägger till ett inbäddat Klaviyo-formulär på din BigCommerce-webbplats, vilket kräver att du skapar formuläret i Klaviyo och sedan klistrar in dess inbäddningskod i webbplatsens filer där du vill att det ska visas (t.ex. i sidfoten).
Den här guiden visar hur du ersätter BigCommerces standardregistreringsformulär med ett Klaviyo-inbäddningsformulär.
Innan du börjar
Innan du skapar ett inbäddat formulär i Klaviyo måste du först integrera med BigCommerce och sedan aktivera funktionen för registreringsformulär (kallas även "spårning på plats"). Om du markerade inställningen Lägg automatiskt till Klaviyo JavaScript på plats när du integrerade med BigCommerce, är du klar.
Om inte:
- På Klaviyo väljer du fliken Integrationer.
- Klicka på BigCommerce.
- Markera inställningen Lägg automatiskt till Klaviyo onsite javascript.
- Klicka på Spara.
Exemplet i den här artikeln använder BigCommerces standardtema Cornerstone. Tänk på att ditt tema kan skilja sig, liksom namnen på vissa filer eller platser för kodsnippet.
Lägga till formulärets inbäddningskod på din webbplats
Börja med att skapa och publicera ett inbäddningsformulär i Klaviyo. I det här avsnittet går vi igenom nästa steg för att klistra in ditt formulärs inbäddningskod på din BigCommerce-webbplats så att den visas och synkar data korrekt.
- Om du inte redan har gjort det kopierar du inbäddningskoden för ditt inbäddningsformulär. Du kan komma åt formulärets inbäddningskod genom att öppna formuläret i redigeraren och klicka dig till avsnittet Inriktning och beteende.
- Gå till din webbplats och leta upp standardregistreringsformuläret för BigCommerce. Om du använder ett Cornerstone-tema finns det i sidfoten på webbplatsen.
- Om du inte ser ett standardformulär på din webbplats:
- Öppna din BigCommerce-instrumentpanel.
- Gå till Marknadsföring > E-postmarknadsföring
- Markera rutan Tillåt prenumerationer på nyhetsbrev. Det gör att du kan samla in samtycke för e-post från besökare på din webbplats och lägger även till en standardruta för e-postregistrering på din BigCommerce-webbplats. Om den här rutan redan är markerad och du fortfarande inte ser ett standardformulär kan det bero på att ditt tema inte innehåller ett.
- Öppna din BigCommerce-instrumentpanel och gå sedan till Storefront > Themes.
- I avsnittet Aktuellt tema klickar du på rullgardinsmenyn Avancerat och väljer sedan Redigera temafiler.
- Om du använder ett standardtema kan du inte välja det här alternativet. I stället:
- Klicka på Skapa en kopia, namnge den och välj sedan Spara en kopia.
- När det har lagts till i avsnittet Teman väljer du de 3 punkterna och sedan Redigera temafiler. Observera att alla redigeringar du gör bara gäller för temat som du redigerar, och du måste använda temat på din webbplats för att se att ändringarna återspeglas.
- Öppna filen som motsvarar var standardformuläret visades på din webbplats i det vänstra sidofältet. Om standardformuläret låg i sidfoten, som i exemplet, navigerar du till mall > components > common och klickar på filen footer.html.
- Använd genvägen för att hitta (Command+F på Mac eller Control+F på Windows) för att söka efter ordet ”nyhetsbrev” i sidfotsfilen.
- I koden under den hittar du referensen till formuläret. I exemplet refereras formuläret i en annan filsökväg: {{> components/common/subscription-form}}.
- I det vänstra sidofältet följer du filsökvägen som refereras i koden (i det här exemplet väljer du components > common > subscription-form). Härifrån ser du de faktiska komponenterna i standardformuläret.
- Eftersom standardformulärets sidhuvud och språk matchar resten av vår webbplats stilar ska vi bara ersätta själva formulärinmatningen. I källkoden kan du se att standardformulärets inmatning finns i elementet <form>.
- Markera allt mellan de inledande och avslutande <form> -taggarna och klistra sedan in inbäddningskoden som du kopierade från Klaviyo för att ersätta den markerade texten.
- Klicka på Spara och tillämpa fil för att tillämpa dessa ändringar på din webbplats.
- Om knappen bara säger Spara fil är filen som du nyss redigerade inte ditt aktuella tema än. Du behöver klicka på Spara fil, sedan rulla upp och välja Redigera temafiler > Spara > Använd som aktivt tema uppe till höger för att tillämpa temat på din webbplats.
När du har klistrat in inbäddningskoden, sparat och tillämpat ändringarna i BigCommerce går du tillbaka till din webbplats och uppdaterar sidan. Ditt inbäddade Klaviyo-formulär visas på din webbplats och börjar lägga till nya prenumeranter i Klaviyo-listan som är kopplad till formuläret.
Om du inte ser ditt formulär kan du läsa felsökning av inbäddningsformulär.
Kommande steg
Skapa sedan ett välkomstserieflöde för att få omedelbar effekt på dina nya prenumeranter.