Creating an In-App Creative

Updated 

In-App Surveys enable brands to collect intentional, real-time feedback from users directly within their mobile apps during key interactions. Teams can choose from pre-built formats, such as micro-surveys, or fully customize survey pop-ups to match their brand’s look and feel. These surveys can be placed in any section of the app for seamless integration.

Survey creatives can be triggered based on predefined conditions like user behavior, time spent on a screen, or custom in-app events, allowing for highly targeted feedback collection.

Supported Creative Types for In-App Distribution:

In-app survey creatives come in various formats to suit different user experiences. A Popup is a full-screen overlay that immediately appears when triggered, displaying a message or survey front and center. An Embedded creative offers a full-screen experience that opens when users navigate to a specific section or interact with a designated button within the app. The Rating Popover is a more subtle option, sliding up from the bottom of the screen to present an initial CSAT (Customer Satisfaction) or NPS (Net Promoter Score) question without interrupting the user flow.

Refer to this article for use cases and value additions.

Prerequisites

You would need access to the Survey Level View and Edit Distribution in order to access In-Apps distribution.

How it works?

In the realm of In-App Surveys, "creatives" denote the customizable design components and formats that determine the presentation of surveys within a mobile application. These creatives can be tailored to captivate users and gather feedback while maintaining a seamless user experience. They play a vital role in ensuring that the surveys align with the app's visual appeal and effectively encourage responses.

The following creatives are supported for In-App Distribution:

  • Popup: A pop-up is displayed prominently, covering the screen with a message. This creative element can be completely tailored to fit specific use cases and brand standards, offering great adaptability for different situations, such as gathering feedback at crucial points in the user experience.

  • Embedded: A creative embedded within the app launches in fullscreen mode when a user clicks or navigates to a particular section or button. This approach facilitates smooth incorporation of the survey into the app's workflow, making certain that the process of gathering feedback does not disrupt the user experience.

  • Rating Popover: The rating popover appears at the bottom of the screen, displaying the initial CSAT (Customer Satisfaction) or NPS (Net Promoter Score) question. When users engage with it, it expands to full-screen mode to collect more comprehensive responses. This design is perfect for swiftly obtaining quick ratings while also giving users the opportunity to share additional insights if they wish.

These creative approaches provide various methods for collecting feedback, each tailored to correspond with particular user behaviors and app interactions, allowing businesses to obtain insights efficiently while maintaining a seamless user experience.

Setting Up Creatives

