Embedding iframes to Views
Limited availability
This functionality is currently in limited availability. If you’re interested in trying it out, get in touch with us at Celopeers.
You can embed an iframe to your Studio View using the iframe component, allowing you to display external content from iframe compatible URLs. By embedding content into your View, users can
You can embed content from both static URLs and using a placeholder.
In this static URL example, the Celonis website has been embedded to the View and the user can interact with the site:
 |
A static URL is one which doesn't change based on user input or variables, for example Celonis.com. As long as the URL you use can be displayed as an iframe, you can embed this into a Studio View using the iframe component.
When configuring the iframe component, you have the following options:
URL: Add the URL you want to display within the View, such as Celonis.com in the below example. When added a URL, note these two points:
Protocol prefix: If the URL has no protocol prefix and starts with a / (instead of with https), then the iFrame assumes that the URL is referring to the same domain as the iFrame is hosted.
iframe supported URLs: Some URLs can't be embedded as an iframe, such as Google.com. If you add an URL to the iframe component that isn't supported, the preview will be broken.
Style: Choose to display the iframe content on a white or transparent background. In the example below, a white background style is used.
Caption: Enter text to be displayed underneath the iframe. In the example below, the caption reads 'Celonis.com'
Alt text: Enter text to be used by screen readable devices for accessibility. This text is not displayed within the View. In the below example, the alt text reads 'An embedded version of Celonis.com'.
 |
In addition to embedding static URLs, you can also embed iframes where a placeholder variable is used to determine the URL. This placeholder variable can be combined with other View components, such as input boxes, input lists, and input dropdowns so users can dynamically view the iframe content relevant to them.
In this example, an input dropdown has been configured so the user can select different Celonis.com product pages to display in the frame.
 |
To configure this iframe using a placeholder, we've used the iframe component with a View variable placeholder and the input dropdown component.
Configure iframe component with View placeholder
Using the iframe component, we've added a URL that uses a variable placeholder ($celonis_platform) that we've created in the View.
This is formatted in the iframe component as:
https://www.celonis.com/platform/$(celonis_platform)
This View variable is a string variable with a default value of '/process-mining/, meaning that the following URL will be displayed in our iframe when it loads:
https://www.celonis.com/platform/process-mining/
We've then used this variable placeholder in an input dropdown component to save user selections.
To learn more about View variables, see: Enhanced variables.
Configure input dropdown to save user input
Using the input dropdown component's manual input settings, we've added three options for our users to select from:
/process-mining/
/process-intelligence-graph/
/ai-development/
We've then saved the user selection to our $(celonis_platform) Knowledge Model variable. When the user then selects /process-intelligence-graph/ from the input dropdown, the URL placeholder variable reads this information and displays the updated URL:
https://www.celonis.com/platform/process-intelligence-graph/
To learn more about input dropdowns, head to: User inputs.