Post Message

Business Background

Businesses rely on seamless data exchange between different web applications to enhance user experience and operational efficiency. Titan’s Post Message functionality enables precisely this by allowing embedded projects to communicate dynamically with their parent webpages or other embedded elements.

An example is a customer service portal that can embed a Titan-powered form in an iframe to collect feedback or issue reports without redirecting users away from the main site.

Titan Solution

You can embed a Titan project in an iframe and post messages between the parent webpage and the iframe. Alternatively, you can embed an iframe in a Titan project and post messages between them.

Post messaging is a structured method of communication that enables data exchange between an embedded Titan project (iframe) and its host website (or vice versa). This technology facilitates real-time interactions, ensuring that users can submit forms, retrieve survey responses, or dynamically generate and display documents—all without leaving the primary interface.

With Titan, you can build interconnected applications, improve data synchronization, and enhance user engagement—all within an integrated, no-code environment that maximizes efficiency and adaptability.

However, it’s important to ensure that, if you use two Titan projects, both projects must be published after changes to reflect changes properly.

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

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 link from the parent project in the field. The parent project will be shown in the child project, with all its functionality.

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.