Merge pull request #4354 from braze-inc/bf/iam_dnd_GA

IAM Drag & Drop Editor EA

_docs/_user_guide/message_building_by_channel/in-app_messages/create.md

@@ -1,7 +1,7 @@
 ---
 nav_title: Creating an In-App Message
 article_title: Creating an In-App Message
-page_order: 0
+page_order: 1
 description: "You can create an in-app message using the Braze platform using campaigns, Canvas, or as an API campaign. This article will guide you through this process."
 channel:
   - in-app messages

_docs/_user_guide/message_building_by_channel/in-app_messages/creative_details.md

@@ -1,7 +1,7 @@
 ---
 nav_title: Creative Details
 article_title: Creative Details
-page_order: 1
+page_order: 2
 layout: featured
 guide_top_header: "Creative Details"
 guide_top_text: "Get creative with our in-app messages! But you should know some of the guidelines, first! All in-app messages templates are designed to display varying lengths of text and sizes of images across modern devices. In order to ensure your message displays well on all phones, tablets, and computers, we recommend you follow these guidelines and always <a href='/docs/user_guide/message_building_by_channel/in-app_messages/testing/'>test your messages</a> before launching. Check out the following individual message type's Creative Specs or the global Creative Details article."

_docs/_user_guide/message_building_by_channel/in-app_messages/customize.md

@@ -1,7 +1,7 @@
 ---
 nav_title: Customize
 article_title: Custom In-App Messages
-page_order: 2
+page_order: 2.5
 layout: featured
 guide_top_header: "Custom In-App Messages"
 guide_top_text: "In addition to the out-of-the-box in-app message templates, Braze also offers customized messaging templates that allow custom HTML, modals with custom CSS, video, and more. Check out the following articles for details."

_docs/_hidden/private_betas/iam_drag_and_drop.md → _docs/_user_guide/message_building_by_channel/in-app_messages/drag_and_drop.md

@@ -1,15 +1,13 @@
 ---
-nav_title: Drag & Drop Editor for In-App Messages
+nav_title: Drag & Drop Editor
 article_title: Drag & Drop Editor for In-App Messages
-permalink: /iam_drag_and_drop/
-page_order: 2
+alias: /iam_drag_and_drop/
+page_order: 1.5
 layout: featured
 guide_top_header: "Drag & Drop Editor for In-App Messages"
 description: "The Drag & Drop Editor brings ease to Braze in-app message building. With the drag & drop editing experience, you can create completely custom and personalized in-app messages for mobile apps and web browsers without using HTML."
 guide_top_text: "The Drag & Drop Editor brings ease to Braze in-app message building. With the drag & drop editing experience, you can create completely custom and personalized in-app messages for mobile apps and web browsers without using HTML. Check out the following articles to learn more."
 
-hidden: true
-
 guide_featured_title: "Articles"
 guide_featured_list:
 - name: Creating an In-App Message

_docs/_hidden/private_betas/iam_drag_and_drop/create_dnd_iam.md → _docs/_user_guide/message_building_by_channel/in-app_messages/drag_and_drop/create.md

@@ -2,16 +2,15 @@
 nav_title: Creating an In-App Message
 article_title: "Creating an in-app message with Drag & Drop"
 description: "With the Drag & Drop Editor, you can create completely custom and personalized in-app messages in either campaigns or Canvas using the drag & drop editing experience."
-permalink: "/create_dnd_iam/"
-hidden: true
+alias: "/create_dnd_iam/"
 ---
 
 # Creating an in-app message with Drag & Drop
 
 With the Drag & Drop Editor, you can create completely custom and personalized in-app messages in either campaigns or Canvas using the drag & drop editing experience.
 
 {% alert important %}
-This feature is currently in beta. Please reach out to your customer success representative for access.
+This feature is currently in early access. Please reach out to your customer success representative for access.
 {% endalert %}
 
 If you want to use your existing custom HTML templates or templates created by a third party, they must be recreated in the Drag & Drop Editor.
