IBX-9618: Interactive demos added in the doc (#349)

* Interactive demos added in the doc

* fix

* Screenshot updated

* fixes after review

Author: julitafalcondusza

docs/ai_actions/work_with_ai_actions.md

@@ -101,6 +101,8 @@ For a list of available settings, see [Edit existing AI actions](#edit-existing-
 
 1. Click **Save and close** to apply the changes or **Discard** to discard them and close the window.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/4amA1EL6g3fFxSmQoFCp?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Work with AI actions" 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-->
+
 ## Duplicate AI actions
 
 You can duplicate existing actions, for example, to create a variant version of an action with slightly different settings.

docs/content_management/content_organization/classify_content.md

@@ -26,6 +26,8 @@ If you want to remove a content item from a section, you need to assign it to a
 
 Access to sections can be restricted by [setting up proper permissions](../../permission_management/work_with_permissions.md).
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/QU3fe8uecEBv4NDbPCoc?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Create new section" 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-->
+
 ## Object states
 
 You can assign specific object states to all content items in your website.
@@ -49,6 +51,8 @@ Click **Bookmarks** in the left menu to view a list of all of them.
 
 ![Bookmark screen](img/bookmarks.png)
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/YntAJoNhClxKurgeOXEt?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Manage bookmarks" 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-->
+
 ## Segments [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
 
 With segments you can target content at specific groups of your users.
@@ -63,3 +67,5 @@ You can create and configure segments and segment groups in the **Admin** sectio
 
     Assigning users to segments happens automatically according to rules set up by the administrator.
     Contact your website administrator for more information about your setup.
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/uts6qBWYu0PgNqAjODY0?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Work with segments" 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/content_organization/copy_move_hide_content.md

@@ -92,3 +92,5 @@ This is different from [hiding locations](manage_locations_urls.md#hide-location
     or [**Object State**](classify_content.md#object-states),
     and set a different section or object state for the given content.
     Or use other permission-based [**Limitations**](work_with_permissions.md).
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/NQXMhcHiPL1dVRT9Eg3u?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Copy, move or hide content" 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/content_organization/manage_locations_urls.md

@@ -24,6 +24,8 @@ Then select the new parent from the content browser.
 
 ![Content with two locations](img/content_with_two_locations.png "Content with two locations")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/RDr8CRVwZXFu1usGhpJJ?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Manage content locations" 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-->
+
 ### Hide locations
 
 You can manage the availability of content by hiding or revealing it.
@@ -87,6 +89,8 @@ The **Last checked** column displays when the status was last verified.
 
     Once you save the link, it's automatically be marked as "Valid".
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/YSkaNNICXH0ipckN2Nxx?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Manage URLs" 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-->
+
 ### URL aliases
 
 Each content item can have one or more URL aliases. They're additional URLs that can be used to access this content item.

docs/content_management/taxonomy/work_with_tags.md

@@ -23,6 +23,8 @@ You can create tags in two ways:
 
 Now, the tag is visible in the taxonomy tree.
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/l7FSQBrnzGvtBgAaicrs?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Add new tag" 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-->
+
 ### Assign tag to content from taxonomy tree
 
 Taxonomy is controlled and configured by the *Taxonomy Entry Assignment* field settings, so you can use multiple fields of this type with different taxonomies, for example, tags and product categories in the same content type.

docs/content_management/translate_content.md

@@ -42,6 +42,8 @@ the same way as when editing only one language.
 
 ![Adding a new translation](img/adding_translation.png "Adding a new translation")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/wrOL621W0E3uAwSOBBmZ?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Add translation" 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-->
+
 ### Automated translation
 
 If your application comes with a [properly configured automated translation feature]([[= developer_doc =]]/multisite/languages/automated_translations), you can have your content machine-translated into multiple languages by using external translation services like Google Translate and DeepL.

docs/getting_started/content_tree/content_tree.md

@@ -40,3 +40,5 @@ A similar procedure applies to other areas of the system where the tree hierarch
 6\. Click **Publish**.
 
 The newly created folder is now visible in the content tree.
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/eKT6FDQsAJPsyQs59OlK?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Content tree - add folder" 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/getting_started/dashboard/work_with_dashboard.md

@@ -29,6 +29,8 @@ This action opens an online editor - Dashboard Builder.
 
 ![Dashboard Builder](dashboard_builder.png "Dashboard Builder")
 
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/e5bqo0vVeXcLX0fUtfZw?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Customize dashboard" 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-->
+
 ### Dashboard Builder interface
 
 Dashboard Builder user interface consists of:

docs/permission_management/work_with_permissions.md

@@ -34,3 +34,5 @@ You can then return to a list of policies by clicking **Save and close** or **Di
     A user or user group may be assigned multiple roles.
 
 For a list of available permissions and limitations, see [Permissions]([[= developer_doc =]]/permissions/permissions/).
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/t87azp7uGgwZVbJZKweH?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Work with permissions" 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/recent_activity/recent_activity.md

@@ -55,3 +55,5 @@ The following example shows, how to narrow the results by selecting **Action** a
 With these settings, activity list displays only `Publish` actions from `Last week` time period.
 
 ![Published last week](recent_activity_filters.png "Published last week filter set")
+
+<!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/IAJrEyQUizSxnei6kSis?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Recent activity" 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-->