With the CleverTap SDK installed in your app or website, you can use the segmentation and targeting tools available in CleverTap to deliver Web Pop-Up or Mobile In-App messages to a specific portion of your audience based on any trigger or custom segment.
Make sure you've added your CleverTap Project ID, Project Passcode, and MAUs in your Iterate settings, as described here.
Turn on the toggle in Settings to enable in-app message surveys:
Create a new survey in Iterate. For the survey type, choose "Send via CleverTap 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, copy code snippet under "Copy and paste your embed code"
Create a new In-App Messaging or Web Pop-Up campaign in CleverTap.
If using the In-App Message type, choose Custom HTML Templates > Interstitial as the message type. Select "Transparent" as the overlay style, uncheck "Include dismiss button", choose "Inline HTML" and "Include JavaScript". Then paste the HTML from step 4 into the text area below.
If using the Web Pop-Up type, choose Custom HTML Templates > Box, choose Position "Bottom Left", and choose 'Build from script' as the format. Paste the cost from step 4 in the text area below.
Continue setting up your campaign as you would any other campaign, choosing a delivery method and targeting an audience.
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 CleverTap user properties to Iterate
Technical difficulty: easy
In some cases, you may want to make attributes from users' profiles in CleverTap 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 CleverTap Identity ID and email 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 CleverTap template tag that will fill the correct value. See the list of supported personalization tags, which includes custom attributes.
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.
Troubleshooting
Is your survey not showing up? Try these steps below to find and resolve the issue.
Try a built in UI
When choosing the message "Display Type" choose on of the predefined templates in CleverTap, if you aren't able to see that, the issue is with the way your campaign is configured in CleverTap. Please review all of the targeting options in CleverTap until you are able to see the modal.