For creating the creative, it is important to select the creative type: 

  1. Navigate to Customer Feedback Management App and go to Creative Library in the left pane.

  2. Click + Creative and select In-App.

  3. Go to Add Creative page and fill in the details:

    1. Creative Name: Add a meaningful name to the creation.

    2. Go to Creative Content section and fill in the details:

      This enables you to tailor the look and content of the pop-up, such as incorporating a CTA, logo, headline, and buttons prior to its activation.

      1. Upload the Logo: Choose a logo from either the computer or the asset library.

      2. Headline: Please provide the title of the creative work.

      3. Content Description: Add a meaningful description to the content. You can customize the content by using the following options:

        1. Rich Text Formatting: Pop-up creatives now support rich text formatting for the headline and content description. The following formatting options are available:

          1. Font Style: Choose from standard fonts or custom fonts added through the Asset Library.

          2. Font Size: Adjust the text size for headlines, descriptions, and other content elements.

          3. Font Formatting: Apply formatting options such as Bold, Italic, Underline, and other text styles.

          4. Font Color: Customize text colors to align with your brand guidelines and design requirements.

          5. Text Alignment: Align text to the Left, Center, or Right for improved readability and layout control.

          6. Emoji Support: Add emojis within text content to enhance engagement and visual appeal.

            Note: Rich text formatting is supported for Pop-up creatives only. Embedded and Rating Popover creatives inherit styling from the Survey Builder.

        2. Place Holder: You have the ability to include dynamic placeholders in your creative content, such as the headline, description, and call-to-action text. These placeholders are replaced with actual values during runtime when the survey is presented to the user.

          1. Profile Standard Fields: Use standard profile attributes of the authenticated user as placeholders within survey content.

            Examples: Name, Email Address, Phone Number.

          2. Profile Custom Fields: Use custom profile attributes passed through the SDK as placeholders.

            Examples: Account Tier, Customer Segment, or other business-specific profile attributes.

            Placeholder syntax: %%[field_name]

            Note: If a placeholder's value is not available at runtime, it will resolve to blank (empty string).

    For creatives related to Embedded and Rating Popover, Response Custom Fields can also be utilized as placeholders alongside Profile fields since the survey is shown directly. Refer to the

    In-App distribution setup with Trigger Conditions | Response Custom Field Enrichment section on the Distribution page for more information.

  4. Under the Target Button Section, add Primary and Secondary buttons name. 

    1. Primary Button: Add button text for primary button.

    2. Click + Secondary Button to add secondary button.

  5. Go to Styling section to style the creative:

    1. Overlay: Under the Overlay section there is a provision for Color, Opacity and Vertical Padding. 

      1. Color: Select the Color section to modify the overlay's color.

      2. Opacity: Adjust the opacity by sliding the control from left to right or the other way around.

      3. Vertical Padding: Slide the bar from the left to the right or the other way around to modify the vertical padding.

  6. Popup Display: Style your pop-up by choosing background and border colors that match your brand. You can refine the padding to control spacing and adjust the overall layout. To add visual depth, apply shadow effects and customize the border radius and spread radius to create a more polished, dimensional look.

    1. Background: You can select the background color. 

    2. Border: You can modify the border color. 

    3. Sides: Move the bar from right to left or from left to right to adjust the number of slides in the popup. 

    4. Vertical Padding: Move the slider to the left or right to adjust the vertical padding up or down. 

    5. Opacity: Move the slider to the left or right to adjust the opacity up or down.

    6. Radius: Move the slider to the left or right to adjust the radius up or down.

    7. Shadow Color: Choose the color for the shadow.

    8. Shadow X Offset: Move the slider to the left or right to adjust the shadow.

    9. Shadow Y Offset: Move the slider to the left or right to adjust the shadow.

    10. Shadow Blur Radius: Move the slider to the left or right to adjust the shadow blur.

    11. Shadow Spread Radius: Move the slider to the left or right to adjust the shadow's radius.

    12. Headline Text: You can modify the color, font, alignment and font size of headline text.

    13. Description Text: You can modify the color, font, alignment and font size of of description text.

  7. Footer: The footer is the bottom section of the creative, where the action buttons are located.

    1. Enable sticky footer: Check the box. 

    2. Top Padding: Slide the bar towards the left or right to adjust the top padding. 

  8. Navigate to the Translations section, where In-App creatives now accommodate multilingual translations, enabling you to present surveys in the user's chosen language. You can add translations for a creative in the following scenarios:

    1. Create a New Creative: Create a new creative from the Creative Library within the CFM Persona application.

    2. Create a New Creative During Distribution Setup: Create a new creative directly from the Distribution setup flow using the Create option while selecting a creative for a distribution.

    3. Edit an Existing Creative: Modify and manage existing creatives from the Creative Library within the CFM Persona application.

    The following content elements support translations:

    1. Image: Inherits the image from the base language by default. Can be overridden with a language-specific image when needed.

    2. Title / Headline: Must be translated and configured separately for each supported language.

    3. Description: Must be translated and configured separately for each supported language.

    4. CTA (Call-to-Action): Must be translated and configured separately for each supported language.

      Key points to note

      • Auto-Translate: When a new translation is added, the text in the base language is imported automatically. You can utilize auto-translate to create an initial translation, which you can then refine as necessary.

      • RTL Language Support: Translations for languages that are read from right to left (such as Arabic, Hebrew, etc.) are completely supported.

      • Preview in different languages: Review the creative in any of the set translations prior to publication.

    Translation Resolution Logic

    When an in-app survey is triggered, the system determines the display language using the following order of precedence:

    1. SDK Locale (Highest Priority): Uses the locale provided by the client application through the SDK's

      method.

    2. LiveChat Default Language: If no locale is received from the SDK, the system uses the default language configured in the LiveChat application.

    3. Base Language (Fallback): If neither of the above is available, the survey is displayed in the language in which the creative was originally created.

    Note: The survey follows the same translation resolution logic as the creative. For a translated experience, translations must be configured for both the creative and the survey. If a translation is unavailable for the requested locale (and the language has not been added as an Additional Language in LiveChat), both the creative and the survey will fall back to the base language.

    Translation Validation

    All fields configured in the base-language creative must also be populated in translated versions.

    The system displays a warning if any required translated fields are missing.

    Note: All fields that are set up in the original creative cannot be empty in the translated versions. The system will show a warning if required fields are missing.

    You can refer to the SDK Implementation details article for more details on setting the locale and for distribution-level translation configuration refer to this article for more details.

  9. Click Create.

Note: Preview of the entire content will be visible in the right pane.

Setting up an Embedded Creative

For Embedded Creative, no configuration is necessary. Just choose the “In-App Embedded” creative while setting up your distribution. As the creative automatically launches as a full-screen survey, no particular adjustments are required.

