Mailblue met code aan je Squarespace website koppelen
Het Newsletter block in Squarespace heeft een automatische koppeling met Squarespace Email Campaigns en Mailchimp. Maar wat nu als je Mailblue of Active Campaign gebruikt als e-mailmarketing tool? Hoe zet je de opt-in dan op je website?
Eigenlijk is het vrij eenvoudig.
Eerst richt je je Mailblue account helemaal in, maak je een template voor je nieuwsbrief en zet je eventueel een automation op.
Hierna ga je als volgt te werk:
Klik in Mailblue in het menu aan de linkerkant op Website
Klik op Formulieren (en klik in de pop-up op maak een Formulier)
Vul een Naam in voor het Formulier, bijvoorbeeld Nieuwsbrief homepage
Inline-formulier is reeds geselecteerd. Dit is prima.
Kies bij Actie voor Inschrijven voor een lijst
Bij Optie kies je de betreffende lijst
Klik hierna op Aanmaken
Nu kom je in de Editor en kan je vormgeving van de opt-in wijzigen.
Deze vormgeving wijkt zoals je ziet nogal af van het Newsletter block in Squarespace (ik noem het gewoon lelijk ;-)). De kunst is dus om deze zoveel mogelijk te laten aansluiten bij de look van je site.
De inhoud van de opt-in:
In de grijze kolom aan de rechterkant zie je dat je op het tabblad Velden zit.
Haal de bovenste 2 tekstvelden weg (ofwel: Abonneren op e-mail updates & Voeg een beschrijvend bericht toe… ). Als je tekst bij je opt-in wilt zetten, dan kan je dat beter in Squarespace zelf doen met een Text Block.
Klik op het veld Volledige Naam. Aan de rechterkant kan je de tekst Volledige naam vervangen door Voor- en Achternaam als je dat prettiger vindt.
Of je haalt het Volledige Naam veld weg en sleept vanuit de grijze kolom aan de rechterkant het veld Voornaam je formulier in. Idem dito voor het Achternaam veld.
De standaardtekst in de velden (zoals Type je voornaam in) kan je weghalen en je kan aangeven of een veld wel of niet verplicht is.
De vormgeving van de opt-in:
In de grijze rechterkolom klik je op het tabblad Stijl.
Klik bij Layout of je de velden onder of naast elkaar wilt hebben.
Bij Formulierstijl en Knop kan je je huisstijlkleuren invoeren, kan je de knop van vorm veranderen en de achtergrondkleur van de opt-in bepalen. Voor die laatste is transparant waarschijnlijk de beste optie, zodat de opt-in mooi in je site ‘blend’.
Helemaal onderaan zet je AC branding uit. (tenzij je het leuk vindt om Active Campaign/Mailblue te promoten :-)).
Wat gebeurt er ná de opt-in:
In de grijze kolom klik je op het tabblad Opties.
Bij Op indienen kan je kiezen voor Toon Bedankt (dit is automatisch geselecteerd). Je kan hier het bedankberichtje aanpassen wat een nieuwe inschrijver te zien krijgt.
Beter nog is om een aparte bedankpagina in Squarespace te maken. Klik dan op het dropdown pijltje bij Toon Bedankt en select Open URL. Voer hier de URL van de bedankpagina in.
Bij Inschrijven voor een lijst staat als het goed is al de juiste lijst geselecteerd, maar dit kan je nog wijzigen.
Klik op het tandwieltje. Hier kan je aan- op uitzetten of iemand een bevestigingsmail krijgt na inschrijving (de zogenaamde dubbele opt-in).
Bij Deelname e-mail kan je de vormgeving van deze bevestigingsmail aanpassen zodat deze zoveel mogelijk bij je huisstijl aansluit.
Je adres is nodig voor het versturen van een mailing, dus deze moet ook ingevuld zijn. (Als je hier niets kan selecteren, voeg dan een adres toe via het linker hoofdmenu via Instellingen (het tandwieltje) > Adressen.)
Nu kan je de opt-in integreren op je website.
Klik rechts bovenin op de blauwe Integreren knop.
Wat je nu nodig hebt is de Eenvoudig insluiten code. Deze code kopieer je.
Je gaat nu naar de pagina in je Squarespace website waar je de opt-in wilt plaatsen. Voeg op de gewenste plek een Code Block in.
Verwijder de volledige ‘Hello World’ code en plak hier de code die je zojuist in Mailblue hebt gekopieerd.
Sla de wijzigingen op de pagina op.
Het kan nu zijn dat niet direct je opt-in zichtbaar wordt. Dat is vaker aan de achterkant van je site als je met een Code block werkt. Bekijk dan de pagina aan de voorkant, dus als je bent uitgelogd. Of soms helpt de pagina refreshen ook als je wel ingelogd blijft.
Je opt-in verder finetunen met CSS
Nu kan het zijn dat je nog niet wild enthousiast wordt van hoe de opt-in eruit ziet op je site. Dit komt omdat de standaard look van Mailblue gewoon niet echt heel mooi is. Kleuren kan je aanpassen, maar het liefst wil je dat het lettertype ook beter aansluit bij je site.
Je kan dit aanpassen door wat CSS toe te voegen in Mailblue.
Dat doe je op het tabblad Stijl bij Aangepaste CSS.
Let op: het werken met code let heel nauw. Een punt, komma of spatie kan er al voor zorgen dat je hele code niet meer werkt. Doe het dus heel secuur.
Klik op de Inspecteur knop. Deze wordt dan groen.
Ga met je muis over de tekst boven het eerste veld (waar in de afbeelding hieronder ‘Voornaam’ staat)
In het blauw verschijnt dan een code gevolgd door de tekst ‘label’. Klik hierop.
Er verschijnt nu een code in het CSS veld.
Op de witregel tussen de twee haakjes vul je onderstaande code in:
font-size: 16px;
font-weight: 200;
font-family: arial;
Doe nu hetzelfde met de tekst boven het tweede (e-mail) veld en vul op de witregel deze code in:
font-size: 16px;
font-weight: 200;
font-family: arial;
En als laatste doe je dit met de button en vul dan deze code in:
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.2em;
text-transform: uppercase;
font-family: arial;
Je krijgt dan in het CSS veld het volgende:
._x06037035 label {
font-size: 16px;
font-weight: 200;
font-family: arial;
}
._x30465724 label {
font-size: 16px;
font-weight: 200;
font-family: arial;
}
._submit {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.2em;
text-transform: uppercase;
font-family: arial;
}
Nu kan je zelf spelen met de waardes.
Font-weight gaat altijd in stappen van 100, dus 100, 200, 300, 400, 500, 600, 700, 800. Maar dit is ook weer afhankelijk van het lettertype. Sommige lettertypes bestaan bijvoorbeeld alleen in 100, 400 en 800 en andere weer in 100 en 500. Speel hier dus mee.
Letter spacing is de ruimte tussen de letters. Als je wilt dat het 0 is, dan kan je deze regel ook helemaal verwijderen.
Ditzelfde geldt voor text-transform. Ipv uppercase kan je hier ook lowercase neerzetten of de regel helemaal verwijderen.
Bij font family kan je het lettertype invullen wat je in Squarespace gebruikt. Dit hoeft voor de tekstvelden dus niet hetzelfde te zijn als voor de button. Bestaat je font uit 2 woorden, gebruik dan een koppelteken (bv proxima-nova).
Mocht een coderegel niet werken, dan kan je altijd nog de important tag (!important) gebruiken en kijken of het dan wel werkt. Ofwel:
font-family: arial!important;
Let op dat altijd afgesloten wordt met de punt komma, dus niet dat je de important tag achter de punt komma zet.
Omdat je de eenvoudig insluiten code hebt gebruikt worden de CSS aanpassingen automatisch doorgevoerd in je site.
That’s it! :-)
