User GuideDeveloper GuideAPI GuideTechnology PartnersNetcore Cloud AI: Co-Marketer
User Guide
BlogLogin

In-app: Unified Content Editor

Increase user engagement with access to ready-to-use system templates.

Suggest Edits

Overview

The Unified Content Editor is your all-in-one solution for creating In-app messages. You can select the ready-to-use template or create from scratch with Editor or Custom HTML.

Netcore CE provides various In-app message campaign templates for specific marketing needs.

To create an In-app message campaign, follow these steps:

  1. Select any position under the Content section when you create your campaign.
PositionDescription
Sticky HeaderA banner message that sticks to the top of the screen.
Sticky FooterA banner message that sticks to the bottom of the screen.
Half InterstitialA message that covers half of the screen, typically centered.
InterstitialA full-screen message appears over the entire screen temporarily.
CoverA message that fully covers the entire screen, requiring user interaction.
  1. Select the required option to create the content for your campaign.

Unified Content Editor

This feature allows you to create and save custom campaigns for later use.

As you proceed, you see three options on the left pane of the DIY window:

3. Layout

Layout

It helps you arrange basic elements, such as text, images, or buttons, in a visually appealing way. Refer to the table below for the various layouts for your message.

You can drag and drop any layout on the canvas. The right pane has two sections: General and Style, each offering different options.

Edit the template with **General** and **Style** options

Edit Template with General and Style Options

Refer to the table below to learn more about General options.

General OptionsDescriptionElements Available
PaddingAdjust the spacing within the template.Heading, Paragraph, Image, Divider, Spacer, and Social.
AlignmentAlign the selected element within the template.Heading, Paragraph, Image, and Button.
OpacityControl the transparency within the template.Heading, Paragraph, Image, Divider, Spacer, Button, and Social.
ThicknessAdjust the thickness of the selected element within the template.Spacer, Image, Divider, and Button

Refer to the table below to know more about Style options.