Note: The survey styling is automatically carried over from the builder.

For more detailed guidance, please refer to the "In-App Setup" and Survey Builder articles.

Setting up a Rating Popover Creative

For Rating Popover creative, there is no setup necessary. Just choose the “Rating Popover” creative when you are setting up your distribution.

As the creative directly presents a supported question, no further customization is required. If the user engages with the popover, the remainder of the survey will appear in full screen. The answer to the question displayed in the popover will stay pre-filled in the full screen survey that follows.

Note: Kindly be aware that the rating popover surveys only support NPS and CSAT questions. The first supported question that is available will be shown.

Note: Responses will only be saved if you click "Submit" on the final survey page, unless the "Allow Completing Survey Later" option is enabled.

The question formatting is automatically transferred from the builder. For more detailed guidance, please refer to the "In-App Setup" and Survey Builder articles.

Note: You can verify and assess it by clicking on the full-page preview to see the creative in its entirety.

Please consult the article on setting up In-App distribution for comprehensive instructions on how to test an In-App distribution.

Placeholder Support by Creative Type

Personalize your surveys using profile and response data.

Placeholder Type
Pop-up
Embedded
Rating Popover

Profile Standard Fields

Profile Custom Fields

Response Custom Fields

Syntax: %%[field_name]

Resolution: Placeholders are resolved at runtime. If the value is unavailable, the placeholder resolves to blank.

Pre-requisite: Profile fields require SDK Support for In-App Surveys to be configured in the SDK. Response Custom Fields can be set Setting up the In-App distribution with Trigger Conditions or SDK Support for In-App Surveys.

Key points to note

  • Rich text formatting is supported only for Pop-up creatives. Embedded and Rating Popover creatives inherit styling from the Survey Builder.

  • Response Custom Field placeholders are not supported in Pop-up creatives, they are available only in Embedded and Rating Popover creatives.

  • Translation is controlled exclusively via the SDK locale, there is no server-side language override at the creative level.

  • If a creative translation exists but the corresponding survey translation does not (and the language is not in LiveChat Additional Languages), both creative and survey will fall back to the base language.

  • Custom fonts (through Asset Library) must be uploaded before they can be used in rich text formatting.


Best Practices

  • Check OS Compatibility: Always preview and test the survey on both iOS and Android devices to ensure it functions correctly across platforms, delivering an optimal user experience.

  • Use Direct Display for Immediate Interaction: Utilize direct display to gather immediate feedback without needing additional clicks. However, keeping user experience in mind, make sure the display is neither intrusive nor overwhelming.

  • Optimize for Mobile Devices: Make sure that the design is flexible and can adjust to various screen sizes and orientations. Test it on different devices to ensure a seamless mobile experience.

  • Keep User Engagement in Mind: Utilize popovers or embedded creatives for concise, targeted interactions. If the survey demands more detailed responses, consider implementing full-screen surveys to improve user engagement.

  • Test Timing and Frequency: Monitor the frequency of survey prompts to avoid causing survey fatigue. Test different timings to ensure that surveys appear at suitable moments without disrupting the user’s workflow.

  • Enable "Allow Completing Survey Later" If Needed: For surveys that may take longer to complete, provide an option for users to finish the survey at a later time, enabling them to do so at their convenience.

  • Use Placeholders for Personalization: Use profile field placeholders to personalize survey greetings (e.g., "Hi %%[first_name], how was your experience?"). This increases engagement and response rates.

  • Test Translations End-to-End: When using translations, always test the full flow — from SDK locale setting to creative + survey display — to ensure both the creative and the survey form display in the correct language.

FAQs

Font Style (Standard + Custom via Asset Library), Font Size, Font Type (Bold/Italic/Underline), Font Color, Text Alignment, and Emojis. These are available for Pop-up creatives only.

Use %%[field_name]. For example, %%[first_name] will resolve to the authenticated user's first name at runtime.

It resolves to blank (empty string). The survey will still display — the placeholder text simply won't appear.

Profile Standard and Custom Field placeholders require Profile Authentication to be configured in the SDK. Without authentication, these placeholders will resolve to blank. Response Custom Fields do not require authentication — they can be set statically in the distribution or dynamically through SDK.

Open the creative in the Creative Library → click the Translations tab → select "Add Language" → choose the target language → fill in the translated content (Title, Description, CTA, optionally Image) → Save. You can also use Auto-Translate to generate a starting point.

Yes. In the creative editor, use the language switcher in the preview to see how the creative looks in each configured translation.

If the creative translation exists but the survey translation does not (and the language is not explicitly supported in LiveChat under Additional Languages), both the creative and survey will display in the base language.