A great feature of ClickDimensions’ landing page block editor is that it provides a simple method to embed form or survey iframes directly into the landing page. This is handy, but as some of you are likely aware, the form, survey and subscription page editors also provide the option to embed these records as widgets. iframes suffice in most scenarios, but some customers have wanted to also have the option to embed widgets onto landing pages since they can inherit styling from the parent page and redirect the whole page on submission instead of just redirecting within the frame.
There’s a silver lining to this scenario, fortunately: widgets may not be able to be directly embedded through the landing page editor UI, but they can still be added to the landing page thanks to the landing page block editor’s external resources tool. Let’s take a look at the process.
Step 1: Copy the Form Widget Embed Code
Begin by opening the editor for the form, survey or subscription page you want to embed by clicking Embed, selecting Embed as Widget, then copying the widget embed code.
Once you have the widget code, open the landing page block editor.
To allow the widget to embed properly, the second line will also need to be updated from https to http by manually deleting the “s.”
…src=”https://az1246… → …src=”http://az1246…
The last line of the widget code, beginning with <div>, needs to be added to the landing page body instead. Highlight this line of code and cut it out of the external resources:
Click Save to close external resources and return to the editor.
Step 3: Place the <div> Code into an HTML Block
The <div> code that we removed from external resources will be used to indicate where on the landing page the widget will display. Use the right click menu in the landing page block editor to add an HTML block to the page, then use the right click menu again to edit the block.
Click the HTML tab at the bottom of the editing pane, the paste in the <div> code that was cut out of the external resources.
Click Next, then Finish to return to the landing page editor, then click Save.
Step 4: Viewing the Widget
The widget is now officially embedded in the landing page, but something may seem off initially: it doesn’t show up in the editor.
This is expected behavior which occurs because the landing page editor is not officially designed to support embedding widgets. However, if you save the landing page, then go to its Embed menu and click the Embed link to open a live copy of the page…
…you will see the widget display normally on the live version of the landing page.
Congratulations! You are now the proud owner of a widget embedded onto a landing page. This will allow the full landing page to be redirected if the embedded widget is set to redirect on submission.