Zo voeg je een ingesloten Klaviyo-formulier toe aan je BigCommerce-site
Wat je leert
Leer hoe je een Klaviyo-embedformulier toevoegt aan je BigCommerce-site. Hiervoor maak je het formulier in Klaviyo en plak je vervolgens de embedcode in de bestanden van je site op de plek waar je het wilt weergeven (bijv. de footer).
Deze gids laat zien hoe je het standaard BigCommerce-aanmeldingsformulier vervangt door een Klaviyo-embedformulier.
Voordat je van start gaat
Voordat je een ingesloten aanmeldingsformulier maakt in Klaviyo, moet je eerst integreren met BigCommerce en daarna de functionaliteit voor aanmeldingsformulieren inschakelen (ook wel "onsite tracking" genoemd). Als je de instelling Klaviyo onsite JavaScript automatisch toevoegen hebt aangevinkt bij het integreren met BigCommerce, ben je klaar.
Zo niet:
- Selecteer in Klaviyo het tabblad Integraties.
- Klik op BigCommerce.
- Vink de instelling Klaviyo onsite javascript automatisch toevoegen aan.
- Klik op Opslaan.
Het voorbeeld in dit artikel gebruikt het standaard Cornerstone-thema van BigCommerce. Houd er rekening mee dat je thema kan verschillen, net als de namen van sommige bestanden of de locaties van codefragmenten.
De insluitcode van het formulier aan je site toevoegen
Maak eerst een ingesloten formulier aan in Klaviyo en publiceer het. In dit gedeelte worden de volgende stappen behandeld voor het plakken van de insluitcode van je formulier op je BigCommerce-site, zodat deze correct wordt weergegeven en gegevens goed worden gesynchroniseerd.
- Als je dit nog niet hebt gedaan, kopieer dan de embedcode voor je embedformulier. Je vindt de insluitcode van het formulier door het formulier in de editor te openen en in de sectie Targeting & behavior te klikken.
- Navigeer naar je website en zoek het standaard BigCommerce-aanmeldingsformulier. Als je een Cornerstone-thema gebruikt, staat het in de footer van de site.
- Als je geen standaardformulier op je website ziet:
- Open je BigCommerce-dashboard.
- Navigeer naar Marketing > E-mailmarketing
- Vink het vakje Nieuwsbriefabonnementen toestaan aan. Hiermee kun je e-mailtoestemming van bezoekers op je website verzamelen en wordt er ook een standaard e-mailaanmeldvak toegevoegd op je BigCommerce-site. Als dit vakje al is aangevinkt en je nog steeds geen standaard formulier ziet, bevat je thema er mogelijk geen.
- Open je BigCommerce-dashboard en navigeer vervolgens naar Storefront > Themes.
- Klik in de sectie Huidig thema op het dropdownmenu Geavanceerde en kies vervolgens Themabestanden bewerken.
- Als je een standaardthema gebruikt, kun je deze optie niet selecteren. In plaats daarvan:
- Klik op Een kopie maken, geef deze een naam en selecteer vervolgens Een kopie opslaan.
- Zodra het is toegevoegd aan de sectie Themes, selecteer je de 3 puntjes en kies je Themabestanden bewerken. Let op: alle bewerkingen die je maakt, zijn alleen van toepassing op het thema dat je bewerkt, en je moet het thema toepassen op je website om de wijzigingen terug te zien.
- Open in de linkerzijbalk het bestand dat overeenkomt met waar het standaardformulier op je site werd weergegeven. Als het standaardformulier in de footer stond, zoals in het voorbeeld, ga je naar templates > components > common en klik je op het bestand footer.html.
- Gebruik de zoekfunctie (Command+F op Mac of Control+F op Windows) om in het footerbestand naar het woord "newsletter" te zoeken.
- Zoek in de code eronder de verwijzing naar het formulier. In het voorbeeld wordt er in een ander bestandspad naar het formulier verwezen: {{> components/common/subscription-form}}.
- Volg in de linkerzijbalk het bestandspad waarnaar in de code wordt verwezen (selecteer in dit voorbeeld components > common > subscription-form). Vanaf hier zie je de daadwerkelijke onderdelen van het standaardformulier.
- Omdat de header en de taal van het standaardformulier overeenkomen met de stijlen van de rest van onze site, vervangen we alleen het daadwerkelijke invoerveld van het formulier. In de broncode kun je zien dat het invoerveld van het standaardformulier zich in het element <form> bevindt.
- Markeer alles tussen de openings- en sluitende <form> -tags en plak vervolgens de insluitcode die je uit Klaviyo hebt gekopieerd om de gemarkeerde tekst te vervangen.
- Klik op Opslaan en bestand toepassen om deze wijzigingen op je website toe te passen.
- Als op de knop alleen Bestand opslaan staat, dan is het bestand dat je net hebt bewerkt nog niet je huidige thema. Je moet op Bestand opslaan klikken en vervolgens omhoog scrollen en rechtsboven Themabestanden bewerken > Opslaan > Als actief thema gebruiken selecteren om het thema op je website toe te passen.
Nadat je de insluitcode hebt geplakt, opgeslagen en de wijzigingen hebt toegepast in BigCommerce, ga je terug naar je website en vernieuw je de pagina. Je Klaviyo-insluitformulier 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, bekijk dan problemen met ingesloten formulieren oplossen.
Volgende stappen
Maak vervolgens een welkomstserie flow om direct impact te maken op je nieuwe abonnees.