Overview
The Embed a Website control in the App Designer editor allows you to display custom web content in your app using HTML, CSS, and JavaScript.
The control includes a code editor with search, preview, and theme customization features. It supports interaction with Bizagi data through the SDK, enables dynamic content through contextualized pages, and provides AI assisted code generation capabilities.
Setting up the control
Manage tab
The Title field lets you define a title for the embedded website. You can choose whether the title is displayed in the app.
The Add your code here field allows you to configure either static or dynamic content. For Fixed content, you can write HTML, CSS, and JavaScript code to create and display a custom embedded website in the app.
Detail pages
When the page is configured as a Detail page, you can define whether the embedded content is static or dynamic by selecting Fixed or Contextualized, respectively.
Design tab
The properties in the Design tab allow you to customize the appearance of the control. To restore the original settings, click Reset.
Style
•Align: Sets the alignment of the content within the control to left, center, or right.
•Control height: Defines the height of the control. You can configure the height in pixels or as a percentage of the available screen space.
•Control width: Defines the width of the control. You can configure the width as a percentage of the available screen space.
•Show Title: Determines whether the title defined in the Title field is displayed.
Border
•Border size: Defines the border width in pixels.
•Border type: Defines the border style applied to the control.
•Border color: Defines the color of the control border.
|
Properties with inherited values display a blue dot. Hover over it to see the source. When modified, a Reset option appears for that specific property. |
Visibility tab
You can define the control's visibility from the VISIBILITY tab.
This option contains two sections:
•In the Personas section, you can select the entities or Personas that are allowed to view the control.
•In the Devices section, you can configure the control's visibility by device (Desktop, Tablet or Mobile). For further information, refer to Control visibility by device.
Embed a Website Control Code Editor
Options menu
The upper left corner of the code editor contains four options: Find, Expand, Theme and Copy.
•Find: Search for keywords or text strings within the code editor.
•Expand: Enlarges the code editor and displays a preview panel alongside the editor. A resizable divider between the code editor and the preview panel lets you adjust the size of each area, providing more workspace for editing code or reviewing the preview.
•Theme: Change the visual appearance of the code editor.
•Copy: Copy all content from the code editor so you can save, review, or edit the code outside the App Designer editor.
Snippets and contextual help for APIs
The code editor makes it easier to add and integrate actions within the Embed a Website control. You can configure app behavior such as navigating to an internal page. Available actions include:
•goToInternalPage
•goToUrl
•createCase
The editor provides contextual help that displays available API methods and parameters, making it easier to configure the desired behavior.
The editor also supports the Collection API (Sites SDK) and provides autocompletion for methods such as:
•sdk.Collection.view()
•view.list()
•view.get()
•view.loadActions()
•view.action()
In addition to views, the editor supports Cases (sdk.Cases.process) and Persona Collections (sdk.Collections.persona().collection()). Contextual autocompletion is available for listing data, loading actions, executing actions, and navigating with context.
When you select an available action, the editor inserts a code snippet containing the required method for the selected operation. A secondary menu displays the available pages so you can choose the destination page for navigation actions.
For SDK methods, the editor inserts the corresponding code snippet and exposes the available actions or fields associated with the selected view.
If you need to change a selected option, delete the current value and press Ctrl + Space to reopen the suggestion menu and select a different option.
Working with Detail pages
When working with Detail pages, you can access page attributes using double curly braces ({{ }}).
After you type the opening double curly braces, the editor displays a list of attributes available for the current page. You can filter the attribute list by name to quickly locate the required attribute.
After you select an attribute, the attribute value is rendered directly within the Embed a Website control.
AI Assisted development
The SDK documentation is structured so it can be used with an AI assistant to generate code for an embedded page, even if you do not have programming experience.
Provide the SDK documentation and describe the desired functionality. The AI assistant can then generate the HTML, CSS, and JavaScript required for the Embed a Website control.
To generate code with an AI assistant:
1.Download the SDK API documentation or copy the relevant sections.
2.Provide the documentation to the AI assistant.
3.Write a prompt describing the desired functionality. The prompt should be:
•Clear: Explain what the embedded page should do.
•Specific: Describe the expected data, layout, and interactions.
•Concise: Focus on the required outcome and avoid unnecessary details.
•Action oriented: Describe what should happen when users interact with the page.
4.Copy the generated code into the code editor of the Embed a Website control.
5.Review the generated result and refine it manually or request additional modifications from the AI assistant.
|
To learn more about the capabilities and implementation of the Embed a Website control, see the Booster. |
Last Updated 7/20/2026 10:02:18 PM