Send Post Messages to Share Data Between Pages

Business Background

When you embed a project in another webpage, you may need the embedded content and the parent page to share information. Post Message lets an embedded project communicate with its parent webpage, or lets an iframe embedded inside a project communicate back to the project.

This is useful when users need to submit forms, pass values, show updated information, or continue a process without leaving the page they are already using. For example, a customer portal can embed a feedback form in an iframe and pass data between the form and the main portal page.

Titan Solution

Titan lets you use Post Message with embedded Titan projects. You can embed a Titan project in an iframe and send messages between the parent webpage and the iframe. You can also embed an iframe inside a Titan project and send messages between them.

Post Message enables data exchange between embedded content and the host page, allowing you to connect user actions, submitted values, survey responses, documents, and other project data to the surrounding page experience.

If you use two Titan projects, publish both projects after making changes so the latest updates are reflected correctly.

How to Video

• 00:00 An introduction to iframe how to embed it in a Titan Web project.
• 1:07 See how to embed a URL in an iframe.
• 2:07 Watch how to post messages to your iframe.

How to Guide

Warning:

Not all sites allow content to be hosted in an iframe. Ensure you have checked that an iframe is supported before following these steps.

Note:

Prerequisites:

On the parent project, create a static custom variable. In this example, the static variables are as follows:

• send_to_child
• get_from_child

1. Click the + icon to open the list of elements.
2. Under the Media option, drag the iframe to the canvas.

3. Paste the URL from the parent project in the field. The parent project will be shown in the child project, with all its functionality.

Note:

Not all websites can be hosted in an iframe.

Websites with specific embed capabilities can be successfully embedded in an iframe; however, numerous popular websites impose restrictions that prevent their content from being displayed this way for security and usability reasons.

In this example, a Titan Web project URL is used.

Send messages

1. Click the + icon to open the list of elements.
2. Under the Button option, click-and-drag a button element to the second strip. The Post Message action will be added to the button.
3. Click the button’s On Click Action icon. The On Click Action screen opens.

4. Click the + icon next to the Start node. The Add Node screen opens.

5. Under System Action, click the Post message option and then click the Next button.

6. Configure the Add Node/Post message screen:
   • Add the domains that will be allowed. This is the domain(s) to which the Titan project is allowed to post.
     • This can be specific domains or you can use a wildcard (*).
     • Only use * when you absolutely trust all potential sources.
   • Use the drop-down list to select the target:
     • This is where the message is sent to.
     • It can be the parent project or the iframe.
   • Set the parameters if necessary.
     • This is how you decide what data to pass from Titan Web to the target.
     • Click the field/s you want to pass data from.
   • Select the listener variable that you will listen to on the target side.
7. Click the Next button.

8. Add a tag if necessary and click the Insert button. The Post message node is added.
9. Click the Apply button.

10. Save the project.

Catch messages

You can enable a constant listener in Titan so that whenever a post message is sent, it will receive and store the data in a pre-defined location.

1. Click the Gear icon to open the Project settings.
2. Select the Tools option.
3. Use the toggle switch to enable the Post Message option and click the Gear icon. The Configure Post message screen opens.

4. Configure the Add Node/Post message screen:
   • Add the domains that will be allowed. These are the domain(s) from which the Titan project is allowed to catch messages.
     • This can be specific domains or you can use a wildcard (*).
     • Only use * when you absolutely trust all potential sources.
   • Use the drop-down list to select the target:
     • This is where the message is from.
     • It can be the parent project or the iframe.
   • Set the parameters if necessary.
     • This is how you decide what data to pass from Titan Web to the target.
     • Click the field/s you want to pass data from.
   • Select the listener variable to which the post message is posted.
     • This lets you know what data to store in which variable.

5. Click the Apply button.
6. Save the project.