Skip to main content

Formulieren en pages gebruiken in iFrames - Kennisbank / Documentatie - Deploy Support

Formulieren en pages gebruiken in iFrames

Authors list

Inleiding

Om klantgegevens up-to-date te houden maak je (wellicht) gebruik van een bijwerkpagina. Een formulier waar klanten de eigen gegevens – zoals e-mailadres – kunnen bijwerken. Deze pagina kan je in CanopyDeploy onderdeel van een hele campagne maken, zodat klanten altijd bij hun eigen gegevens kunnen. Maar dan wil je natuurlijk dat dit alles een naadloos onderdeel van jouw eigen website wordt. We leggen kort uit hoe je dat het beste kunt doen.

Opmerking: Dit principe geldt ook voor een afmeldpagina, maar we gaan in dit voorbeeld verder uit van een bijwerkpagina.


Benodigdheden

Wat heb je allemaal nodig? Allereerst een pagina op jouw eigen website waar het hele proces plaats gaat vinden. We nemen als voorbeeld: "https://www.uwdomein.nl/bijwerken" en een bijwerkpagina in CanopyDeploy. Op deze pagina moet een iframe komen waarin de CanopyDeploy campagne wordt geplaatst. Hoe je dit het beste kunt doen behandelen we niet hier, maar je kan dit onder andere realiseren met javascript of middels een server-side script zoals PHP . Volgende wat nodig is, is een link vanuit de e-mail naar de bijwerkpagina. Na de klik vanuit de e-mail op ‘bijwerken’ moet de klant op de bijwerkpagina terechtkomen. Maar alleen met de link naar de pagina ‘https://www.uwdomein.nl/bijwerken’ is onvoldoende. Er is bij CanopyDeploy namelijk niet bekend wie de klant is die op die bijwerkpagina komt. En zonder klantgegevens kan er geen bijwerkformulier worden getoond. Die klantgegevens moeten dus worden meegestuurd.


Stap 1: Klantgegevens 'meesturen'

Klantgegevens worden meegestuurd met een klik door een campagne-objectlink als variabele toe te voegen aan de url naar de bijwerkpagina.  Bijvoorbeeld: http://www.uwdomein.nl/bijwerken?Clang_url={{objectlink name='afmelden' campaignid='10' objectid='2' fl owid='0'}}

<a href="http://www.uwdomein.nl/bijwerken?Clang_url={{objectlink name='Afmelden' campaignid='10' objectid='2' flowid='0'}}">de link</a>

De URL naar de bijwerkpagina wordt gevolgd door een vraagteken. Na het vraagteken komt de variabele met een waarde. De naam van de variabele is, in dit voorbeeld, 'Clang_url'. De waarde is een campagne-objectlink. Die campagne-objectlink resulteert in een myclang.com url met klantgegevens en de gegevens van de CanopyDeploy bijwerkcampagne.


Stap 2: Integreren van de bijwerkpagina in uw website

Nu moet met die myclang.com url het i-frame worden gevuld. Hiervoor is een functie nodig die de myclang.com url uit ophaalt en valideert om deze vervolgens te kunnen plaatsen in het src=”” attribuut van het i-frame. Zo’n functie kan worden geschreven in bijvoorbeeld PHP of Javascript.

Zoals gezegd moet de functie de waarde van de variabele ‘Clang_url’ valideren. De validatie moet controleren of de variabele een URL bevat en of de URL ook daadwerkelijk een myclang.com URL is. Wanneer dit niet het geval is, doordat een gebruiker handmatig de waarde van de variabele ‘Clang_url’ wijzigt, kunnen er onverwachte resultaten worden getoond in het i-frame.

Wanneer het script de URL heeft gevalideerd wordt de Clang URL in het src attribuut van het iframe geschreven. Op deze manier wordt de juiste bijwerk of afmeldcampagne met klantgegevens in het iframe geladen. e-Village heeft een javascript functie beschikbaar welke je hiervoor kan gebruiken. Deze functie valideert de variabele ‘Clang_url’ en het is mogelijk om een ‘default’ waarde op te geven wanneer de validatie niet slaagt zodat er nooit iets in het i-frame wordt getoond dat ongewenst is.

Een voorbeeld met uitleg van deze functie vind je in het bijgeleverde bestand “setFrame_v3.html“. Wanneer je gebruik maakt van een CMS en daarin geen toegang hebt tot de head en/of de body tag dan kunt u deze versie van de javascript oplossing echter NIET gebruiken. Gebruik in plaats hiervan de oplossing in het document “setFrame_alternatief.html”.