1. Creating a New Campaign

To start building your pop-up or banner, you first need to create a new action in the system.

Navigate to Campaigns in the top navigation bar.
Click the Create action button.
Enter a clear name for your campaign.
Select either Banner or Popup from the options.
Choose a target folder to keep your workspace organized and click Next.
Select a pre-designed template (e.g., Mail subscribe form) or choose an Empty popup to start from scratch.

2. Understanding the Content Editor

The left-hand sidebar houses your toolkit, divided into distinct block categories. You can drag and drop these directly onto your canvas.

Content Blocks

Block Type	Description
Spacer	Adds adjustable vertical space (height in pixels) between elements.
Divider	Inserts a customizable line (thickness, style, color, margins).
Image	Adds an image block; allows you to adjust size, alignment, and add a link.
Heading	Adds a customizable headline; change the size, font, color, and background.
Text	Adds paragraph text with standard formatting options and padding controls.
Button	Adds a clickable button; edit the label, colors, borders, and target URL.

Layout Blocks Layout blocks give your design structure and let you build more complex interfaces.

Side-by-side: Aligns two or more blocks horizontally (e.g., an image next to text).
Stacked: Aligns blocks vertically in a specific, contained column.

Form Elements Use these blocks to collect customer data. Options include Email, SMS permission, Phone number, Date input (e.g., birthdays), Text Field, Checkbox, and Single choice.

3. Designing with Rows

Rows are the foundational base of your layout. They define the columns where your content lives.

Open the Rows tab in the left sidebar.
Drag your preferred column layout onto the canvas (e.g., 100%, 50/50, or 33/67).
Select a row to change its background color or image.
Select a specific column within a row to adjust its individual background color or padding (e.g., changing padding to 0px ensures images stretch perfectly edge-to-edge).
To remove a row, select it and click the Delete (trash can) icon.

4. Reusing Designs with Modules

Modules save you time by letting you preserve your favorite custom elements or entire rows for future use.

Select the styled element or row you want to save on your canvas.
Click the Save as module (floppy disk) icon in the floating action menu.
Give your module a descriptive name and click Create module.
Open the Modules tab in the sidebar to drag and drop your saved designs into any new pop-up or banner.

5. Adding Media, Products, and Custom Fonts

Images and Products

Images: Open the Images tab to browse your media library. Drag and drop existing images or upload new ones straight to your design.
Products: Open the Products tab to search your inventory. You can drag products onto the canvas or click them to view raw product data and technical details.

Custom Fonts If your brand guidelines require a specific font not found in the default list, you can add it easily.

Go to the Fonts tab and click Add font.
Enter the font name and paste the Font URL (e.g., from Google Fonts).
Select a Fallback font (like sans-serif) to ensure the design remains intact if the custom font fails to load.
Click Save. Your custom font is now available in the text editor toolbar.

6. Building a Functional Form

Forms some configuration to ensure the data maps correctly to your customer profiles.

Create a new pop-up and select a form template (like "Mail subscribe form popup").
Click the background of the form to open the Form Settings.
Verify the Event type (e.g., MAIL_SUBSCRIBE). This ensures the system knows what type of action the customer is taking.
Drag in new Form Elements if needed (e.g., a Text Field for a first name).
Select the new input field and assign the correct Data property (e.g., type first_name) so Custobar knows exactly where to save this data on the customer's profile.
Switch to the Thank you tab at the top of the canvas to design the success message the user sees after submitting the form.
Click Save, then Exit, and finally click Activate to set your campaign live.

Creating Pop-ups, Banners, and Forms

This guide covers everything you need to know to build, style, and activate custom pop-ups, banners, and forms to capture leads and engage your customers.