Så här lägger du till ett Klaviyo-inbäddningsformulär på din BigCommerce-webbplats

Du kommer att lära dig

Lär dig hur du lägger till ett Klaviyo-inbäddningsformulä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 den ska visas (t.ex. sidfoten).

Den här guiden visar hur du ersätter BigCommerce standard registreringsformulär med ett Klaviyo inbäddat formulä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 registreringsformulärets funktionalitet (även kallad "onsite spårning"). Om du markerade inställningen Lägg automatiskt till Klaviyo onsite JavaScript när du integrerar med BigCommerce, är du klar. 

Om inte..:

1. På Klaviyo väljer du fliken integrationer.
   
2. Klicka på BigCommerce.
3. Kontrollera inställningen Lägg automatiskt till Klaviyo onsite javascript.
4. Klicka på Spara.

I exemplet i den här artikeln används BigCommerce:s standardtema Cornerstone. Tänk på att ditt tema kan skilja sig åt, liksom namnen på vissa filer eller platserna för kodsnippet.

Lägga till formulärets inbäddningskod på din webbplats

Först skapar och publicerar du ett inbäddat formulär i Klaviyo. Detta avsnitt kommer att gå igenom nästa steg för att klistra in formulärets inbäddningskod på din BigCommerce-webbplats så att den visas och synkroniserar data korrekt.

1. Om du inte redan har gjort det, kopiera 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 på avsnittet Targeting & behavior.
   
2. Navigera till din webbplats och leta reda på standard BigCommerce registreringsformulär. Om du använder ett Cornerstone-tema finns det i sidfoten på webbplatsen.
   
   • Om du inte ser något standardformulär på din webbplats:
     • Öppna din BigCommerce-instrumentpanel.
     • Navigera till Marketing > e-postmarknadsföring
     • Markera rutan Tillåt prenumerationer på nyhetsbrev. Detta gör att du kan samla in e-postmedgivande från besökare på din webbplats och lägger också till en standard e-post Registrera dig-box på din BigCommerce -webbplats. Om den här rutan redan är markerad och du fortfarande inte ser något standardformulär kanske ditt tema inte innehåller något.
3. Öppna din BigCommerce instrumentpanel och navigera sedan till Storefront > Themes.
4. I avsnittet Aktuellt tema klickar du på rullgardinsmenyn Avancerat och väljer sedan Redigera temafiler.
   
   • Om du använder ett standardtema kommer du inte att kunna välja det här alternativet. I stället..:
     
     • Klicka på Gör en kopia, namnge den och välj sedan Spara en kopia. 
     • När det har lagts till i avsnittet Teman väljer du de tre prickarna och väljer sedan Redigera temafiler. Observera att alla ändringar du gör endast gäller för det tema du redigerar, och du måste tillämpa temat på din webbplats för att se ändringarna återspeglas.
5. I den vänstra sidofältet öppnar du den fil som motsvarar den plats där standardformuläret visades på din webbplats. Om standardformuläret fanns i sidfoten, som i exemplet, navigerar du till mall > components > common och klickar på filen footer.html.
6. Använd genvägen Sök (Command+F på Mac eller Control+F på Windows) för att söka efter ordet "nyhetsbrev" i sidfotens fil.
   
7. I koden under den hittar du referensen till formuläret. I exemplet refereras formuläret till en annan filväg: {{> components/common/subscription-form}}.
   
8. I det vänstra sidofältet följer du den filväg som refereras till i koden (i det här exemplet väljer du komponenter > common > subscription-form). Du kommer att se de faktiska komponenterna i standardformuläret härifrån.
   • Eftersom standardformulärets rubrik och språk matchar resten av webbplatsens stilar kommer vi bara att ersätta den faktiska formulärinmatningen. I källkoden kan du se att standardformulärets indata finns i <form> element <-formuläret> .
9. Markera allt mellan den inledande och avslutande <form> etikett, klistra sedan in inbäddningskoden som du kopierade från Klaviyo för att ersätta den markerade texten. 
   
10. Klicka på Spara och tillämpa fil för att tillämpa dessa ändringar på din webbplats.
    • Om knappen bara säger Save file (Spara fil) är den fil du just redigerade inte ditt Current Theme ännu. Du måste klicka på Spara fil, sedan rulla upp och välja Redigera temafiler > Spara > Använd som Aktiv Theme i det övre högra hörnet för att tillämpa temat på din webbplats. 

När du har klistrat in inbäddningskoden, sparat och tillämpat ändringarna i BigCommerce, navigera tillbaka till din webbplats och aktualisera sidan. Ditt Klaviyo inbäddningsformulär visas på din webbplats och börjar lägga till nya prenumeranter i Klaviyo listan som är länkad till formuläret. 

Om du inte ser ditt formulär, se felsökning av inbäddade formulär.

Kommande steg

Skapa sedan en välkomstserie flöde för att göra en omedelbar inverkan på din nya prenumerant.

Ytterligare resurser

• Så här skapar du en välkomstserie för e-post
• Hur man skickar e-post till inaktivera anmälan BigCommerce