How to Use the AI Site Editor & Connect Actions
The SiteNix Visual Editor is designed to be simple and intuitive. You don’t need any coding skills! Click any element to edit text, upload product photos, change colors, or set up automatic "Order on WhatsApp" buttons.
Think of the Editor as a live preview of your business website. Whenever you click on any text, heading, or image on the screen, the right-hand panel opens up allowing you to change its content immediately.
1. The 3 Easy Studio Panels
The workspace is organized into three straightforward areas:
Lists all sections of your page (Header, Hero, Products, FAQs, Footer). Drag sections to reorder them or ask AI to write catchy business copy for you.
Shows how your website looks live. Click the Mobile button at the top to make sure your site looks perfect on smartphones!
Appears whenever you select an item. Use it to change fonts, upload images, adjust button colors, or set up WhatsApp ordering.
2. How to Set Up "Order on WhatsApp" Buttons
Follow these 4 simple steps to connect any button directly to your phone number.
Click Your Button on the Canvas
Click on the "Order Now" or "Chat on WhatsApp" button you want to configure.
Open the "Events" Tab
In the right-hand panel, click on the **Events** tab at the top.
Select "WhenClicked" ➔ Add Action
Under **WhenClicked**, click **+ Add Action** and pick Open WhatsApp from the dropdown menu.
Type Your Product Details
Enter your product name (e.g. "Luxury Handbag") and price (e.g. "₦18,000"). When a customer taps the button, WhatsApp opens with a pre-filled order message ready to send!
3. Button Action Reference Cheatsheet
Opens WhatsApp directly with your business phone number and pre-formatted product order message. Perfect for closing quick sales!
Collects customer details (Name, Phone Number, Message) from a contact form and sends them straight to your Dashboard Messages Inbox.
Directs the visitor to another page on your site or an external web link (such as Instagram or a PDF download).
Updates an interactive counter, price total, or toggle state on your page dynamically.
4. Dynamic Formulas & Expression Editor (Optional)
Power UsersIf you want to calculate dynamic prices or show custom text based on variables, click the **braces icon ``** beside any text or property field:
// Example: Calculate 10% discount on cart total
cartTotal * 0.90
// Example: Display custom greeting based on customer name
userName ? "Hello " + userName + "!" : "Welcome to Our Store!"