IBX-9515: Interactive demos added in the User Documentation (#329)

* Interactive demos added in the user documentation

* Interactive demo for copy block section added

* typo fix

* title fix

* fixes

* demo moved in dashboard section

* Fixes after review

Author: julitafalcondusza

docs/content_management/create_edit_content_items.md

@@ -54,6 +54,8 @@ description: Create content for your website with different fields, rich text, t
 
     For more information, see [Publish content](publish_content.md).
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/T4dqNwZwGGpS3RaLHA6R?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Create and edit article" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 !!! note "Versioning and autosave"
 
     Whenever you edit a content item, a [new version](content_versions.md) is created in the repository.
@@ -99,7 +101,7 @@ Its options appear when you click inside the field box.
 
 ![Online editor menu](img/online_editor_menu.png "Online editor menu")
 
-You can chooose from available options to edit and customize Rich Text field, for example, move up or down its elements, select heading style, add text elements, like superscript, block quote, or anchor.
+You can choose from available options to edit and customize Rich Text field, for example, move up or down its elements, select heading style, add text elements, like superscript, block quote, or anchor.
 
 You can also add new elements to the field.
 To do it, choose one of the available elements:
@@ -118,7 +120,7 @@ To do it, choose one of the available elements:
 Each of these elements can have its own settings, such as text formatting.
 The option bar also lets you reorder or remove any elements in the Rich Text field.
 
-
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/wkdL1r9PRunTeF6hPtEs?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Online Editor - work in Rich Text field" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
 
 #### Edit embedded content items
 
@@ -218,6 +220,7 @@ When response is displayed on the screen, depending on whether you are satisfied
     Depending on the length of the source text and the complexity of request, processing may take a while.
     You may cancel the processing if it takes too long by clicking **Stop**.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/oDRgSawmcExFx2NUJYbM?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Use AI to expand the body text" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
 
 ### SeenThis! streaming
 

docs/content_management/create_edit_pages.md

@@ -45,11 +45,15 @@ You can now navigate away from the Page by clicking the **Close** button.
 
 To edit an existing page, in the back office, from the content tree, choose the page that you want to edit, and click the **Edit** button.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/d4T5EgOwz6bri2Zgy53M?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Edit existing page" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 ### Page Builder interface
 
 Page Builder has a plain and intuitive interface.
 You can create pages without having advanced technical skills.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/kbdnGkdrkXL2VAJW6c3O?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Page Builder interface" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 ![Page Builder interface](img/page_builder_interface.png)
 
 Page Builder user interface consists of:
@@ -178,6 +182,8 @@ Content of the clipboard is visible only to you, and preserves switching into a
 
 ![The clipboard section containing a Code block](img/page_builder_page_blocks_clipboard.png "The clipboard section containing a Code block")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/NqvkgfWoNZkynskJxHEn?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Copy option and Clipboard" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 #### Configure block settings
 
 Each kind of block has its special settings.
@@ -264,4 +270,4 @@ There are several options for saving work on the page:
 |Save draft|Save the page draft*.|
 |Delete draft|Delete the page draft.|
 
-* To help you preserve your work, system saves drafts of content items automatically. For more information, see [Autosave](https://doc.ibexa.co/projects/userguide/en/master/content_management/content_versions/#autosave).
+* To help you preserve your work, system saves drafts of content items automatically. For more information, see [Autosave](https://doc.ibexa.co/projects/userguide/en/master/content_management/content_versions/#autosave).

docs/content_management/preview_content_items.md

@@ -30,3 +30,6 @@ Additionally, if you select a specific SiteAccess from the **Site context** drop
 - when you hover over content items in the content tree, miniature previews appear
 - in Focus mode, when you browse content items in content tree, their full screen preview is displayed
 - if you [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode) or click **Exit full view**, the **View** tab appears in the content item's details view, where you can quickly preview the content item
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/5Y1i3W29Jsg6J0za71GL?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Preview an article,
+switch between sites and views" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->

docs/content_management/schedule_publishing.md

@@ -46,6 +46,8 @@ Use it to remove the previously selected publication date.
 
 ![Discard publish later button in the menu](img/discard_publish_date.png "Discard publish later button in the menu")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/pXVyhWY2v5qD5Q6oS2W6?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Publish in the future" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 You can also [reschedule or cancel planned publications](#reschedule-or-cancel-publication).
 To browse all the future events, use the [Calendar widget](#calendar-widget).
 

docs/content_management/work_with_forms.md

@@ -10,6 +10,10 @@ You can then review the results gathered from website users, for example, to imp
 
 For more information about building and styling forms, see [Developer Documentation]([[= developer_doc =]]/content_management/forms/forms).
 
+You can create a form with a visual drag-and-drop editor, the Form Builder.
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/6TuwPfbDTXTo6SnYSiyW?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Form Builder interface" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 ## Create forms
 
 Editors can use the created form anywhere on the website.
@@ -65,6 +69,8 @@ You can choose one of a few options of what is shown to the user after filling i
 
     For more information, see [Publish content](publish_content.md).
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/YayMqLkQ6QeCZFeVyQxp?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Build a form" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 ## View results
 
 Once you publish a form and users start filling it in, you can preview the results in the **Submissions** tab in the content item view.

docs/content_management/workflow_management/editorial_workflow.md

@@ -27,4 +27,6 @@ If your installation is [configured to support draft locking]([[= developer_doc
 
 In the Review queue table, you can access the draft for editing, review its history, unlock the draft, or request that a lock is released.
 
-For more information, see [Work with versions](work_with_versions.md).
+For more information, see [Work with versions](work_with_versions.md).
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/6ADNUCnEPbEa6MAqWI9u?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Assign an article to review" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->

docs/content_management/workflow_management/work_with_versions.md

@@ -26,6 +26,7 @@ You can also do it in **My dashboard**, the **Review queue** table, by clicking
 If you're not assigned to the draft, depending on the permissions set for your role, in the **Review queue** table, you can either release the lock by clicking the **Unlock** icon, or request that the lock is released by the reviewer by clicking the **Request access** icon.
 
 ## Compare versions
+
 You can compare two versions of the same content item.
 
 To do it, [disable the Focus mode](../../getting_started/discover_ui.md#disable-focus-mode).
@@ -50,6 +51,8 @@ When you compare two versions, the system highlights the changes:
 
 ![Version comparison in Split view](img/split_view.png "Version comparison in Split view")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/RRBS7OWNfcFMQOmiVgBs?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Compare versions" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 You can also compare media field types such as images.
 
 ![Image comparison](img/image_comparison.png "Image comparison")

docs/getting_started/dashboard/dashboard.md

@@ -7,6 +7,8 @@ description: Get to know about dashboard.
 Dashboard is the first screen that you see after you log into [[= product_name =]].
 It provides users a quick overview about specific content to make better business decisions based on data and work more efficiently with a clear and effortless access to important information.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/RowOtNIs36IO5DTmdbXP?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Dashboard - How to navigate" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 Default dashboard in [[= product_name_headless =]] contains the following blocks:
 
 - [Review queue](dashboard_block_reference.md#review-queue-block)
@@ -40,4 +42,4 @@ By default, dashboard in [[= product_name_exp =]] and [[= product_name_com =]] c
 
 ![Dashboard - Experience and Commerce edition](dashboard.png "Default dashboard in Experience and Commerce edition")
 
-For more information, see [Work with dashboard](work_with_dashboard.md).
+For more information, see [Work with dashboard](work_with_dashboard.md).

docs/getting_started/discover_ui.md

@@ -61,7 +61,7 @@ Depending on the product edition and your [permissions](../permission_management
 
 - **Content**, which gives you access to the content repository.
 It lets you navigate the content tree, and, for example, create, edit, move, copy, or delete content.
-- [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]] **Site management**, which enables you to create and edit block-based Pages and manage multiple websites.
+- [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]] **Site management**, which enables you to create and edit block-based pages and manage multiple websites.
 - **PIM**, which enables you to handle products presented on the website, including their specifications and pricing.
 - **Admin**, which is the administration panel where you can manage, for example, Users, Sections, or permissions.
 
@@ -104,6 +104,8 @@ Focus mode helps editors focus on information that is only relevant to their lin
 It's enabled by default, after you log in.
 If you need access to certain settings or technical details, you can [disable the focus mode](#disable-focus-mode) at any time.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/2YM6EhsN5eeohdLzYBpi?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Search and focus mode" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
+
 - **Dark theme for content tree**
 : In areas where the content tree is displayed, for example, in **Content structure**, the tree is displayed on a dark background.
 

docs/getting_started/get_started.md

@@ -141,4 +141,6 @@ Then, click **Change password**.
 Fill in all the required fields and click **Save and close** to save changes.
 Click **Discard** to reject your changes and return to the previous screen.
 
-![Editing password](img/editing_password.png "Editing password")
+![Editing password](img/editing_password.png "Editing password")
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/hmXfcsazcGSJbHzOpKAx?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Log in, navigate to the user profile, and change the password" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->