Style OptionsDescriptionsAvailable for
BackgroundAllows you to set background colour or image.Heading, Paragraph, Image, and Social
Gradient PickerAllows you to create gradual changes of colour within the template using the Gradient Type and Gradient Direction.Gradient type: It refers to the specific manner in which colors transition within a gradient.
  • Radial: Radiates outward from a center point in a circular pattern.
  • Linear: Transitions in a straight line (horizontal, vertical, or diagonal).
  • Repeat Radial: Repeats the radial pattern across the element.
  • Repeat Linear: Repeats the linear pattern along the specified direction.

    • Gradient Direction: Select the direction for the gradient effect, including top, right, center, bottom, or left.    		Heading, Paragraph, and Image
    BorderAllows you adjust border thickness, style, colour, and corner radius with Border Settings.
  • Border Thickness: Adjust the width of the border.
  • Border Style: Choose from Solid, Dash, or Dotted for different border appearances.


    • Solid: Creates a continuous, solid line for the border.
    Dash: Generates a border with a series of short dashes.
    Dotted: Produces a border made up of evenly spaced dots.
  • Border Radius: Determine the curvature of the border's corners.
  • Border Colour: Select the colour of the border.
    		• Heading, Paragraph, Image, Divider, and Button
    ShadowAllows you adjust shadow blur, opacity, X-axis, Y-axis, and shadow colour with Shadow Properties.Heading, Paragraph, Image, and Divider
    4. Basic Elements

    Basic Elements

    You can start your template with basic elements like text, image, divider, spacer, and so on.

    Create your Web Message using Basic Elements

    Create your In-app Message using Basic Elements

    Refer to the table below to know the description of basic elements.

    SectionElementsDescriptions
    Basic ElementsHeadingSelect this option to add a heading to your template.
    ParagraphSelect this option to add a message to your template.
    ImageSelect this option to insert an image into your template. Customize your template's visuals with these image editing tools.
  • Add Image: Insert an image into your template.
  • Image Size: Adjust the size of the inserted image.
  • Link Image to URL: Make the image clickable by adding a URL, directing users to a specific page when they click on it.
  • Open Redirect URL in: Choose whether the linked URL opens in a new or similar tab.
  • Personalize Image: Customize the image with personalized content.
    • DividerSelect this option to separate content sections in your template.
    SpacerSelect this option to add a spacer to your template.
    ButtonSelect this option to integrate a button into your template.
  • Configure Button: Customize the behavior and appearance of the button element.
  • On Click: Specify what action the button will perform when clicked. Redirect to another page or Close the message. Regarding the Close button, here are the settings:
  • Button Type: Decide whether an icon or text should represent the close button.
  • Delay: Specify when the close button will appear on the message, ranging from 1 to 5 seconds after the message is displayed.
  • Placement: Select whether the close button should appear in the message's right or left corner.
  • Action: Choose how the message should close—either by clicking outside of it or by pressing the Esc key.
    • 5. Forms

    Forms

    🚧

    Coming Soon

    This feature will be available soon.

    6. Form Elements

    Form Elements

    🚧

    Coming Soon

    This feature will be available very soon.

    7. Widgets

    Widgets

    Widgets allow you to create highly interactive and dynamic content, transforming your In-app campaigns into engaging experiences. With our Editor, you can easily add widgets to deliver personalized messages, guide user actions, or showcase relevant content. This interactivity enhances customer interaction and boosts engagement, making your campaigns more effective and impactful.

    📘

    Upcoming Release

    The below widgets in In-app are coming soon

    • Spin wheel
    • Jackpot
    • Quiz
    • Accordion
    • Carousel
    • Product catalog
    • Product
    • Coupons
    Add Timer using Widgets

    Add Widgets

    Timer

    You can add a countdown timer to messages to create urgency with date-based or duration-based timers that tick down in real time. You can set it to end at a specific date and time. For example, the Independence Day sale that ends on August 15, 11:59 PM, or it runs for a set length of time, for example, offer valid for the next 72 hours.

    Locate the Timer block from the context menu in the template editor. Drag and drop the Timer block from the Widget section into the desired position within your template. A configuration panel appears on the screen, allowing you to set up the timer details.

    Refer to the table below to learn more about General options.

    General OptionsDescriptionElements Available
    Configure TimerCount down to a set date/time or for a set time starting when the timer appears.
  • Countdown to date/time: Counts down to a specific calendar date and time that is set.
  • Countdown to duration: Counts down for a set period from when the message is shown to the user.
    • StyleSelect the orientation for the Timer.
  • Horizontal
  • Vertical
  • Two row
    • Show labelsSpecify the label position relative to the element.
    You can edit the labels
  • Top
  • Bottom
    • LayoutArrangement and positioning of elements
  • Padding: Adjust the spacing within the template.
  • Alignment: Align the selected element within the template.
    • OpacityControl the transparency within the template.

    Refer to the table below to know more about Style options.

    Style OptionsDescriptionElements Available
    Digit stylingConfigure the appearance of digits including dimensions, font, and colors.
  • Width (px): Sets the horizontal size of the element in pixels.
  • Height (px): Sets the vertical size of the element in pixels.
  • Font Family: Defines the typeface used for the text.
  • Font Size: Determines the text size in pixels.
  • Background color: Specifies the fill color behind the element.
  • Number color: Sets the color of the displayed number.
    • Label stylingCustomize the label text appearance including font and size.
  • Font Family: Selects the typeface style for the text.
  • Font Size: Sets the size of the text.

    1. Personalize your content according to requirements. Refer here to personalize.
    2. When your message is ready using your desired elements and settings, click the Live Preview button to see how it will appear on the app.
    3. Click the Next button to send your message.
    Preview your Web Message

    Preview your In-app Message

    📘

    Button close

    Now you can edit the X or Close icon in-app by adjusting the colour, style and button type in the body section of Basic elements.

    Refer here to Schedule and Save your message campaign.

    Updated 9 days ago