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.

Step 2: Place the Widget’s JavaScript into External Resources

Widgets utilize JavaScript, and the body of the landing page does not support JavaScript. As such, we will need to split the embed code in half to have the widget display on the landing page. To begin, in the landing page editor, Click Page > Add External Resources, then paste the widget code into the header section.

The first two lines of the widget code that begin and end with <script> and </script> are the JavaScript component of the embed code. These two lines need to remain in External Resources since the Landing Page editor’s body does not support JavaScript.

<script type=”text/javascript”>var loc = “http://web.tomatogardens.org/clickdimensionscom-as6rw/pages/”;</script>

<script type=”text/javascript” src=”https://az124611.vo.msecnd.net/web/v10/CDWidget.js”></script>

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:

<div pageID=”h4d6kyeeeazqanohswza”></div>

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.

Happy Marketing!