Many of you have shared your satisfaction with the advanced customization offered by Disign and its adaptability in various use cases. However, until recently, interacting with the content of a frame, particularly when using components like "Website" or "Embed Content", was limited. You could not modify or interact directly with the content inside that frame unless you were the owner and had access to Disign's SDK.

What is the Web Script Engine?

With the introduction of Disign's Web Script Engine, this limitation is now a thing of the past. You can now easily interact with the content of frames, whether it involves modifying elements or automating processes.

Use cases

Here are some concrete examples of what you can achieve with this new feature:

1. Automatic authentication

Suppose you want to display a dashboard like Power BI or Looker Studio, which requires authentication. Thanks to the Web Script Engine, Disign can now automatically log in to these platforms and display the desired content using a low-code approach.

2. Web page modification

Another common use is modifying the displayed content. For example, you can remove parts of a page or adjust the style for optimal display. This allows you to tailor elements to fit perfectly with your digital signage.

3. Accessing specific content

If you need to display a specific element of a web page without a direct link, the Web Script Engine allows you to scroll the page to reach and display that content.

These examples are just the tip of the iceberg. The Web Script Engine is a powerful tool that allows you to deeply interact with the content of third-party sites while optimizing and securing this communication.

How the Web Script Engine works

To understand how to use the Web Script Engine, here is a simple example to perform a Google search:

goAndWait("""https://google.com""")
type("""textarea""", """Disign""")
clickAndWait("""input""")

Each line of instruction is executed sequentially. You also have the option to inject JavaScript or CSS code to further customize your pages:

runScript("""document.querySelector('header').style.backgroundColor = "green";""")
insertStyle("""dsStyleId""", """
    header {
        background-color: red !important;
    }
""")

The Web Script Engine is designed to be readable and accessible, hiding the complexity of site control, navigation, and multi-site interaction.

For more advanced scripts, you can use conditional statements:

if ("""return !!document.querySelector('header h2')""") {
    runScript("""document.querySelector('header').style.backgroundColor = "blue";""")
} else if ("""return !!document.querySelector('header h3')""") {
    runScript("""document.querySelector('header').style.backgroundColor = "green";""")
} else {
    runScript("""document.querySelector('header h1').textContent = "Disign";""")
}

Integration with the Interactivity Editor

The Web Script Engine is configured through the Interactivity Editor. This editor allows you to execute scripts during specific events in Disign. For example, you can set the script to run as soon as the frame loads using onLoad and onFirstLoad events:

onLoad: The script runs with every page change or navigation. onFirstLoad: The script executes on the first load. You can also create dynamic scripts using Disign's script syntax:

goAndWait("""https://google.com""")
type("""textarea""", """{{ $this.vars.searchText }}""")
clickAndWait("""input""")

The Web Script Engine thus enhances Disign's capabilities, providing a dynamic display that is both high-performance and highly customizable, while eliminating many barriers of traditional digital signage. This feature is available for players running Disign OS, Linux, and Windows.

Feel free to share your feedback here. Your insights are crucial for improving our product.

If you have any additional information or elements to include, please let me know!