Zo voeg je een ingesloten Klaviyo-formulier toe aan je BigCommerce-site

Wat je leert

Lees hoe je een ingesloten Klaviyo-formulier toevoegt aan je BigCommerce-site. Hiervoor moet je het formulier in Klaviyo maken en vervolgens de insluitcode in de bestanden van je site plakken op de plek waar je het wilt laten verschijnen (bijv. in de footer).

Deze gids laat zien hoe je het standaard BigCommerce-aanmeldingsformulier vervangt door een Klaviyo-embedformulier.

Voordat je van start gaat

Om een ingesloten Klaviyo-formulier op je BigCommerce-site weer te geven, integreer je met BigCommerce en installeer je Klaviyo's onsite JavaScript (Klaviyo.js). Dit script maakt aanmeldingsformulieren en onsite tracking mogelijk. Als je de instelling Klaviyo onsite javascript automatisch toevoegen (aanbevolen) hebt aangevinkt tijdens het integreren met BigCommerce, ben je klaar.

Zo niet:

1. Selecteer in Klaviyo Integraties in de linkernavigatie.
   

2. Klik op BigCommerce en selecteer daarna het tabblad Instellingen.
3. Vink de instelling Voeg automatisch Klaviyo Onsite Javascript toe (aanbevolen) aan.
4. Klik op Opslaan.

Het voorbeeld in dit artikel gebruikt BigCommerce’s standaard Cornerstone-thema. Houd er rekening mee dat jouw thema kan verschillen, net als de namen van sommige bestanden of locaties van codefragmenten. Als je later van thema wisselt, voeg je de insluitcode ook toe aan het nieuwe thema.

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.

1. Als je de insluitcode nog niet hebt gekopieerd, open je het formulier in de editor, selecteer je Targeting & behavior > Weergave en kopieer je de code onder Insluitcode.
   

2. 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.
  • Ga naar Marketing > e-mailmarketing.
  • Vink het selectievakje met het label Nieuwsbriefabonnementen toestaan aan. Hiermee kun je e-mailtoestemming verzamelen van bezoekers op je website en wordt er ook een standaard aanmeldvak voor e-mail toegevoegd op je BigCommerce-site. Als dit vakje al is aangevinkt en je nog steeds geen standaard formulier ziet, dan bevat je thema er mogelijk geen.

3. Open je BigCommerce-dashboard en navigeer vervolgens naar Storefront > Themes.
4. 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.

5. 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.
6. Gebruik de zoekfunctie (Command+F op Mac of Control+F op Windows) om in het footerbestand naar het woord "newsletter" te zoeken.
   

7. 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}}.
   

8. 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.
   • In dit voorbeeld komen de kop en inleidende tekst van het standaardformulier overeen met de stijlen van de rest van de site. Laat die tekst buiten het <form> -element staan wanneer je het formulier vervangt.
9. Markeer het volledige <form> -element, inclusief de opening <form ...> tag, de afsluitende </form> tag en alles daartussen. Plak de embedcode die je uit Klaviyo hebt gekopieerd om deze te vervangen. Klaviyo maakt zijn eigen formulier, dus laat de insluitcode niet binnen de originele formulier-tags staan.
   

10. 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.

Test je formulier

1. Verstuur het formulier op je website met een e-mailadres dat nog niet op de lijst staat die aan het formulier is gekoppeld.
2. Als de lijst dubbele toestemming gebruikt, open je de bevestigingsmail en bevestig je je inschrijving. Nieuwe e-mailabonnees worden aan de lijst toegevoegd nadat ze hebben bevestigd.
3. Controleer in Klaviyo of het e-mailadres is toegevoegd aan de lijst die is gekoppeld aan je formulier.

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.

Extra hulpbronnen