Hoe voeg je een Klaviyo embed formulier toe aan je BigCommerce site?
Wat je leert
Leer hoe je een insluitformulier van Klaviyo toevoegt aan je BigCommerce site. Hiervoor moet je het formulier in Klaviyo maken en vervolgens de insluitcode in de bestanden van je site plakken waar je wilt dat het verschijnt (bijvoorbeeld in de voettekst).
Deze handleiding laat zien hoe je het BigCommerce standaard aanmeldingsformulier kunt vervangen door een Klaviyo aanmeldingsformulier.
Voordat je van start gaatVoordat je van start gaat
Voordat je een insluitformulier maakt in Klaviyo, moet je eerst integreren met BigCommerce, en vervolgens de functionaliteit van het aanmeldingsformulier inschakelen (ook wel "onsite tracking" ). Als je de instelling Automatisch Klaviyo onsite JavaScript toevoegen bij integratie met BigCommerce hebt aangevinkt, dan ben je helemaal klaar.
Zo niet:
- Selecteer in Klaviyo de tab integraties.
- Klik op BigCommerce.
- Vink de instelling Automatisch Klaviyo onsite javascript toevoegen aan.
- Klik op Opslaan.
Het voorbeeld in dit artikel maakt gebruik van het standaard Cornerstone thema van BigCommerce. Houd er rekening mee dat je thema kan verschillen, net als de namen van sommige bestanden of locaties van codefragmenten.
De insluitcode van het formulier aan je site toevoegenDe insluitcode van het formulier aan je site toevoegen
Maak en publiceer eerst een insluitformulier in Klaviyo. In dit gedeelte worden de volgende stappen besproken om de insluitcode van je formulier op je BigCommerce site te plakken, zodat de gegevens goed worden weergegeven en gesynchroniseerd.
- Kopieer de insluitcode voor je insluitformulier als je dat nog niet hebt gedaan. Je kunt de insluitcode van het formulier openen door het formulier te openen in de editor en te klikken op het gedeelte Targeting & behavior.
- Navigeer naar je website en zoek het standaard BigCommerce aanmeldingsformulier. Als je een Cornerstone-thema gebruikt, staat het in de voettekst van de site.
- Als je geen standaardformulier op je website ziet:
- Open je BigCommerce dashboard.
- Navigeer naar Marketing > e-mailmarketing
- Vink het vakje met het label Nieuwsbriefabonnementen toestaan aan. Dit schakelt je in om e-mailtoestemming te verzamelen van bezoekers op je website en voegt ook een standaard e-mail Aanmelden vak toe op je BigCommerce site. Als dit vakje al is aangevinkt en je ziet nog steeds geen standaardformulier, dan bevat je thema er misschien geen.
- Als je geen standaardformulier op je website ziet:
- Open je BigCommerce dashboard en navigeer naar Storefront > Thema's.
- Klik in de sectie Huidig thema op de vervolgkeuzelijst Geavanceerd en kies dan Themabestanden bewerken.
- Als je een standaardthema gebruikt, kun je deze optie niet selecteren. In plaats daarvan:
- Klik op Maak een kopie, geef het een naam en selecteer vervolgens Een kopie opslaan.
- Zodra het is toegevoegd aan de sectie Thema's, selecteer je de 3 puntjes en kies je vervolgens Themabestanden bewerken. Merk op dat alle bewerkingen die je maakt alleen van toepassing zijn op het thema dat je aan het bewerken bent en dat je het thema op je website moet toepassen om de wijzigingen te zien.
- Als je een standaardthema gebruikt, kun je deze optie niet selecteren. In plaats daarvan:
- Open in de linker zijbalk het bestand dat overeenkomt met waar het standaardformulier op je site is verschenen. Als het standaardformulier in de voettekst stond, zoals in het voorbeeld, ga dan naar template > components > common en klik op het bestand footer.html.
- Gebruik de snelkoppeling Zoeken (Command+F op Mac of Control+F op Windows) om het woord "nieuwsbrief" te zoeken in het voettekstbestand.
- Zoek in de code eronder de verwijzing naar het formulier. In het voorbeeld wordt naar het formulier verwezen in een ander bestandspad: {{> components/common/subscription-form}}.
- Volg in de linker zijbalk het bestandspad waarnaar in de code wordt verwezen (selecteer in dit voorbeeld componenten > common > subscription-form). Vanaf hier zie je de eigenlijke onderdelen van het standaardformulier.
- Omdat de kop en taal van het standaardformulier overeenkomen met de rest van de stijlen van onze site, gaan we alleen de daadwerkelijke formulierinvoer vervangen. In de broncode kun je zien dat de invoer van het standaardformulier in het <form> element staat.
- Markeer alles tussen de openings- en sluitingscode van het en <form> plak dan de insluitcode die je hebt gekopieerd van Klaviyo om de gemarkeerde tekst te vervangen.
- Klik op Bestand opslaan en toepassen om deze wijzigingen toe te passen op je website.
- Als de knop alleen Bestand opslaan zegt, dan is het bestand dat je zojuist hebt bewerkt nog niet je Huidige thema. Je moet op Bestand opslaan klikken, dan naar boven scrollen en in de rechterbovenhoek Themabestanden bewerken > Opslaan > Als actief thema gebruiken selecteren om het thema op je website toe te passen.
Als je de insluitcode hebt geplakt, opgeslagen en de wijzigingen hebt toegepast in BigCommerce, navigeer dan terug naar je website en vernieuw de pagina. Je Klaviyo embed formulier wordt weergegeven op je site en begint nieuwe abonnees toe te voegen aan de Klaviyo lijst die aan het formulier is gekoppeld.
Als je je formulier niet ziet, zie dan Problemen met ingesloten formulieren oplossen.
Volgende stappenVolgende stappen
Maak vervolgens een welkomstserie flow om meteen indruk te maken op je nieuwe abonnee.
Extra hulpbronnen