Skip to main content

Hoe kan ik een pagina Iframen? - Knowledgebase / Documentation - Clang Support

Hoe kan ik een pagina Iframen?

Authors list

Statische pagina (aanmeld pagina)

Als de getoonde pagina geen gepersonaliseerde informatie bevat bijvoorbeeld omdat dit het begin is van een aanmeld campagne is de volgende informatie voldoende om het juiste iframe te laden.

<iframe src="plaats hier de url van de gewenste pagina" id="ClangFrame" frameborder="no" scrolling="auto" style="width:900px; height:600px;">Uw browser ondersteunt geen i-frames</iframe>

Bijvoorbeeld:

<iframe src="https://www.e-village.nl" id="ClangFrame" frameborder="no" scrolling="auto" style="width:900px; height:600px;">Uw browser ondersteunt geen i-frames</iframe>

Bij het schrijven van de url moet dus de gehele link geplaatst worden, alleen e-village.nl is niet voldoende.


Hoe kom ik achter de url van de pagina welke ik op mijn eigen website wil tonen?

Deze vind je binnen de campagne waarin je de pagina geplaatst hebt, de url hiervan staat in het pagina/formulier object.

Houd er wel rekening mee dat deze url pas beschikbaar wordt nadat de campagne is opgeslagen. 

De link is het makkelijkste te kopiëren door op het vergrootglas te klikken welke deze link zal openen, waarna je deze kan kopiëren.



Gepersonaliseerde pagina / bijwerkformulier iframen

Wanneer heb je deze techniek nodig?

Deze techniek is nodig wanneer de pagina gepersonaliseerd getoond moet worden dit kan in de volgende situaties zijn:

Klant klikt in een ontvangen mail en komt via die link op een pagina waarin deze daar mailvoorkeuren kan updaten, bijvoorbeeld bij een bevestigingsmail in een double opt-in campagne.


Welke stappen zijn er nodig om dit in te stellen?

1 Aanmaken gepersonaliseerde link naar de te i-framen pagina.

2 Instellen ontvangende webpagina zodat de juiste pagina getoond zal worden.


Aanmaken gepersonaliseerde link naar de te i-framen pagina.


In dit voorbeeld gaan we er van uit dat deze constructie vanuit een e-mail zal beginnen, vanuit deze mail gaan we de klanten verwijzen naar onze eigen website met daarin een gepersonaliseerde pagina die vanuit Clang gehost zal worden.


Om de klant naar je eigen website te sturen en daar een clang pagina te tonen zul je in clang een link moeten opmaken die er ongeveer uitziet zoals hieronder:

https://www.e-village.nl/bijwerken/clangurl={{objectlink name='link' campaignid='121' objectid='4' flowid='0'}}

Bovenstaande voorbeeld is op te delen in drie stukken:

Het domein van je eigen website: https://www.e-village.nl/bijwerken/ 

Het gedeelte met de parameter: clangurl=    clangurl is de standaard waarde en kan aangepast worden, dit lees je in de uitleg voor de ontvangende  webpagina 

De campagne objectlink naar de te tonen webpagina: {{objectlink name='link' campaignid='101' objectid='4' flowid='0'}}  
Dit laatste gedeelte geeft aan welke pagina je in je i-frame gaat tonen, deze link kun je in de clang interface voor je laten aanmaken in de UI.
Het aanmaken via de UI kan via het volgende menu, de 'insert' knop vind je bijvoorbeeld bij tekstvelden in een mail object.


Bij het aanmaken van deze link kies je de pagina in een campagne welke je aan de klant wilt gaan tonen op je website.

De aangemaakte code vertelt clang naar welke campagne/pagina de klant moet gaan als hij via de url de mail verlaat, bij het versturen wordt alles tussen de accolades {{ }}  vervangen met voor elk persoon een unieke link, door deze unieke link weten we later voor welke klant we de pagina moeten laten personaliseren.


Instellen ontvangende webpagina zodat de juiste pagina getoond zal worden.


