De knop is de kleinste Growth Tool. Hij neemt niet meer ruimte in dan één knop op je pagina. Als bezoekers erop klikken, opent een venster met je kop, een optioneel formulier en de keuze voor hun agenda-app. Gebruik hem waar een vak of een banner te veel zou zijn, bijvoorbeeld naast de beschrijving van een evenement of in een navigatiebalk.
Een knop aanmaken
Klik op Nieuwe Growth Tool en kies Knop. De editor heeft vier tabbladen: Instellen, Formulier, Weergave en Delen. Het voorbeeld toont de knop op een voorbeeldpagina.
Instellen
Het tabblad Instellen werkt zoals bij elke Growth Tool. Kies onder Methode voor Abonneren op agenda en voeg agenda’s toe met Agenda toevoegen, of kies Evenement toevoegen en voeg evenementen toe met Evenement toevoegen. De tool heeft minstens één agenda of evenement nodig voordat je hem kunt opslaan.
Wissel je van methode, dan verandert een knoptekst die nog “Abonneren” zegt in “Evenement toevoegen”, en weer terug. Een tekst die je zelf hebt geschreven, blijft zoals hij is.
Het artikel over de landingspagina legt het instellen uitgebreid uit.
Formulier
Contactgegevens verzamelen staat uit bij een nieuwe knop, dus het venster gaat meteen naar de agenda-apps. Zet het aan om eerst om een naam, een e-mailadres of andere antwoorden te vragen. Het formulier begint met “Volledige naam” en “E-mailadres”, en met Veld toevoegen voeg je er meer toe.
De vragen werken precies zoals op een landingspagina: elke vraag heeft een Vraag, een Antwoordtype en, voor alles behalve naam en e-mail, een ledenveld onder Antwoord opslaan in aangepast veld. Verplichte vragen moeten beantwoord zijn voordat bezoekers verder kunnen, en een antwoord op de e-mailvraag moet eruitzien als een e-mailadres.
Weergave
Weergave is verdeeld in statussen, en het voorbeeld volgt de status die je kiest.
Beginstatus is de knop zelf: Knopkleuren voor achtergrond en tekst, Knopgrootte en Knoptekst.
Formulierstatus verschijnt alleen zolang Contactgegevens verzamelen aanstaat. Hier geef je het venster vorm dat opent:
- Beschrijving tonen. De kop en de beschrijving bewerk je door er in het voorbeeld in te klikken.
- Lay-outkleuren voor het venster, de kop en de beschrijving, en Kleuren invoervelden voor de velden.
- Agendakiezer: toon de agenda-apps als tegels met naam en pictogram (Knop), of als een rij Pictogrammen.
- De kleuren, de positie en de tekst van de knop die het formulier verstuurt.
Status na verzenden is het venster nadat bezoekers hun agenda-app hebben gekozen. Daar stel je de kleuren, de positie en de tekst van de knop in.
Delen: de knop plaatsen
Het tabblad Delen biedt twee codes. Gebruik voor een knop de tweede, onder Of insluiten als inline widget. Zoals de toelichting aangeeft, toont die de knop direct in de pagina, zonder iframe:
<div class="cdwidget-embed" data-widget-id="…"></div> <script src="https://…/assets/js/growth-tools.js" async></script>
Kopieer de code van het tabblad en niet uit dit artikel, want daarin staan het adres en de code van jouw tool. Plak beide regels waar de knop moet verschijnen, bijvoorbeeld in een HTML-blok van je pagina-editor.
Plaats je meerdere Growth Tools op één pagina, plak dan voor elke tool beide regels.
De knop verschijnt alleen zolang de tool actief is. Een nieuwe knop begint inactief, dus zet hem aan met de statusschakelaar in de kop van de editor zodra hij klaar is.
De ingesloten knop haalt de actuele instellingen op telkens wanneer de pagina laadt. Heb je kleuren of teksten gewijzigd en op Opslaan geklikt, dan hoef je de code niet opnieuw te kopiëren.
Wat bezoekers zien
Een klik op de knop opent het venster. Verzamel je contactgegevens, dan beantwoorden bezoekers eerst de vragen en gaan ze daarna verder naar de agenda-apps. Ze kiezen hun agenda-app, en het venster gaat naar de status na verzenden, met de kop “Toevoegen aan agenda” en een knop die de app in een nieuw tabblad opent. Met Evenement toevoegen openen Google, Office 365, Outlook.com en Yahoo met het evenement al ingevuld.
Aanmeldingen via de knop tellen als Opt-ins in de lijst met Growth Tools.