@@ -29,50 +28,84 @@ If a user hasn't updated their application (that is, they're on an older SDK ver
 **Additional Web SDK prerequisite**<br>
 The initialization option [`allowUserSuppliedJavascript`](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#initializationoptions) must be set to `true`. The `enableHtmlInAppMessages` option will also allow these messages to function, but is deprecated and should be updated to `allowUserSuppliedJavascript`.
 
-## Step 1: Specify delivery platforms
+## Step 1: Create an in-app message
 
-After selecting the Drag & Drop Editor as your editing experience, select the message platform you would like to send your message to: Mobile Apps, Web Browsers or Both Mobile Apps & Web Browsers.
+Create a new in-app message or Canvas step, then select **Drag & Drop Editor** as your editing experience.
 
 ## Step 2: Build and design your in-app message
 
-The drag & drop editing experience is divided into three sections: **Build**, **Settings**, and **Preview & Test**.
+The drag & drop editing experience is divided into two sections: **Build** and **Preview & Test**.
+
+### Set message-level styles
+
+You can set certain styles to be applied across all relevant blocks in your in-app message from the **Message Styles** tab. The styles set in this section are used everywhere in your message except where you override it for a specific block.
+
+To return to the **Message Styles** tab at any time:
+
+- Click the close X button on individual block properties
+- Select the message container, message close X button, or editor background
+
+#### Add a custom font
+
+To add a custom font:
+
+1. Go to the **Content** section in the **Message styles** tab.
+2. Click **Add custom font**.
+3. Upload your font using the Media Library. 
+
+We accept the following file types for fonts: `.ttf`, `.woff`, `.otf`, `.woff2`. For more information, see [Asset files]({{site.baseurl}}/user_guide/message_building_by_channel/in-app_messages/customize/html_in-app_messages#asset-files).
+
+You can add multiple variations of a font family as some styling options may not be available for custom fonts. Currently, we don't support adding fonts via URL.
+
+{% alert note %}
+The message-level font will only apply to the current message and any duplicated messages, but not to future templates.
+{% endalert %}
 
 ### Drag and drop in-app message components
 
 When you open the Drag & Drop Editor, you’ll see a basic modal layout on the editing canvas, which you can use to start building your message. You can keep this layout or add, delete, and move around the Rows and Blocks. The **Close Button** will remain at the top section of your message so that users always have an option to dismiss the modal.
 
-The Drag & Drop Editor uses two key components to make in-app message composition quick and easy: **Rows** and **Blocks**.
+![]({% image_buster /assets/img_archive/dnd_iam_create.gif %})
 
-![]({% image_buster /assets/img_archive/dnd_iam_rows_blocks.png %}){: style="float:right;max-width:30%;margin-left:15px"}
+The Drag & Drop Editor uses two key components to make in-app message composition quick and easy: **rows** and **blocks**. All blocks must be placed in a row.
 
-- **Rows** are structural units that define the horizontal composition of a section of the message by using cells. Using more than one cell allows you to put different content elements side by side. You can add all the structural elements you need to your message.
-- **Blocks** represent different types of content you can use in your message. Simply drag one inside an existing row segment, and it will auto-adjust to the cell width.
+#### Rows
 
-Every block has its own settings, such as granular control on padding. The right-side panel automatically switches to a styling panel for the selected content element. For more information, see [Editor Block Properties]({{site.baseurl}}/editor_blocks_dnd_iam/).
+Rows are structural units that define the horizontal composition of a section of the message by using cells. 
 
-As you build your in-app message, you can select a mobile, tablet, or desktop view in the toolbar to preview how your in-app message will look for your user groups. This will ensure that your content is responsive, and you can make any necessary adjustments along the way.
+![]({% image_buster /assets/img_archive/dnd_iam_rows.png %}){: style="max-width:40%"}
 
-### Set default font settings
+When a row is selected, you can add or remove the number of columns you need from the **Column customization** section to put different content elements side by side. 
 
-You can select a default font from our library of fonts or add a custom font to be applied across all possible in-app message text in the **Settings** tab. The default font set in this section is used everywhere in your message except where you use a custom setting.
+You can also slide to adjust the size of existing columns.
 
-#### Add a custom font
+![]({% image_buster /assets/img_archive/dnd_iam_column_customization.gif %}){: style="max-width:40%"}
 
-To add a custom font, go to the **Settings** tab, click **Add a custom font**, and upload your font using the Media Library. We accept the following file types for fonts: `.ttf`, `.woff`, `.otf`, `.woff2`. For more information, see [Asset files]({{site.baseurl}}/user_guide/message_building_by_channel/in-app_messages/customize/html_in-app_messages#asset-files).
+#### Blocks
 
-You can add multiple variations of a font family, as some styling options may not be available for custom fonts. Currently, we don't support adding fonts via URL.
+Blocks represent different types of content you can use in your message. Simply drag one inside an existing row segment, and it will auto-adjust to the cell width.
 
-{% alert note %}
-The default font will only apply to the current message and any duplicated messages, but not to future templates.
-{% endalert %}
+![]({% image_buster /assets/img_archive/dnd_iam_blocks.png %}){: style="max-width:40%"}
+
+Every block has its own settings, such as granular control on padding. The right-side panel automatically switches to a styling panel for the selected content element. For more information, see [Editor Block Properties]({{site.baseurl}}/editor_blocks_dnd_iam/).
+
+As you build your in-app message, you can select a mobile, tablet, or desktop view in the toolbar to preview how your in-app message will look for your user groups. This will ensure that your content is responsive, and you can make any necessary adjustments along the way.
 
 ### Creative details
 
+#### Customize background image 
+
+You can add an image to the background of your message from the **Message styles** tab. The scrollable section of your message must be selected to add a background for the entire message.
+
+{% alert tip %}
+If you're having trouble selecting a certain block, you can use the up arrow in the block's inline toolbar to move focus up to each parent block.
+{% endalert %}
+
 #### Adding Liquid
 
 ![]({% image_buster /assets/img_archive/dnd_iam_liquid.png %}){: style="float:right;max-width:25%;margin-left:15px"}
 
-To add [Liquid]({{site.baseurl}}/user_guide/personalization_and_dynamic_content/liquid) into your in-app message, select <i class="fa-solid fa-circle-plus"></i> **Liquid Personalization** from the editor toolbar. Here, you can add various personalization types such as standard (default) attributes, device attributes, custom attributes, and more!
+To add [Liquid]({{site.baseurl}}/user_guide/personalization_and_dynamic_content/liquid) into your in-app message, select <i class="fa-solid fa-circle-plus"></i> **Add Personalization** from the editor toolbar. Here, you can add various personalization types such as default attributes, device attributes, custom attributes, and more!
 
 Next, take your generated Liquid snippet and insert it into your message. Once you’ve finished designing and building your in-app message, go to **Preview & Test** to preview your message.
 
@@ -108,6 +141,5 @@ No.
 **Can I save my in-app message as a template after I build it within my campaign or Canvas?**<br>
 No, you have to recreate the in-app message in the Drag & Drop Editor or duplicate an existing message in order to save.
 
-**How can I create a Full-Screen or Slideup in-app message?**<br>
-The Drag and Drop Editor is in beta and is limited to the Modal message type.
-
+**How can I create a full-screen or slideup in-app message?**<br>
+Currently the editor is limited to modal messages only.

_docs/_hidden/private_betas/iam_drag_and_drop/editor_blocks_dnd_iam.md → _docs/_user_guide/message_building_by_channel/in-app_messages/drag_and_drop/editor_blocks.md

@@ -1,12 +1,11 @@
 ---
 nav_title: Editor Blocks
-article_title: "Editor Blocks"
+article_title: "In-App Message Editor Blocks"
 description: "This reference article describes the editor blocks available in the Drag and Drop Editor for in-app messages."
-permalink: "/editor_blocks_dnd_iam/"
-hidden: true
+alias: "/editor_blocks_dnd_iam/"
 ---
 
-# Editor blocks
+# In-app message editor blocks
 
 Editor blocks are the various blocks available in the Drag & Drop Editor under the **Build** section. This section includes a series of tiles that represent the different kinds of content you can use in your message.
 
@@ -21,8 +20,7 @@ The following table describes how you can use each editor block type.
 | Text | Enters text into the message |
 | Image | Inserts an image from the Media Library |
 | Button | Adds a standard button. Properties for this block allow for editing, setting links, and logging analytics. |
-| Close Button | Adds a close button (x). Properties for this block are set to close the message when clicked. |
-| Link | Inserts a text link into the message |
+| Spacer | Adds space or padding between other blocks. |
 {: .reset-td-br-1 .reset-td-br-2}
 
 ## Properties
@@ -61,11 +59,6 @@ Details for each editor block's properties are provided in the following tables.
 | URL | Dynamic based on the selected On-click behavior |
 {: .reset-td-br-1 .reset-td-br-2}
 
-### Link
 
-| Name | Description |
-| --- | --- |
-| URL | Sets the appropriate link protocol |
-{: .reset-td-br-1 .reset-td-br-2}