This is a new feature. We'd love to hear your feedback! Contact your Iterate account representative for assistance or questions.
With the MoEngage SDK installed on your website, you can use the segmentation and targeting tools available in MoEngage to deliver on-site messages to a specific portion of your audience based on any trigger or custom segment.
Now, Iterate's integration with MoEngage allows you to deliver Iterate surveys natively and seamlessly as an on-site message, using only the MoEngage SDK and without any additional setup.
Make sure you've added your App ID, Data Center ID, Data API ID, and Data API Key in your Iterate settings, as described here.
Next, you'll turn on the toggle in the MoEngage settings section of your company settings page to 'Enable In-App Message surveys' (this setting controls both MoEngage in-app and on-site features). Before you do this, you'll need to reach out to our support team via chat to request it to be enabled and give them your MAU count from your MoEngage dashboard
Once you've done that, turn the toggle on to enable in-app messages.
Create a new survey in Iterate. For the survey type, choose "MoEngage Message". Add questions, and if appropriate, a prompt message to be shown before the survey. (Don't see this option? Make sure you've enabled the toggle from step 2)
In the "Publish" tab for your survey, select "On-site Survey" as the MoEngege message type, then copy the code snippet under "Copy and paste your embed code"
Create a new On-Site Messaging campaign in MoEngage. Set your target platforms, criteria, and audience as you need. Click Next, then select 'Start creating with the new editor', then select 'Blank Nudge Template'
You'll see a preview of the blank nudge template in the bottom right of the screen where we'll add the HTML we copied in step 4. Start by clicking the "+" icon on the left side.
This will open up a drawer on the left containing elements you can add. Click and drag the "Embed" element from the 'Content' section, dragging it into the the box on the left side of our nudge.
Once you've dragged it, your nudge should look like this
Click on the Embed element you just added, and click on the left-most icon, which will pop open a window where you can insert the HTML from Step 4
The HTML has now been added and your nudge should look like this
MoEngage doesn't currently offer a completely "Blank" HTML template for on-site messages. The white floating box you see in the preview is the closest they have. This step will hide that white box so it won't show up to users, but the HTML you pasted will still be present, and your survey will show up when the message is triggered.
Click on the settings icon in the top-right of the preview
Then click the right-most gear icon, then click 'Styling'
Then enterhidden:"true"in the Custom Attributes section
Click next and make sure you disable the option to 'Auto dismiss message after 60 seconds'
Continue setting up your campaign as you would any other on-site messaging campaign
Using custom fonts
Technical difficulty: easy
If you'd like to use a custom font in your Iterate survey, you can import your custom font and override the default font-family specified in our HTML embed code. Example below
Import your font
The method used to import your font will depend on your file type. Talk to your engineering team to find out which method to use.
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik+Pixels&display=swap');
</style>
Override the font-family
<style type="text/css">
̶h̶t̶m̶l̶ ̶{̶ ̶
f̶o̶n̶t̶-̶f̶a̶m̶i̶l̶y̶:̶ ̶-̶a̶p̶p̶l̶e̶-̶s̶y̶s̶t̶e̶m̶,̶ ̶B̶l̶i̶n̶k̶M̶a̶c̶S̶y̶s̶t̶e̶m̶F̶o̶n̶t̶,̶ ̶'̶S̶e̶g̶o̶e̶ ̶U̶I̶'̶,̶ ̶R̶o̶b̶o̶t̶o̶,̶ ̶O̶x̶y̶g̶e̶n̶,̶ ̶U̶b̶u̶n̶t̶u̶,̶ ̶C̶a̶n̶t̶a̶r̶e̶l̶l̶,̶ ̶'̶O̶p̶e̶n̶ ̶S̶a̶n̶s̶'̶,̶ ̶'̶H̶e̶l̶v̶e̶t̶i̶c̶a̶ ̶N̶e̶u̶e̶'̶,̶ ̶s̶a̶n̶s̶-̶s̶e̶r̶i̶f̶;̶ ̶
}̶
html {
font-family: 'Rubik Pixels';
}
</style>
Passing MoEngage user attributes to Iterate
Technical difficulty: easy
In some cases, you may want to make attributes from users' profiles in MoEngage available to Iterate, so that you can use those attributes to help segment and filter your survey responses in the Iterate dashboard, or use the data to personalize your survey using Dynamic Text.
Example: an e-commerce marketplace might want to include an attribute that identifies a user as a "buyer" or a "seller", so they can then filter their survey responses in Iterate to only show buyers or sellers.
By default, Iterate will include only the user's MoEngage ID via the integration. If there are additional attributes you'd like to include, you can add them to the HTML code provided in the "Publish" tab of your survey by clicking "Customize user properties" above where the HTML is shown:
To add attributes, choose a user property name as you'd like it to appear in Iterate, and then enter the Braze template tag that will fill the correct value.
For example, to include the user's first name in the data available via Iterate, you'd add this property:
Iterate user property name (example) | Braze template tag |
first_name | {{UserAttribute['u_fn']}} |
Important Note: Once created, the type of a property (e.g. 'user_id' is a number) cannot be changed. If you need to update the property type you can create a new key (e.g. 'user_id_string') or reach out to [email protected] to help.
You can also add attributes that are specific to this session or survey response, by adding an additional field to the JSON object called responseTraits:
"userTraits": {
"external_id": "{{UserAttribute['uid']}}",
"first_name": {{UserAttribute['u_fn']}}",
},
"responseTraits": {
"survey_campaign_name": "{{UserAttribute['campaign_name']}}"
}
These attributes will be available as filters in the Iterate dashboard, visible when browsing survey responses, and included in exported survey data.