Aangemaakte link mail in clang   https://www.e-village.nl/bijwerken/clangurl={{objectlink name='101' campaignid='163' objectid='1' flowid='0'}}

Als de mail eenmaal verzonden is naar de klanten zal deze link er niet meer zo uitzien maar wordt deze een clickthrough die er bijvorbeeld als hieronder uit kan zien:
https://myclang.com/1/4/65/206/IgzewG1EvRo93Y_jb-yW6I2r-JZ4VZooxKLbN5cG6QbDNrRb3mEyHn_a8f05wMAn

Als de klant er eenmaal op klikt zal in bovenstaande geval de klant doorgewezen worden naar:
https://www.e-village.nl/bijwerken/clangurl=https://myclang.com/3/4/65/206/vmFMArlM0d6yka1BYRWrF_k3gOMpZqi-108iNq3DFPGKFPdyuflJDz3wmPrfU7kf
Deze link heeft dezelfde opbouw als de link aangemaakt in je mail, maar is het laatste deel tussen de accolades vervangen door een clang-url, deze url zorgt ervoor dat clang weet welke pagina getoond moet worden en met de personalisatie van welk klantrecord.

In dit voorbeeld zal de klant op deze webpagina uitkomen: https://www.e-village.nl/bijwerken  hier zal dus webpagina moeten komen op jullie eigen site waarin het clang frame geladen zal moeten worden.


Deze pagina heeft de volgende taken:

Haal uit de url waar de klant is aangekomen de url welke getoond moet gaan worden, (in het voorbeeld dik gedrukt) en plaats deze url als source (src)  van de i-frame.

Om dit te doen hebben wij voorbeeld code gemaakt dit dit uitvoerd, deze code kun je vinden op onze support portal: https://portal.e-village.nl/en/downloads/files/edit-forms-in-iframes-zip

Binnen deze code is 1 regel welke naar eigen inrichting aangepast moet worden

Standaard:

<body onload="getExternalLocation('ClangFrame', 'Clang_url', 'http://www.e-village.nl/', 'https://myclang.com');">

Alternatief:

<script type="text/javascript">
getExternalLocation('ClangFrame', 'Clang_url', 'http://www.e-village.nl/', 'https://myclang.com');
</script>

Er staan 4 waardes binnen de haken,

'ClangFrame'    het id van de iframe binnen je pagina waar deze pagina ge-iframed gaat worden.

'Clang_url'  De naam van de GET-paramater waarin de Clang url in wordt meegegeven in het voorbeeld cursief.

'https://www.e-village.nl'

'https://myclang.com'


<iframe src="" id="ClangFrame" frameborder="no" scrolling="auto" style="width:900px; height:600px;">Uw browser ondersteunt geen i-frames</iframe>

<script type="text/javascript"> getExternalLocation('ClangFrame', 'Clang_url', 'www.e-village.nl/AfvangUrlBijOntbrekenParameter', 'clang.com'); </script>

Bij het laden van de pagina moet de functie worden uitgevoerd, voor deze functie zijn de onderstaande argumenten benodigd:

1: Het id van het iframe

2: De naam van de GET-paramater waarin de Clang url in wordt meegegeven

3: Het webadres dat in het i-frame moet worden getoond als de GET-parameter Clang_url ontbreekt Daar staat nu "http://www.e-village.nl/" maar dat moet uw eigen default pagina worden.

4: Het domein van de bijwerk-url. Deze wordt gebruikt om te checken of de url van het formulier ook daadwerkelijk uit Clang komt. Het kan zijn dat u uw eigen domein heeft voor Clang url's. Dan kunt u dit argument aanpassen.


https://www.e-village.nl/bijwerken/clangurl={{objectlink name='link' campaignid='121' objectid='4' flowid='0'}}

<script type="text/javascript"> getExternalLocation('ClangFrame', 'Clang_url', 'www.e-village.nl/AfvangUrlBijOntbrekenParameter', 'clang.com'); </script>

<iframe src="" id="ClangFrame" frameborder="no" scrolling="auto" style="width:900px; height:600px;">Uw browser ondersteunt geen i-frames</iframe>