Unified Content Editor (DIY)

Create stunning, mobile-responsive web message templates with our unified content editor.

The DIY Editor is your all-in-one solution for creating content across various channels, such as Web messages, In-app messages, HTML/AMP emails, and so on. This feature allows you to create and save custom campaigns for later use.

📘

Note

This feature is available for Web Messages and AMP email currently.

Create a Campaign with DIY

To create a Web message campaign using DIY, follow these steps:

  1. Add you select your layout and then select any existing template or create new template under Content section, when you create your campaign. Refer here to create a web message.
Create a web message

Create Web Message

📘

Access UCE

  • You can use Banner, Sticky bar & Modal layout to create your content using DIY editor.
  • You can use any template that is categorized as Editor to create your content using DIY editor.
  1. Select DIY editor option to create the content for your campaign using our drag and drop options.
Create your Web Message using the DIY Editor

Create your Web Message using the DIY Editor

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

1. 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 web message.

LayoutDescriptionUse Case
BannerA slim message at the top or bottom of the webpage.Announcing flash sales, free shipping offers, or maintenance updates.
Sticky BarA fixed bar that stays visible as users scroll through the page. It ensures important messages remain in view.
Note: Sticky bars may affect message visibility. Width is set to 100% by default and is uneditable.
Limited time discount, new product launch, cookie consent notifications
ModalA pop-up message appears in the center of the screen, dimming the background.Promoting newsletter sign-ups, gathering feedback, or announcing exclusive deals.

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
ResponsiveSelect whether you want to hide the element on mobile devices or a computer.Divider
Website overlayBlur background content when displaying a web message partially.
  • Overlay color: The color applied to the background overlay behind a popup or message on a webpage.
  • Overlay Opacity: The level of transparency of the background overlay behind a popup or message on a webpage.
  • Main Page

    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
    2. 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 Web 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 web 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 web 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 web message, ranging from 1 to 5 seconds after the message is displayed.
  • Placement: Select whether the close button should appear in the web 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.
  • Social LinksSelect this option to add social media links to your template. You can add up to 16 icons.
    Click on the box icon to enable or disable the display associated with each social media icon.

  • Icon size: Customize the appearance of the icons by selecting the desired size (small, medium, large, or custom size) from a dropdown menu.
  • Icon style: Choose the style of the icons (squares, circles, or rounded) by selecting an option from a dropdown menu.
  • 3. Forms

    Forms

    Web message forms let you collect data and engage users directly within your web messages. You can customize forms to suit different needs, whether for collecting simple data, scheduling appointments, gathering feedback, or meeting other requirements.

    Drag and drop the Form into the template. A configuration panel appears on the screen, allowing you to set up the form details.

    Create Web Message using Forms

    Create Web Message using Forms

    The Unified Content Editor (DIY) provides five types of forms:

    1. Basic

    This form has one field for quick data collection, such as email addresses or phone numbers. It is used to collect basic information from users.

    Use CaseDescription
    Newsletter Sign-upsCollect email addresses from users interested in subscribing to your newsletter.
    Contact RequestsGather basic contact information for user inquiries or support requests.
    1. Simple

    With multiple fields, this form gathers more detailed information, such as names and addresses, while staying easy to fill out.

    Use CaseDescription
    Customer Surveys Collect detailed feedback on customer experiences, including names, emails, and opinions.
    Product InquiriesCapture specific product questions or requests, along with contact details for follow-up.
    1. Appointment Form

    An Appointment Form allows users to schedule meetings or appointments by selecting dates and times from a calendar. It may include fields for personal details and appointment preferences.

    Use CaseDescription
    Customer Support SchedulingEnable users to book time slots for customer support or consultations.
    Event RegistrationsAllow users to book slots for events or webinars.
    1. Multi-Step Form

    You can break down a longer form into multiple steps or pages. It guides users through the data entry process in a structured manner, often including progress indicators.

    Use CaseDescription
    Application FormsManage extensive data collection for applications like job applications, membership sign-ups, or grant requests.
    Onboarding ProcessFacilitate user onboarding by collecting data in a segmented, manageable format.

    Form Step Configuration

    The Form Step Configuration feature lets you control how users move through multi-step forms. You can change the default step order. For example, skip directly from Step 1 to Step 3 if needed. Define conditions to direct users based on their answers. You can create up to two conditions for each step. This feature helps you guide users through a more personalized form experience based on their responses.

    📘

    Note

    Form Step Configuration applies to NPS, Emoji, Dropdown, Radio button, and Upvote/Downvote questions.

    Configure form steps as per your preference

    Configure form steps as per your preference

    💬

    Examples

    Example 1: Custom Step Progression

    If you want users to skip Step 2 if they select a specific answer. Configure the form so that users who choose this answer move directly from Step 1 to Step 3.

    Example 2: Adding conditions based on answers

    Question: What is your preferred mode of transport?
    Options: Car, Bike, Bus

    Step Configuration:
    If the answer is Car, direct users to Step 4.
    If the answer is Bike, direct users to Step 5.
    If the answer is Bus, direct users to Step 6.

    1. Feedback Form

    You can gather users' opinions, ratings, and comments. It typically includes fields for rating scales, comment boxes, and specific questions related to user experience.

    Use CaseDescription
    Product FeedbackCollect user opinions on product features, usability, and satisfaction to guide future improvements.
    Service ReviewsGather feedback on services provided, helping to enhance customer experience and service quality.
    Event FeedbackObtain participant feedback on events, webinars, or training sessions to study effectiveness and identify areas for improvement.

    Click the icon to add more steps to your form. You can add up to 10 steps, with the 11th step being the success message (confirming that your response has been recorded).

    Add upto 10 steps in your form

    Add up to 10 steps in your form

    Refer to the table below for other functionalities available when editing form elements.

    FunctionDescription
    Duplicate Element Creates a copy of the selected element.
    Move Up Shifts the selected element one position higher in the order.
    Move Down Shifts the selected element one position lower in the order.
    Delete Element Removes the selected element from the layout.
    Select Date Allows the user to choose a date from a calendar.
    Select Time Allows the user to choose a time from a time picker.

    Response Collection

    When users submit a form, sync this data to the Netcore CE dashboard. This updates your Contact Master with new information.

    Follow the steps given below to set up the Form Response Collection.

    1. On the right pane of the Editor, under the General section, click Form Setup next to Response Collection.
    2. A window titled Select an App to Integrate With will open. Click Configure.
    3. Map the form submissions to the user attributes as needed. Click Save to apply the mappings. Netcore’s Contact Master has now been successfully attached.
    4. Click Save Configurations to finalize the setup. You can edit the configuration later if necessary.

    📘

    Important Points to Remember

    • Response Collection is a mandatory step.
    • Responses on email will directly update user attributes. This might impact existing segments, campaigns and journeys.
    • You don’t need to map the primary key (like email or mobile) to attributes.
    • Anonymous users (those who don’t provide identifiable info) can’t be stored in attributes.
    • Ensure your form includes a primary key (like an email) because it’s required for Lists.
    • You can add form responses to existing lists by selecting the preferred segment from a dropdown menu.
    4. Form Elements

    Form Elements

    You can start customizing your form with form elements like a radio button, star rating, heading, input, dropdown, and so on.
    Refer to the table below to learn about the form elements available in the editor.

    Create your Form using Form Elements

    Create your Form using Form Elements

    Form ElementDescription
    HeadingSelect this option to add a heading to your form.
    ParagraphSelect this option to add a text paragraph to your form.
    DividerSeparating different sections of the form helps improve its visual organization.
    InputProvides a field for users to enter text or data, usually a single line.
    DropdownAllows users to select an option from a pre-defined list of choices.
    PhoneAllows users to input their phone number.
    Text AreaAllows users to input multiple lines of text suitable for detailed responses.
    RadioAllows users to choose a single option from multiple options.
    CheckboxAllows users to select one or more options from a list of choices.
    DateAllows users to input or select a specific date.
    TimeAllows users to input or select a specific time.
    NPSThe NPS (Net Promoter Score) element collects feedback by asking users to rate their likelihood of recommending a product or service on a scale. Toggle Helping text below the NPS button to enable or disable the text.
    EmojiUsers can select or input an emoji to provide feedback or express emotions. You can use up to five emojis and customize their appearance, including size options (small, medium, or large).
    Thumbs UpAllows users to provide positive feedback with a single thumbs-up icon. The icon style and size can be customized.
    Star RatingAllows users to rate an item or service by selecting a range of stars. You can customize the number of stars (up to 10) and choose the size (small, medium, or large) to fit your design needs.

    The right pane has two sections, General and Style, each offering different options for customizing your form elements.

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

    General OptionsDescriptionElements Available for
    PaddingIt allows you to adjust the spacing within the template.Heading, Paragraph, Image, Divider, Spacer, and Social
    AlignmentIt allows you to align the selected element within the template.Heading, Paragraph, Image, and Button
    OpacityIt allows you to control the transparency within the template.Heading, Paragraph, Image, Divider, Spacer, Button, and Social
    ThicknessIt allows you to adjust the thickness of the selected element within the template.Spacer, Image, Divider, and Button
    ResponsiveIt allows you to select whether you want to hide the element on mobile devices or a computer.Divider
    Website OverlayIt allows you to blur background content when displaying a web message partially.
  • Overlay Color: The color applied to the background overlay behind a popup or message on a webpage.
  • Overlay Opacity: The level of transparency of the background overlay behind a popup or message on a webpage.
  • Main Page
    Configure NPSSet up your Net Promoter Score (NPS) by defining the minimum and maximum rating values. The minimum number is one, and the maximum number is 10. You can also customize the style of the rating box.NPS
    Field's statesField States refer to the different appearances of a field. There are three types of fields:
    • Default state: When the field is clicked by the user.
    • Hover state: When the user hovers over the field.
    • Active state: When the field is clicked by the user.
    Date, Dropdown, and Phone
    Field typeChoose the type of input field:
  • Email Input for email addresses
    • Text for general text
    • Number for numeric values
    • Date for selecting dates
    • Time for selecting times
  • NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    Placeholder contentAdd a hint or example text in the input field to guide users through the expected information (For example, Enter your email address).NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date,
    Error messageDefine a message that appears if the user enters incorrect or invalid information, such as an invalid email format or incorrect phone number length.Date
    MandatoryMark the field as required, ensuring users must respond before they can submit the form. Required fields are indicated with an asterisk (*).NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    Space between question and boxAdjust the spacing between the form question or label and the input box to enhance readability and layout.NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    Space between optionsAdjust the spacing/ distance between options.NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    OpacitySet the opacity level of the input field to control its visibility within the form.NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date,

    Refer to the table below to learn about Style options.

    StylesDescriptionAvailable for
    BackgroundAllows you to set background color or image.Heading, Paragraph, Image, and Social
    Gradient PickerAllows you to create gradual changes of color 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 to adjust border thickness, style, color, and corner radius with Border Settings.
    • Border Thickness: Adjust the border width.
    • 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 Color: Select the color of the border.
    Heading, Paragraph, Image, Divider, and Button
    ShadowAllows you to adjust shadow blur, opacity, X-axis, Y-axis, and shadow color with Shadow Properties.Heading, Paragraph, Image, and Divider
    Configure background imageSet up the background image for your element and choose how it should fit. Options include
  • Fit Image: Scales the image to fit within the background area.
  • Stretch Image: Stretches the image to cover the entire background area.
  • Repeat Image: Tiles the image to fill the background area by repeating it.
  • NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    Input StylingYou can customize the appearance of input fields by adjusting options like Font Name, Font Size, Font Color, Alignment, and Style (Bold (B), Underlined (U), or Italic (I)).NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date
    5.Widgets

    This feature will be available soon. Stay tuned for updates!

    1. When your web message is ready using your desired elements and settings, click the Live Preview button to see how it will appear on the website.
    2. Click the Next button to send your web message.
    Preview your Web Message

    Preview your Web Message

    Refer here to Schedule and Save your web message campaign.