DIY Editor

Create stunning, mobile-responsive web message templates with our unified DIY 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 only available for Web Messages currently.

Create a Campaign with DIY

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

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

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.

  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 UCE 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

Edit the template with General and Style options

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, Social
AlignmentIt allows you to align the selected element within the template.Heading, Paragraph, Image, Button
OpacityIt allows you to control the transparency within the template.Heading, Paragraph, Image, Divider, Spacer, Button, Social
ThicknessIt allows you to adjust the thickness of the selected element within the template.Spacer, Image, Divider, 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

    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, 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, 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, Button
    ShadowAllows 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

    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. In case of Close button, here are the following settings:
  • Button Type: Decide whether the close button should be represented by an icon or text.
  • 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.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.