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 tabs 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 displayed only 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 Theme tab of the survey, you can choose the theme of your survey.
1. It's possible to add both a Light and a Dark version:
On your website, the survey's design (dark vs. light) will align with your respondent's browser preference. 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 automatically applied to the live survey, without the need for additional code.
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). This should be added separately for Light and Dark themes.
CSS code to add a custom font.
CSS code to add a 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.
3. You can also enable Customization and add your company logo or add Custom CSS:
To edit custom CSS, paste your CSS code, click Update, and then confirm with Save:
💡 You can see a list of example CSS codes here.
These settings should also be added separately for Light and Dark themes.
Step 4. Settings
Go to the Settings tab of your survey. There, you can find settings such as Navigation, Progress bar, Overlay, and the Close and Minimize buttons settings. You can also choose whether you want the survey to Start minimized or specify the survey placement - where on the page you want the survey to appear.
💡 We recommend disabling the progress bar if your survey only has one question. With only one question, the bar will show 0% progress.
You can choose to remove Survicate branding to make the survey more on-brand with your design. Changing this setting disables or enables branding on all surveys in your workspace.
📌 Removing Survicate branding is available on some of the plans.
The two bottom settings are related to the Multilingual surveys feature. If you create your survey in multiple languages (see the next step), the Default language is the language we'll be able to later translate your responses to in the Analyze tab. Language selection by respondent allows your respondent to choose which of the available languages they want to submit their response in.
Step 5. Texts
The Texts tab allows you to change the text of the survey's actions that the respondents see while responding to the survey:
Step 5. Optional: Translate your survey
You can use the Translations feature to create surveys in multiple languages to customize the experience for your respondents, increase response rates by ensuring your contacts see the survey in their language, and save time by creating just one survey instead of multiple for each language.
To add Translations to your Braze survey, click here:
A pop-up window will appear where you can select the languages you want your survey in. You can select more than one at a time, or if you're unsure which ones you need, you can select just one and always add more later. You can also choose if you'd like to add the languages manually or use Google Translate:
💡 Check out this article to learn more about Multilingual surveys.
Step 5. Preview your survey
In the Create tab, 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 end, please refer to 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. Please select 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
In 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 have Enabled 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.