You can use a Web Block to show a web page by specifying its URL. If you have control over the code running in that web page, you can do some interaction from your custom web page hosted inside the IFRAME of the Web Block into Blocks itself. Alternatively, your custom web page can be presented independently of other Blocks content, while still being able to talk to your Blocks server.

HINT If you have made the complete web page specifically for use from within a Web Block, you may host that web page on the Blocks server. Just create a directory somewhere under /public and put your web page and associated CSS and JS files there, then access it using a URL specifying the path to the web page. If you placed your custom web page in a directory named MyWebPage under /public, and it contains a customary index.html file, you can show it by setting the URL of the Web Block to /public/MyWebPage.

All interactions with Blocks from within your custom web page are done using the browser's window.parent.postMessage function, passing various messages and parameters.

Keeps any enclosing Attractor Block in its active state. This is useful since Blocks can not automatically detect user interaction, such as touch or mouse clicks, inside your custom web content. An Attractor often has a timeout that makes it revert to its passive state after some time of interactivity. Passing the action message to the enclosing Web Block prevents this from happening if all interaction is done inside the custom web page. You need to detect such interactions inside your own code in your custom web page, and then do the following when you detect activity:

window.parent.postMessage({type: 'action'}, '*');

Tells any enclosing Locator block to locate the Spot path or Location ID specified. The example shown below passes the number 12, which will be interpreted as a Location ID (since it's numeric).

window.parent.postMessage({type: 'set-location', data: "12"}, '*');

Alternatively, pass a Spot name or dot-separated spot path (if the target is inside spot groups), as the data parameter.

Navigate to specified block path inside the current root block.

window.parent.postMessage({type: 'goto-block', data: "/path/to/block"}, '*');

Navigate back, just like the browser's BACK button.

window.parent.postMessage({type: 'go-back'}, '*');

Set tags on the Spot, for use with Tag Selector.

window.parent.postMessage({type: 'set-tags', data: "tag1,tag2,en"}, '*');