Drag & Drop Editor
Lemnisk's drag & drop editor helps you in creating attractive OSN content for your engagement by using simple and intuitive design elements. You can create content with images, texts and forms to engage your customers on your website.
There are two fundamental building blocks in this editor which is the foundation for all your OSN design.
Rows: Rows are the placeholders for your content in the canvas. You can add multiple full rows and split-rows for Images and buttons as needed to suit your OSN, on top of which you would add Content Blocks.
Content Blocks: Content Blocks are the design elements such as images, text, forms, buttons, etc., which the row holds.
Rows
Rows allows you to add content such as images, text and buttons in your On-site notification with a drag drop editor. Clicking just outside the canvas boundary will select the row, and Row Settings will be available on the control panel where you could modify Row Settings like Background Image/Colour, Rounded Corners, full OSN Padding and more.
You can edit text and images in each row using the tool bar that pops out while selecting each row.
There are multi-partition rows available as well. You can use such split rows for designing use cases like adding 2 buttons, adding text and image beside each other etc.
Row Properties: On selecting each row, the right window pane shows the row properties which you can customise as required.
Content
Content Properties: On selecting content inside the row, the right window pane shows the content properties which you can customise as required.
The content tab allows you to add content such as image, text, button and forms to your OSN
Title: This tool is used to add a heading or title to a document or page. It's typically used for main headings (H1) and subheadings (H2,H3 etc.) to structure content hierarchically.
Paragraph: This tool adds a block of text, which is the standard way to add body content to a document. It's the most common tool for writing prose.
List: This tool is for creating lists, which can be either ordered (numbered) or unordered (bullet points). Lists are great for breaking up large blocks of text and presenting information in a scannable format.
Image: This tool allows you to insert an image into your content. It usually opens a media library or a file uploader to select or upload a picture.
Button: This tool creates a clickable button that can link to a URL. Buttons are commonly used for calls to action (CTAs) like "Learn More," "Sign Up," or "Download."
Divider: This tool adds a horizontal line to visually separate different sections of content. It helps to improve the readability and organis ation of a page.
Spacer: This tool inserts empty vertical space. It's used to adjust the spacing between elements on a page, helping with layout and visual balance.
Social: This tool is used to add social media icons or widgets that link to social media profiles. It makes it easy for users to find and follow the creator on platforms like Facebook, Twitter, and Instagram.
HTML: This tool is for embedding custom HTML code directly into the content. It's useful for advanced users who want to add elements or functionality not available through the standard tools.
Form: This tool allows you to create and insert a form, such as a contact form, a survey, or a signup form. Forms are essential for collecting user data and feedback.
Icons: This tool provides a library of icons (like those for social media, navigation, or features) to add visual flair and communicate information quickly.
Menu: This tool is used to create a navigation menu, which is a key component for website structure. It helps users navigate to different pages on the site.
Text: This tool is for adding a generic block of text, similar to the paragraph tool. It might offer more flexible formatting options than a standard paragraph, such as bold, italics, or different font sizes within a single line.
Formatting The Design
By navigating to SETTINGS tab, you can configure your global properties — default font settings and URL colour.
Row settings
When you hover the mouse pointer behind the content it will highlight the row that contains the content. Clicking on the row shows row properties in the right panel where you can configure the following row properties.
Backgrounds - Background settings allow you to modify the background of the Rows.
Row Background colour: This allows to change the background colour of your row.
Content Area background: This allows to change the background colour of your content area
Row background Image: You can add background image for your row and apply affects to the background image by clicking Apply effects.
Apply effects: You can add effects such as filters, frames, stickers, text, and set corners and transformation with the provided options.
Borders
Content area border: Allows you to configure the border size and corner radius of the content area.
Content area rounded corner: Helps you to set rounded corners for your content area.
Columns structure: You can add columns using this option to your OSNs. Click on each column that you added from the right panel to configure them.
Padding: This option allows you to add padding to your columns. By switching more options toggle you can add padding to each side of the column.
Content settings
Hover your mouse over the the content and click on it configure the content. This opens the content tab in the right window plane which provides many configuration options to configure your content. Few samples of customising content has been explained below.
Image: In the content, If you have added Image it shows the following configuration options.
Apply effects: This option allows you to add effects to your image such as filters, frames, stickers, text, and set corners and transformation with the provided options.
URL: This field shows the URL of your image.
Alt text: You can add alternative text to your image as a fail proof if the image is not displayed in your OSN.
Image rounded corners : You can add padding to your image and by switching more options toggle, you can add padding to all the sides of your image.
Title: In the content, If you have added Title you will have the following settings in the right window pane such as Title size, Font Family, Font weight, Text colour, URL colour, Line height, Letter spacing, Text direction, etc.
Buttons: In the content, If you have added Buttons you will have the following settings in the right window pane to configure.
Actions: This option allows you to configure button actions like opening a page, Making a call, sending an SMS, etc.
Link type as URL: If you select link type as URL, the following fields will allow you to add URL.
URL: You can add link file or dynamic links to the button actions.
Link File: This option allows you to add external URLs or upload images to direct users when they click the button.
Dynamic Links: This option allows you to configure your personalised URLs where you want to direct your user on clicking the button.
Target: You can choose the landing target to any specific sub pages, any specific area in a page or the whole page using the options provided.
Button Options
Width: You can use auto width or set your button's width manually. Other than width you can use all the text edit option provided to configure your button appearance.
Button Hover: You can configure to hover your button while pointing and personalise background colour of your button.
The complete demonstration of using drag and drop editor is shown in the below video.
Common Use Cases
1. How To Add a Form To Your OSN?
You can add forms to your OSN using the drag and drop editor by following the below mentioned steps.
Select a row and add the Forms option from the content.
Add the following fields for the form by clicking Edit Form and choose weather it should be mandated or not.
Label Text: This is the field where you define the label text such as Name, Email, Phone, etc., in your form.
Input Type: Define the input type of your field in the form from the dropdown.
Email: This input type is used for collecting email addresses, and is often paired with validation to ensure the input is in the correct format (e.g., includes an "@" symbol and a domain).
Telephone: This input type is used for collecting phone numbers.
Telephone with Country Code: This is a custom field created by Lemnisk to capture phone numbers with country code. The code is defined in the key/value pairs (India/+91). This reflects once you completely save your engagement.
Text: A Text input is a versatile, single-line field for collecting short, general information like a name or a subject line.
Terms & Conditions: This is Lemnisk’s custom field, typically a checkbox that users must interact with or accept to proceed.
Date and Time: These Input fields provide a user-friendly way to select a specific date and, in the latter case, a time, often using a calendar or a time picker interface.
Number: The Number input is used for numerical data, and may include features to restrict the range of acceptable values (e.g., only whole numbers or numbers within a certain range).
Radio: Radio Options are used when a user must select only one choice from a list of predefined options.
Dropdown: A Dropdown is another way to present a list of options, but it's more space-efficient, hiding the options until the user clicks on the field.
Label: The Label input is used to provide descriptive text for other fields, helping users understand what information is required.
Password: The Password field is a specialized text input that masks the characters as they're typed to ensure security.
Submit Button: This is an essential form component that triggers the form's submission process, sending the collected data to its intended destination.
Place Holder: This field denotes the text that is displayed as placeholder.
Mandatory: Select this check box to make the field as mandatory.
Property in CDP: Select this check box add this field as customer property (Macro).
To add buttons to your form, must declare the input type as button while configuring the fields.
To edit the form, click Edit Form
Click Submit.
2. How do I add a Close button to my OSN?
There are 2 ways to add a close icon to your OSN.
Scenario 1: Close icon on top of an Image block.
Use the HTML block to add the below custom image + close icon block
<div style="position: relative; display: inline-block;">
<!-- the main image -->
<img src="https://cdn25.lemnisk.co/ssp/Insurance_Demo_DMP/d16ce3c5-af6f-4c5f-a5e7-9df91043b509.png" style="display: block; border-top-left-radius: 12px; border-top-right-radius: 12px;" alt="Your image" width="100%" />
<!-- the overlaid icon -->
<div id="close">
<img src="https://www.svgrepo.com/show/499592/close-x.svg" onclick=”parent.VizuryNotificationObject.close();” style="
position: absolute;
cursor: pointer;
top: 6px; /* tweak as needed */
right: 4px;
pointer-events: none;
" alt="close-btn" width=”16px” height="16px" />
</div>
</div>The first image source (
img src) is the primary image of the OSN. Use a CDN link of your image in the src parameter.You can further add rounded borders by using the img properties as shown in the example above.
The second image source is the close icon. You can use any close icon CDN link from Google Images here. A sample one is used above that is a standard simple close icon that you can reuse.
Scenario 2: Close icon on top of Text/Paragraph/Title blocks.
Add an icon content block on top of your textual blocks.
In the content properties section of the Icon Block, click on "Add New Icon". Proceed to add the Close button image of your choice, for example: https://www.svgrepo.com/show/499592/close-x.svg
Edit the formatting of the icon as per your choosing - reduce the icon size, change the icon alignment to left/right, remove/add padding.
Important step - Toggle on the block identifier in the Icon properties, and enter "close" as the identifier. This will tell Lemnisk SDK that clicking this icon when rendered on the browser should close the popup.
Notification size:
Configure the notification width and height for the container sizes in Desktop, Mobile and Tablet Devices.
Label: Select label to configure the engagement product labels for filtering later in Reporting.
Drag & Drop editor Template settings:
Select Placement: Choose where you want your notification to appear, and you can see the preview on the right side of the screen. In this step, you would choose to place your notification in a prominent location on your website, such as the centre of the homepage, or to appear from any corner. You can preview how the notification will look on the right side of the screen before making a final decision.
Background Overlay: Choose whether you want to have a coloured or transparent background behind the template. To make the notification stand out, we choose a coloured background behind the template that complements the colours of your website.
Notification margin from edge: You can configure the margin for your notification from the edges of the screen using the options provided.
Last updated