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:
- Choose 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](https://files.readme.io/69ea7df-UCE.png)
Create a web message
Access UCE
You can use Banner & Modal layout to create your content using DIY.
You can use any template that is categorized as Editor to create your content using DIY.
- 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](https://files.readme.io/37ce5bb-UCEWindow.gif)
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 will help you structure arrangements of basic elements, such as text, images, or buttons, in a way that is visually appealing.
Multiple templates are available in the DIY for you to create your custom web message.
Drag and drop any layout on the canvas. There are two sections on the right pane: General and Style, each offering different options.
![Edit the template with **General** and **Style** options](https://files.readme.io/4b2e508-GeneralAndStyleSettings.gif)
Edit the template with General and Style options
Refer to the table below to learn more about General options.
General Options | Description | Elements Available for |
---|---|---|
Padding | It allows you to adjust the spacing within the template. | Heading, Paragraph, Image, Divider, Spacer, Social |
Alignment | It allows you to align the selected element within the template. | Heading, Paragraph, Image, Button |
Opacity | It allows you to control the transparency within the template. | Heading, Paragraph, Image, Divider, Spacer, Button, Social |
Thickness | It allows you to adjust the thickness of the selected element within the template. | Spacer, Image, Divider, Button |
Responsive | It allows you to select whether you want to hide the element on mobile devices or a computer. | Divider |
Website Overlay | It allows you to blur background content when displaying a web message partially. | Main Page |
Refer to the table below to know more about Style options.
Style Options | Descriptions | Available for |
---|---|---|
Background | Allows you to set background colour or image. | Heading, Paragraph, Image, Social |
Gradient Picker | Allows 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. | Heading, Paragraph, Image |
Border | Allows you adjust border thickness, style, colour, and corner radius with Border Settings. Dash: Generates a border with a series of short dashes. Dotted: Produces a border made up of evenly spaced dots. | Heading, Paragraph, Image, Divider, Button |
Shadow | Allows you adjust shadow blur, opacity, X-axis, Y-axis, and shadow colour with Shadow Properties. | Heading, Paragraph, Image, 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](https://files.readme.io/a9c157e-BasicElements.png)
Create your Web Message using Basic Elements
Refer to the table below to know the description of basic elements.
Section | Elements | Descriptions |
---|---|---|
Basic Elements | Heading | Select this option to add a heading to your template. |
Paragraph | Select this option to add a message to your template. | |
Image | Select this option to insert an image into your template. Customize your template's visuals with these image editing tools. | |
Divider | Select this option to separate content sections in your template. | |
Spacer | Select this option to add a spacer to your template. | |
Button | Select this option to integrate a button into your template. | |
Social Links | Select 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. |
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](https://files.readme.io/8e583d5-FORMS.png)
Create Web Message using Forms
The Unified Content Editor (DIY) provides five types of forms:
- 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 Case | Description |
---|---|
Newsletter Sign-ups | Collect email addresses from users interested in subscribing to your newsletter. |
Contact Requests | Gather basic contact information for user inquiries or support requests. |
- Simple
With multiple fields, this form gathers more detailed information, such as names and addresses, while staying easy to fill out.
Use Case | Description |
---|---|
Customer Surveys | Collect detailed feedback on customer experiences, including names, emails, and opinions. |
Product Inquiries | Capture specific product questions or requests, along with contact details for follow-up. |
- 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 Case | Description |
---|---|
Customer Support Scheduling | Enable users to book time slots for customer support or consultations. |
Event Registrations | Allow users to book slots for events or webinars. |
- 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 Case | Description |
---|---|
Application Forms | Manage extensive data collection for applications like job applications, membership sign-ups, or grant requests. |
Onboarding Process | Facilitate 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](https://files.readme.io/054273a-FormStepConfig.png)
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, BusStep 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.
- 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 Case | Description |
---|---|
Product Feedback | Collect user opinions on product features, usability, and satisfaction to guide future improvements. |
Service Reviews | Gather feedback on services provided, helping to enhance customer experience and service quality. |
Event Feedback | Obtain 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](https://files.readme.io/33587fa-StepsExceedForm.gif)
Add up to 10 steps in your form
Refer to the table below for other functionalities available when editing form elements.
Function | Description |
---|---|
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.
- On the right pane of the Editor, under the General section, click Form Setup next to Response Collection.
- A window titled Select an App to Integrate With will open. Click Configure.
- 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.
- 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](https://files.readme.io/77aab06-FormElements.png)
Create your Form using Form Elements
Form Element | Description |
---|---|
Heading | Select this option to add a heading to your form. |
Paragraph | Select this option to add a text paragraph to your form. |
Divider | Separating different sections of the form helps improve its visual organization. |
Input | Provides a field for users to enter text or data, usually a single line. |
Dropdown | Allows users to select an option from a pre-defined list of choices. |
Phone | Allows users to input their phone number. |
Text Area | Allows users to input multiple lines of text suitable for detailed responses. |
Radio | Allows users to choose a single option from multiple options. |
Checkbox | Allows users to select one or more options from a list of choices. |
Date | Allows users to input or select a specific date. |
Time | Allows users to input or select a specific time. |
NPS | The 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. |
Emoji | Users 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 Up | Allows users to provide positive feedback with a single thumbs-up icon. The icon style and size can be customized. |
Star Rating | Allows 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 Options | Description | Elements Available for |
---|---|---|
Padding | It allows you to adjust the spacing within the template. | Heading, Paragraph, Image, Divider, Spacer, and Social |
Alignment | It allows you to align the selected element within the template. | Heading, Paragraph, Image, and Button |
Opacity | It allows you to control the transparency within the template. | Heading, Paragraph, Image, Divider, Spacer, Button, and Social |
Thickness | It allows you to adjust the thickness of the selected element within the template. | Spacer, Image, Divider, and Button |
Responsive | It allows you to select whether you want to hide the element on mobile devices or a computer. | Divider |
Website Overlay | It allows you to blur background content when displaying a web message partially. | Main Page |
Configure NPS | Set 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 states | Field States refer to the different appearances of a field. There are three types of fields:
| Date, Dropdown, and Phone |
Field type | Choose the type of input field:
| NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date |
Placeholder content | Add 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 message | Define a message that appears if the user enters incorrect or invalid information, such as an invalid email format or incorrect phone number length. | Date |
Mandatory | Mark 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 box | Adjust 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 options | Adjust the spacing/ distance between options. | NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date |
Opacity | Set 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.
Styles | Description | Available for |
---|---|---|
Background | Allows you to set background color or image. | Heading, Paragraph, Image, and Social |
Gradient Picker | Allows 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.
Gradient Direction: Select the direction for the gradient effect, including top, right, center, bottom, or left. | Heading, Paragraph, and Image |
Border | Allows you to adjust border thickness, style, color, and corner radius with Border Settings.
Dash: Generates a border with a series of short dashes. Dotted: Produces a border made up of evenly spaced dots.
| Heading, Paragraph, Image, Divider, and Button |
Shadow | Allows you to adjust shadow blur, opacity, X-axis, Y-axis, and shadow color with Shadow Properties. | Heading, Paragraph, Image, and Divider |
Configure background image | Set up the background image for your element and choose how it should fit. Options include | NPS, Emoji, Star rating, Thumbs up, Dropdown, Phone, Radio, Checkbox, and Date |
Input Styling | You 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!
- 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.
- Click the Next button to send your web message.
![Preview your Web Message](https://files.readme.io/2feee92-PreviewWebMessage.png)
Preview your Web Message
Refer here to Schedule and Save your web message campaign.
Updated 9 days ago