With our Braze In-App Message surveys, you can create surveys in Survicate and display them to your website visitors or mobile app users directly via Braze.
In this article, you'll learn how to:
create a Braze In-App Message survey;
create a Campaign in Braze;
connect integrations to your survey;
add a survey to your Campaign;
launch a Survicate Braze In-App Message survey on your website or in your mobile app;
Step 1. Create a survey for Braze In-App Messages
1. Click on + Create new survey, select any creation method (a template, using AI survey creation, or adding your own questions), then choose In-platform surveys and the Braze In-App Message survey type:
2. If you start the survey from scratch, start by adding your first question by selecting one of the question types.
Continue with adding all your questions to the survey. Please note you can also add an Introduction to specific questions. Each question also has its own Settings tab, where you can personalize it even more.
📌 Please note that the Ranking question type is not available for Braze In-App Messenger surveys
Step 2. (Optional) Set up survey logic
Once your survey questions are ready, you can add conditional logic to ask your respondents follow-up questions based on their previous responses.
Head on to the Logic tab of the question you'd like to set up the logic for - you'll see that you can set up Branch logic or Display logic.
Branch logic lets you decide which questions should be displayed next when the respondent selects a specific answer option in the current question. For example, for an NPS® question, you can direct promoters, passives, and detractors to different follow-up questions.
Display logic allows you to take into account not only the answer from one previous question but from any question or questions that were answered earlier in the survey. For example, you can decide that a specific question should be only displayed to people who chose a specific location and occupation in the previous questions.
📌 You can see full, detailed instructions for applying survey logic in this article.
Step 3. Change the design of your survey
In the Design tab of the survey, you can choose the theme of your survey.
1. It's possible to add both a Light and a Dark theme to your survey.
On your website, the survey's design (dark vs. light) will align with the browser preference of your respondent.
If, for any reason, you'd like to override it, you can do so via code, as described in this documentation and here.
2. In the Font section, you will see some fonts available to select:
They are divided into 3 categories:
System fonts
General-purpose fonts
Language-specific fonts
When any of those fonts is selected in the theme settings, it’s applied automatically to the live survey, without the need for additional code work.
If you would rather apply a font that is not on the list, you can do so via custom CSS (adding Custom CSS is explained in the next paragraph).
CSS code to add custom font.
CSS code to add custom font.
a. If the font is already on your site
If the font is already loaded on your page (e.g. in your main stylesheet), you only need to reference it in Custom CSS. No @font-face is required:
#survicate-box * {
font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}b. If the font is not on your site
Add your font via `@font-face` in the survey’s Custom CSS, with `url()` pointing to your font files, then apply the font to the survey box. Use the full example:
/* cyrillic-ext */
@font-face {
font-family: 'Rubik Storm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL3RWTD98Ql4tc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik Storm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL-RWTD98Ql4tc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik Storm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL4RWTD98Ql4tc.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik Storm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL0RWTD98Ql4tc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik Storm';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL6RWTD98Ql.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#survicate-box * {
font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}
💡 We recommend always adding fallback fonts (e.g. 'Open Sans', sans-serif) so text still displays if the custom font fails to load.
This should be added separately for Light and Dark themes.
3. You can also enable Customization and add your company logo or add Custom CSS:
To edit custom CSS, paste in your CSS code and click update your theme:
These settings should also be added separately for Light and Dark themes.
4. Once you are ready with your template, click Update to save your settings
Step 4. Personalize Survey experience and Messages
Go to the Settings tab of your survey. In the Survey Experience tab, you can find settings such as the Navigation or Progress bar. You can also choose if you want the survey to Start minimized.
In the Messages tab, you can personalize survey messages - for example, Text answer placeholder or Proceed to the next question button text.
In this section, you can also specify the survey placement - where on the page you want the survey to appear:
Step 5. Preview your survey
On the right side of the page, you can preview your survey as if you were a respondent. Every change to your survey appears here in real-time, and you will be able to test the look and feel of your survey as you create it.
Step 6. Target your survey
You'll notice a Target tab in Survicate for your Braze In-App Messenger survey.
❗ However, we strongly recommend using targeting solely in your Braze campaign, not in Survicate
If you decide to use targeting on Survicate's side, please see this guide. Also, please don't target in Braze and Survicate simultaneously to avoid creating conflicting targeting rules.
Step 7. (Optional) Connect integrations
Set up Braze integration
In Connect ➡️ Braze, you can connect Braze integration and send custom attributes to Braze based on survey responses. See full instructions here. Braze integration will work by default with this survey type, as we automatically collect braze_id with responses.
Connect other integrations
In the Connect tab, you can connect other integrations to your survey than the Braze one. You can find information about available integrations here. For the integrations to work, you have to collect the email addresses of the respondents. If you have an email assigned to the respondent in their Braze profile, we'll collect it automatically.
Step 8. Launch your Braze In-App Message survey
1. Go to your Braze account, then to Messaging ➡️ Campaigns ➡️ Create campaign ➡️ In-app message:
2. You can create your message by choosing the Traditional Editor, which will allow you to show the survey solely.
You can choose if you want to target mobile apps, web browsers, or both.
Launch survey via the Traditional Editor
If you use the Traditional Editor, in the Message type, choose Custom code:
Then, paste the code from the Launch tab of your survey to the HTML field:
In your Braze campaign, set up the Target and Assign steps. Once it's done, your campaign is ready to be launched! 🎉 In the Review step, you can see how the campaign will look.
The survey will appear on your website, or in your mobile app in the place specified in the Survicate panel, as described above.
💡 If you make any changes to the survey, they will be automatically reflected in Braze.
❗ Please note that you won't see the survey in the Braze preview unless you Started the survey in the Launch tab in Survicate.
Collecting respondent attributes
The tracking code will, by default, collect braze_id, braze_survey_id, and email attributes with responses. If you'd like to collect more attributes, feel free to add them to the code in this section, in the same format:
For example, if you'd like to connect the first name and last name of the respondents, you should add: “first_name”: “{{${first_name}}}“} and “last_name”: “{{${last_name}}}“}
📞 If you have any questions about setting up Braze integration - feel free to reach out to our team via chat or email: support@survicate.com.
Net Promoter, NPS, and the NPS - related emoticons are registered U.S. trademarks, and Net Promoter Score and Net Promoter System are service marks, of Bain & Company, Inc., Satmetrix Systems, Inc. and Fred Reichheld.