IBX-9515: Interactive demos added in Developer Documentation (#2616)

* Interactive demos added in dev-doc

* Fixes after review

Author: julitafalcondusza

docs/content_management/forms/form_builder_guide.md

@@ -3,7 +3,7 @@ description: See the Form Builder product guide and learn how to create various
 edition: experience
 ---
 
-# Form Builder product guide 
+# Form Builder product guide
 
 ## What is Form Builder
 
@@ -35,6 +35,8 @@ E. Discard button
 
 ![Form Builder interface](img/form_builder_interface.png)
 
+<!--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-->
+
 ### Form fields
 
 To create forms, you can use available form fields or create custom ones.
@@ -64,6 +66,8 @@ Editors can use the created form anywhere on the website.
 Forms can be used in page blocks, embedded in the online editor or even used as a field relation.
 The same form can be placed at multiple locations on the website.
 
+<!--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-->
+
 To learn more, see [Work with forms]([[= user_doc =]]/content_management/work_with_forms/).
 
 ### Forms management

docs/content_management/pages/page_builder_guide.md

@@ -34,6 +34,8 @@ You can edit any existing page with the Page Builder.
 To do it, in the back office go to **Content** and select **Content structure**.
 Then, from the content tree choose the page and click **Edit**.
 
+<!--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-->
+
 ## What is Page Builder
 
 Page Builder is a visual tool that allows you to create and edit any page in [[= product_name =]].
@@ -103,6 +105,8 @@ Structure view has ability to reorder blocks using drag and drop.
 
 ![Structure view](structure_view.png)
 
+<!--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-->
+
 ##### Choose layout
 
 For newly created Page you can choose a [layout]([[= user_doc =]]/content_management/configure_ct_field_settings/#available-page-layouts) which defines the available zones.

docs/content_management/rich_text/online_editor_guide.md

@@ -27,6 +27,8 @@ To start using it, create any content item with a RichText field (for example, b
 Online Editor covers all fundamental formatting options for rich text, such as headings, lists, tables, inline text formatting, anchors, and links. 
 It also allows embedding other content from the repository, but also from Facebook, Twitter, or YouTube.
 
+<!--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-->
+
 #### Links
 
 All links added to a RichText field by using the link element are listed and can be managed in the [Link manager](url_management.md).