diff --git a/_docs/_user_guide/engagement_tools/campaigns/testing_and_more.md b/_docs/_user_guide/engagement_tools/campaigns/testing_and_more.md index 06937322fc8..787f095aa10 100644 --- a/_docs/_user_guide/engagement_tools/campaigns/testing_and_more.md +++ b/_docs/_user_guide/engagement_tools/campaigns/testing_and_more.md @@ -15,7 +15,7 @@ description: "This landing page is home to campaign testing and tips. Here, you guide_featured_title: "Section articles" guide_featured_list: - name: Sending Test Messages - link: /docs/developer_guide/in_app_messages/sending_test_messages/ + link: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ image: /assets/img/braze_icons/mail-01.svg - name: API-Triggered and Action-Based Campaigns link: /docs/user_guide/engagement_tools/campaigns/testing_and_more/triggered_action_based/ diff --git a/_docs/_user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages.md b/_docs/_user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages.md index 26a4e37ab5c..bef5b5d3b9a 100644 --- a/_docs/_user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages.md +++ b/_docs/_user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages.md @@ -30,101 +30,33 @@ A convenient way to organize your test users is by creating a [Content Test Grou For steps to send test messages, refer to the following section for your respective channel. {% tabs local %} -{% tab Email %} - -1. Draft your email message. -2. Select **Preview and Test**. -3. Select the **Test Send** tab and add your email address or user ID in the **Add individual users** field. -4. Select **Send Test** to send your drafted email to your inbox. - -![Test Email]({% image_buster /assets/img_archive/testemail.png %}){: style="max-width:40%;" } - -{% endtab %} -{% tab Push %} - -#### Mobile push - -1. Draft your mobile push. -2. Select the **Test** tab and add your email address or user ID in the **Add Individual Users** field. -3. Select **Send Test** to send your drafted message to your device. - -![Test push]({% image_buster /assets/img_archive/testpush.png %}) - -#### Web push - -1. Create your web push. -2. Select the **Test** tab. -3. Select **Send Test to Myself**. -4. Select **Send Test** to send your web push to your web browser. - -![Test web push]({% image_buster /assets/img_archive/testwebpush.png %}) - -If you have already accepted push messages from the Braze dashboard, the push will come through in the corner of your screen. Otherwise, click **Allow** when prompted, and the message will appear. - -{% endtab %} -{% tab In-App Message %} - -{% alert warning %} -To send a test to either [Content Test Groups]({{site.baseurl}}/user_guide/administrative/app_settings/developer_console/internal_groups_tab/#content-test-groups) or individual users, push must be enabled on your test devices before sending. For example, you must have push enabled on your iOS device in order to tap the notification before the test message displays. {% endalert %} - -If you have push notifications set up within your app and on your test device, you can send test in-app messages to your app to see what it looks like in real-time. - -1. Draft your in-app message. -2. Select the **Test** tab and add your email address or user ID to the **Add Individual Users** field. -3. Select **Send Test** to send your push message to your device. - -A test push message will appear at the top of your device screen. - -![Test In App]({% image_buster /assets/img_archive/test-in-app.png %}) +{% tab Banners %} {% alert important %} -Test sends may result in more than one in-app message being sent to each recipient. +Before you can test Banner messages in Braze, you'll need to create a Banner campaign in Braze. Additionally, verify that the placement you want to test is already [placed in your app or website]({{site.baseurl}}/developer_guide/banners/placements). {% endalert %} -Directly clicking and opening the push message will send you to your app, where you can view your in-app message test. Note this in-app message testing feature relies on the user clicking a test push notification to trigger the in-app message. As such, the user must be eligible to receive push notifications in the relevant app for the successful delivery of the test push notification. - -### Preview - -You can preview your in-app message as you compose it in the **Preview** tab. This should help you visualize what your final message will look like from your user's perspective. You can preview what your message will look like to a random user, a specific user, or a customized user. You can also preview messages for either mobile devices or tablets. +After creating your Banner message, you can preview your Banner or send a test message. -![Compose tab when building an in-app message showing the preview of what the message will look like. A user is not selected, so the Liquid added in the body section displays as is.]({% image_buster /assets/img/in-app-message-preview.png %}) +1. Draft your Banner message. +2. Select **Preview** to preview your Banner or send a test message. +3. To send a test message, add either a content test group or one or more individual users as **Test Recipients**, then select **Send Test**. -Braze has three generations of in-app messages available. You can fine-tune to which devices your messages should be sent, based on which Generation they support. +You'll be able to view your test message on the device for up to 5 minutes. -![Switching between generations when previewing an in-app message.]({% image_buster /assets/img/iam-generations.gif %}){: height="50%" width="50%"} +![Preview tab of the Banner composer.]({% image_buster /assets/img/banners/preview_banner.png %}) -{% alert warning %} -In **Preview**, the view of your message might not be identical to its actual rendering on the user's device. We always recommend sending a test message to a device to ensure that your media, copy, personalization, and custom attributes generate correctly. +{% alert note %} +Keep in mind, your preview may not be identical to the final render on a user's device due to differences across hardware. {% endalert %} ### Test checklist -- Do the images and media show up and act as expected? -- Does the Liquid function as expected? Have you accounted for a [default attribute value]({{site.baseurl}}/user_guide/personalization_and_dynamic_content/liquid/conditional_logic/#accounting-for-null-attribute-values) if the Liquid returns no information? +- Is your Banner campaign assigned to a placement? +- Do the images and media show up and act as expected on your targeted device types and screen sizes? +- Do your links and buttons direct the user to where they should go? +- Does the Liquid function as expected? Have you accounted for a default attribute value in the event that the Liquid returns no information? - Is your copy clear, concise, and correct? -- Do your buttons direct the user where they should go? - -### Accessibility scanner - -To support accessibility best practices, Braze automatically scans the content of in-app messages created using the traditional HTML editor against accessibility standards. This scanner helps identify content that may not meet Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) standards. WCAG is a set of internationally recognized technical standards developed by the World Wide Web Consortium (W3C) to make web content more accessible to people with disabilities. - -![Accessibility scan results]({% image_buster /assets/img/Accessibilty_Scanner_IAM.png %}) - -{% alert note %} -The in-app message accessibility scanner only runs on messages built with custom HTML. -{% endalert %} - -#### How it works - -The scanner runs automatically on custom HTML messages and evaluates your entire HTML message against the full [WCAG 2.1 AA rule set](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1¤tsidebar=%23col_customize&levels=aaa). For each flagged issue, it shows: - -- The specific HTML element involved -- A description of the accessibility issue -- A link to additional context or remediation guidance - -#### Understanding automated accessibility testing - -{% multi_lang_include accessibility/automated_testing.md %} {% endtab %} {% tab Content Card %} @@ -198,40 +130,117 @@ A common use case is trying to debug why a user can't see a particular Content C From there, you can review your message settings and content to drill down and determine why a user can't see a particular Content Card. {% endtab %} -{% tab Banners %} +{% tab Email %} + +1. Draft your email message. +2. Select **Preview and Test**. +3. Select the **Test Send** tab and add your email address or user ID in the **Add individual users** field. +4. Select **Send Test** to send your drafted email to your inbox. + +![Test Email]({% image_buster /assets/img_archive/testemail.png %}){: style="max-width:40%;" } + +{% endtab %} +{% tab In-app message %} + +{% alert warning %} +To send a test to either [Content Test Groups]({{site.baseurl}}/user_guide/administrative/app_settings/developer_console/internal_groups_tab/#content-test-groups) or individual users, push must be enabled on your test devices before sending. For example, you must have push enabled on your iOS device in order to tap the notification before the test message displays. {% endalert %} + +If you have push notifications set up within your app and on your test device, you can send test in-app messages to your app to see what it looks like in real-time. + +1. Draft your in-app message. +2. Select the **Test** tab and add your email address or user ID to the **Add Individual Users** field. +3. Select **Send Test** to send your push message to your device. + +A test push message will appear at the top of your device screen. + +![Test In App]({% image_buster /assets/img_archive/test-in-app.png %}) {% alert important %} -Before you can test Banner messages in Braze, you'll need to create a Banner campaign in Braze. Additionally, verify that the placement you want to test is already [placed in your app or website]({{site.baseurl}}/developer_guide/banners/placements). +Test sends may result in more than one in-app message being sent to each recipient. {% endalert %} -After creating your Banner message, you can preview your Banner or send a test message. +Directly clicking and opening the push message will send you to your app, where you can view your in-app message test. Note this in-app message testing feature relies on the user clicking a test push notification to trigger the in-app message. As such, the user must be eligible to receive push notifications in the relevant app for the successful delivery of the test push notification. -1. Draft your Banner message. -2. Select **Preview** to preview your Banner or send a test message. -3. To send a test message, add either a content test group or one or more individual users as **Test Recipients**, then select **Send Test**. +### Preview -You'll be able to view your test message on the device for up to 5 minutes. +You can preview your in-app message as you compose it in the **Preview** tab. This should help you visualize what your final message will look like from your user's perspective. You can preview what your message will look like to a random user, a specific user, or a customized user. You can also preview messages for either mobile devices or tablets. -![Preview tab of the Banner composer.]({% image_buster /assets/img/banners/preview_banner.png %}) +![Compose tab when building an in-app message showing the preview of what the message will look like. A user is not selected, so the Liquid added in the body section displays as is.]({% image_buster /assets/img/in-app-message-preview.png %}) -{% alert note %} -Keep in mind, your preview may not be identical to the final render on a user's device due to differences across hardware. +Braze has three generations of in-app messages available. You can fine-tune to which devices your messages should be sent, based on which Generation they support. + +![Switching between generations when previewing an in-app message.]({% image_buster /assets/img/iam-generations.gif %}){: height="50%" width="50%"} + +{% alert warning %} +In **Preview**, the view of your message might not be identical to its actual rendering on the user's device. We always recommend sending a test message to a device to ensure that your media, copy, personalization, and custom attributes generate correctly. {% endalert %} ### Test checklist -- Is your Banner campaign assigned to a placement? -- Do the images and media show up and act as expected on your targeted device types and screen sizes? -- Do your links and buttons direct the user to where they should go? -- Does the Liquid function as expected? Have you accounted for a default attribute value in the event that the Liquid returns no information? +- Do the images and media show up and act as expected? +- Does the Liquid function as expected? Have you accounted for a [default attribute value]({{site.baseurl}}/user_guide/personalization_and_dynamic_content/liquid/conditional_logic/#accounting-for-null-attribute-values) if the Liquid returns no information? - Is your copy clear, concise, and correct? +- Do your buttons direct the user where they should go? + +### Accessibility scanner + +To support accessibility best practices, Braze automatically scans the content of in-app messages created using the traditional HTML editor against accessibility standards. This scanner helps identify content that may not meet Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) standards. WCAG is a set of internationally recognized technical standards developed by the World Wide Web Consortium (W3C) to make web content more accessible to people with disabilities. + +![Accessibility scan results]({% image_buster /assets/img/Accessibilty_Scanner_IAM.png %}) + +{% alert note %} +The in-app message accessibility scanner only runs on messages built with custom HTML. +{% endalert %} + +#### How it works + +The scanner runs automatically on custom HTML messages and evaluates your entire HTML message against the full [WCAG 2.1 AA rule set](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1¤tsidebar=%23col_customize&levels=aaa). For each flagged issue, it shows: + +- The specific HTML element involved +- A description of the accessibility issue +- A link to additional context or remediation guidance + +#### Understanding automated accessibility testing + +{% multi_lang_include accessibility/automated_testing.md %} {% endtab %} -{% tab SMS/MMS %} +{% tab LINE %} -After creating your SMS or MMS message, you can send a test message to your phone to see what it will look like in real-time. +1. Create your LINE message. +2. Select the **Test** tab and select at least one Content Test Group or individual user to receive this test message. +3. Select **Send Test** to send your message. + +![Test LINE message.]({% image_buster /assets/img/line/test_preview.png %}) + +{% endtab %} +{% tab Push %} + +#### Mobile push -1. Draft your SMS or MMS message. +1. Draft your mobile push. +2. Select the **Test** tab and add your email address or user ID in the **Add Individual Users** field. +3. Select **Send Test** to send your drafted message to your device. + +![Test push]({% image_buster /assets/img_archive/testpush.png %}) + +#### Web push + +1. Create your web push. +2. Select the **Test** tab. +3. Select **Send Test to Myself**. +4. Select **Send Test** to send your web push to your web browser. + +![Test web push]({% image_buster /assets/img_archive/testwebpush.png %}) + +If you have already accepted push messages from the Braze dashboard, the push will come through in the corner of your screen. Otherwise, click **Allow** when prompted, and the message will appear. + +{% endtab %} +{% tab SMS/MMS and RCS %} + +After creating your SMS, MMS, or RCS message, you can send a test message to your phone to see what it will look like in real-time. + +1. Draft your SMS, MMS, or RCS message. 2. Select the **Test** tab and select at least one Content Test Group or individual user to receive this test message. 3. Select **Send Test** to send your test message. @@ -244,6 +253,16 @@ After creating your webhook, you can do a test send to check the webhook respons ![Test Content Card]({% image_buster /assets/img/webhook_test.png %}) +{% endtab %} +{% tab WhatsApp %} + +1. Create your WhatsApp message. +2. Select the **Test** tab and select at least one Content Test Group or individual user to receive this test message. +3. Initiate a conversation window by sending a WhatsApp message to the phone number associated with the subscription group you’re using for this message. The associated phone number is listed in the alert on the **Test** tab. +4. Select **Send Test** to send your message. + +![Test WhatsApp message.]({% image_buster /assets/img/whatsapp/whatsapp_test.png %}) + {% endtab %} {% endtabs %} diff --git a/_docs/_user_guide/message_building_by_channel/banners/testing.md b/_docs/_user_guide/message_building_by_channel/banners/testing.md index 1dd8ba8bd09..ee3df5657a1 100644 --- a/_docs/_user_guide/message_building_by_channel/banners/testing.md +++ b/_docs/_user_guide/message_building_by_channel/banners/testing.md @@ -1,5 +1,5 @@ --- -nav_title: Testing Banners +nav_title: Testing noindex: true layout: redirect redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ diff --git a/_docs/_user_guide/message_building_by_channel/email/best_practices.md b/_docs/_user_guide/message_building_by_channel/email/best_practices.md index 65ffaaf5105..481d97b8dc5 100644 --- a/_docs/_user_guide/message_building_by_channel/email/best_practices.md +++ b/_docs/_user_guide/message_building_by_channel/email/best_practices.md @@ -1,5 +1,5 @@ --- -page_order: 13 +page_order: 14 nav_title: Best practices article_title: Email Best Practices layout: dev_guide diff --git a/_docs/_user_guide/message_building_by_channel/email/faq.md b/_docs/_user_guide/message_building_by_channel/email/faq.md index cc65ac9a46c..7572fecbd9a 100644 --- a/_docs/_user_guide/message_building_by_channel/email/faq.md +++ b/_docs/_user_guide/message_building_by_channel/email/faq.md @@ -1,7 +1,7 @@ --- nav_title: FAQ article_title: Email FAQ -page_order: 14 +page_order: 15 description: "This page provides answers to frequently asked questions about email messaging." channel: email diff --git a/_docs/_user_guide/message_building_by_channel/email/testing.md b/_docs/_user_guide/message_building_by_channel/email/testing.md new file mode 100644 index 00000000000..3666ba30852 --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/email/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 13 +channel: + - email +--- \ No newline at end of file diff --git a/_docs/_user_guide/message_building_by_channel/line/testing.md b/_docs/_user_guide/message_building_by_channel/line/testing.md new file mode 100644 index 00000000000..5eb8e6a2398 --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/line/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 5 +channel: + - LINE +--- \ No newline at end of file diff --git a/_docs/_user_guide/message_building_by_channel/push/faq.md b/_docs/_user_guide/message_building_by_channel/push/faq.md index 2900d34de66..e3d48502ff6 100644 --- a/_docs/_user_guide/message_building_by_channel/push/faq.md +++ b/_docs/_user_guide/message_building_by_channel/push/faq.md @@ -1,7 +1,7 @@ --- nav_title: FAQs article_title: Push FAQs -page_order: 80 +page_order: 25 description: "This article addresses some of the most frequently asked questions that arise when setting up push campaigns." page_type: FAQ channel: diff --git a/_docs/_user_guide/message_building_by_channel/push/testing.md b/_docs/_user_guide/message_building_by_channel/push/testing.md new file mode 100644 index 00000000000..d0fad0306ed --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/push/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 23 +channel: + - push +--- \ No newline at end of file diff --git a/_docs/_user_guide/message_building_by_channel/push/troubleshooting.md b/_docs/_user_guide/message_building_by_channel/push/troubleshooting.md index ec81884526d..e3891eb8709 100644 --- a/_docs/_user_guide/message_building_by_channel/push/troubleshooting.md +++ b/_docs/_user_guide/message_building_by_channel/push/troubleshooting.md @@ -1,7 +1,7 @@ --- nav_title: Troubleshooting article_title: Troubleshooting Push -page_order: 23 +page_order: 24 page_type: reference description: "This page contains troubleshooting steps for various issues relating to the Push messaging channel." channel: push diff --git a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/mms.md b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/mms.md index 232c6fceb89..f7c945ee5b4 100644 --- a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/mms.md +++ b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/mms.md @@ -1,7 +1,7 @@ --- nav_title: "MMS" article_title: About MMS -page_order: 15 +page_order: 16 description: "This reference article covers what MMS messages are and general use cases for the MMS channel." page_type: reference alias: /about_mms/ diff --git a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/rcs.md b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/rcs.md index 76e6eec8f59..2112e8549fa 100644 --- a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/rcs.md +++ b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/rcs.md @@ -3,7 +3,7 @@ nav_title: "RCS" article_title: About Rich Communication Services (RCS) alias: /about_rcs/ page_type: reference -page_order: 14 +page_order: 15 description: "This reference article covers general use cases of the RCS channel and requirements needed to get your RCS channel ready for use." --- diff --git a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/sms.md b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/sms.md index 66d4a5056b3..4b48c700214 100644 --- a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/sms.md +++ b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/sms.md @@ -1,7 +1,7 @@ --- nav_title: "SMS" article_title: About SMS -page_order: 13 +page_order: 14 description: "This reference article covers general use cases of the SMS channel and requirements needed to get SMS up and running." page_type: reference alias: /about_sms/ diff --git a/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/testing.md b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/testing.md new file mode 100644 index 00000000000..16832b1fb5a --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/sms_mms_rcs/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 13 +channel: + - SMS +--- \ No newline at end of file diff --git a/_docs/_user_guide/message_building_by_channel/webhooks/testing.md b/_docs/_user_guide/message_building_by_channel/webhooks/testing.md new file mode 100644 index 00000000000..36919b0b5b5 --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/webhooks/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 11 +channel: + - webhooks +--- \ No newline at end of file diff --git a/_docs/_user_guide/message_building_by_channel/whatsapp/faqs.md b/_docs/_user_guide/message_building_by_channel/whatsapp/faqs.md index 79cb7d40d79..94bba898d1a 100644 --- a/_docs/_user_guide/message_building_by_channel/whatsapp/faqs.md +++ b/_docs/_user_guide/message_building_by_channel/whatsapp/faqs.md @@ -1,7 +1,7 @@ --- nav_title: FAQ article_title: WhatsApp FAQ -page_order: 10 +page_order: 11 description: "This article addresses some of the most frequently asked questions that arise when setting up WhatsApp campaigns." page_type: FAQ channel: diff --git a/_docs/_user_guide/message_building_by_channel/whatsapp/meta_resources.md b/_docs/_user_guide/message_building_by_channel/whatsapp/meta_resources.md index 0015b5cb7db..1e0fb06ef61 100644 --- a/_docs/_user_guide/message_building_by_channel/whatsapp/meta_resources.md +++ b/_docs/_user_guide/message_building_by_channel/whatsapp/meta_resources.md @@ -1,7 +1,7 @@ --- nav_title: Meta resources article_title: Meta Resources -page_order: 11 +page_order: 12 description: "This article provides helpful Meta documentation, information, and resources to improve your understanding of the WhatsApp integration." page_type: reference channel: diff --git a/_docs/_user_guide/message_building_by_channel/whatsapp/testing.md b/_docs/_user_guide/message_building_by_channel/whatsapp/testing.md new file mode 100644 index 00000000000..05b3bfffb11 --- /dev/null +++ b/_docs/_user_guide/message_building_by_channel/whatsapp/testing.md @@ -0,0 +1,9 @@ +--- +nav_title: Testing +noindex: true +layout: redirect +redirect_to: /docs/user_guide/engagement_tools/campaigns/testing_and_more/sending_test_messages/ +page_order: 10 +channel: + - WhatsApp +--- \ No newline at end of file diff --git a/assets/img/whatsapp/whatsapp_test.png b/assets/img/whatsapp/whatsapp_test.png new file mode 100644 index 00000000000..83b2600b274 Binary files /dev/null and b/assets/img/whatsapp/whatsapp_test.png differ