Onsite Campaign Editor – Design & Styling Guide
The Onsite Campaign Editor allows you to design pop-ups, banners, rating cards, and lead forms that appear on your website. This guide will help you understand how to customize text, buttons, images,
1. Text Editor
Use the text editor to write and format message content for your onsite notification. You can customize style, color, alignment, and more.
Available Text Options
Font Style & Size
Choose different font styles (e.g., Arial) and adjust the font size.
Text Formatting
Use Bold (B), Italic (I), and Underline (U) for emphasis.
Text Color (A)
Change the text color.
Highlight Color (Marker icon)
Highlight specific parts of the text using a background highlight.
Link (🔗)
Add a clickable hyperlink inside your text.
Text Alignment (≡)
Align text to the left, center, or right.
Tip
Use bold headlines for clarity and highlight important offers or call-to-action phrases to draw attention.
2. Button Customization
Buttons help drive action such as submitting a form, opening a URL, or continuing to a page. You can enable or disable them based on your campaign.
Button Settings
Enable Button
Turn the button on/off using the toggle.
Button Text
Write the label shown on the button (e.g., “Learn More”).
Redirect URL
Enter the link where the user will be redirected after they click.
Button Display Options
Fit to Text
Button size adjusts according to the text width.
Full Width
Button expands to cover the full width of the container.
Button Styles
Font Size
Adjust text size within the button.
Bold / Italic / Underline
Style the button text.
Text Color
Choose the button text color.
Button Background Color
Customize the button background color.
Corner Radius
Use rounding (e.g., 5, 8) to make corners smooth or sharp.
Height (H)
Adjust vertical height of the button.
Border Width (⧈ A)
Set the thickness of the button border (if needed).
Border Color
Add and customize border color.
3. Image Options
You can add images like banners, logos, products, or icons to your template.
Image Controls
Upload Image
Add an image file to your template.
Position (Left/Center/Right)
Align your image inside the template.
Corner Radius
Smoothen or sharpen image corners.
Display Mode (Cover/Contain)
Controls how the image fits. Cover fills the entire image box proportionately.
Tip
Use high-resolution images and avoid text-heavy graphics for best performance.
4. Style Your Template
These settings control the overall design of your onsite card or popup.
Height (H)
Controls the height of the entire template.
Width (W)
Controls the template’s width.
Corner Radius
Makes the template edges sharp or rounded.
Padding (P)
Adds inner spacing around the content (text, button, image).
Margin (M)
Adds spacing outside the template.
Background Color
Choose a background color for the entire popup/card.
Box Shadow
Toggle ON/OFF shadow effect to make your popup stand out.
Tip
Use box shadow and rounded corners to make pop-ups visually appealing and less intrusive.
Last updated