Learn how to design stunning modal windows and popups for newsletters, promotions, and announcements using ai4shops.com
Modal windows (popups) are powerful tools for capturing attention and converting visitors. With ai4shops.com's Modal Designer, you can create beautiful, professional modals without any coding knowledge.
Prerequisites: Make sure you have created a project before starting this guide.
Video Placeholder: Modal Editor Tour
Duration: 3-4 minutes | Complete walkthrough of the modal editor interface
Modals are overlay windows that appear on top of your website content. Common uses include:
From your project dashboard, click "Modals" in the sidebar.
Screenshot: Modal list page with creation options
File: /_static/guides/modal-designer/modal-list-en.png
You have two options:
| Option | Description |
|---|---|
| Create New | Start with a blank canvas |
| From Template | Start with a pre-designed template |
Enter a descriptive name like "Newsletter Popup" or "Summer Sale Banner".
Start faster with our professionally designed templates!
Screenshot: Template library grid
File: /_static/guides/modal-designer/template-library-en.png
The Modal Editor is your creative workspace. Let's explore its components:
Screenshot: Full editor interface with callouts
File: /_static/guides/modal-designer/editor-interface-en.png
The central area where you design your modal:
Add elements to your modal:
| Element | Use For |
|---|---|
| Text | Headlines, descriptions, labels |
| Image | Logos, product photos, illustrations |
| Button | Call-to-action, submit, close |
| Input | Text fields, email fields |
| Checkbox | Consent, preferences |
| Container | Group elements together |
Manage element stacking order:
Configure the selected element:
Create visually stunning modals with our styling options.
Click on the canvas background (not any element) or select "Canvas" from the layers panel.
Set your modal dimensions:
| Preset | Dimensions | Best For |
|---|---|---|
| Small | 400 x 300px | Simple messages |
| Medium | 500 x 400px | Newsletter signups |
| Large | 600 x 500px | Detailed forms |
| Custom | Any size | Specific needs |
Choose your background:
Screenshot: Canvas properties panel
File: /_static/guides/modal-designer/canvas-properties-en.png
Click on any element in the canvas or layers panel.
In the Properties panel:
Enhance with visual effects:
Screenshot: Properties panel styling options
File: /_static/guides/modal-designer/element-styling-en.png
For a modern, translucent appearance:
Collect information from visitors with form inputs.
Screenshot: Form elements in modal
File: /_static/guides/modal-designer/form-elements-en.png
| Input Type | Description | Use Case |
|---|---|---|
| Text Input | Single-line text | Name, subject |
| Email Input | Email validation | Newsletter signup |
| Textarea | Multi-line text | Messages, feedback |
| Checkbox | Yes/No selection | Consent, preferences |
| Radio Buttons | Single choice | Options, plans |
| Select Dropdown | Multiple choices | Categories, countries |
Drag an input from the toolbar onto the canvas.
Configure in the Properties panel:
The Name property identifies the field when data is submitted:
email, firstName, phone, message
Make your modal interactive with actions!
Screenshot: Action configuration panel
File: /_static/guides/modal-designer/actions-config-en.png
| Action | Description |
|---|---|
| closeModal | Close the modal window |
| submitForm | Submit form data to connected form |
| navigateTo | Open a URL or page |
| customJS | Execute custom JavaScript (sandboxed) |
Click on a button element in your modal.
In the Properties panel, find the "Actions" or "On Click" section.
Click "Add Action" and select the action type:
Example: Submit and Close
submitForm actioncloseModal actionActions execute in order from top to bottom.
For navigateTo:
URL: https://yoursite.com/thank-you
Open in: New Tab / Same Tab
For customJS:
console.log("Form submitted!");
// Your custom code hereNote: Custom JavaScript is sandboxed for security. Access to cookies, localStorage, and certain DOM operations may be restricted.
To save form submissions, connect your modal to a Form in ai4shops.com.
Screenshot: Connect modal dialog
File: /_static/guides/modal-designer/connect-form-en.png
When connected:
Click the settings icon or go to Modal Settings.
Click "Connect to Form" or "Data Connection".
Either:
Ensure modal input names match form field names:
| Modal Input Name | Form Field |
|---|---|
email | Email field |
firstName | First Name field |
message | Message field |
Click "Connect" to link the modal and form.
Now when visitors submit your modal, data flows to your connected form!
Add your modal to any website with a simple embed code.
Video Placeholder: Creating Newsletter Popup from Scratch
Duration: 5 minutes | Building and embedding a complete newsletter modal
In your modal, click "Embed" or "Get Code".
Screenshot: Embed dialog with options
File: /_static/guides/modal-designer/embed-dialog-en.png
| Mode | Description | Use Case |
|---|---|---|
| Popup | Floating overlay | Promotions, signups |
| Inline | Embedded in page content | Contact sections |
For Popup mode, choose when to display:
| Trigger | Description |
|---|---|
| On Load | Show immediately when page loads |
| Delay | Show after X seconds |
| Scroll % | Show when user scrolls to percentage |
| Exit Intent | Show when user moves to leave |
| Button Click | Show when button is clicked |
Your code will look like:
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="your-modal-id"
data-trigger="exit-intent"
></script>Paste the script before </body> in your HTML:
<!DOCTYPE html>
<html>
<body>
<!-- Your content -->
<!-- ai4shops.com Modal -->
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="your-modal-id"
data-trigger="delay"
data-delay="5000"
></script>
</body>
</html>To show modal on button click:
<!-- Your button -->
<button onclick="ai4shops.showModal('your-modal-id')">
Subscribe to Newsletter
</button>
<!-- Modal script (only once per page) -->
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="your-modal-id"
data-trigger="manual"
></script>By default, modals are private. Make them public for embedding.
Screenshot: Public toggle in settings
File: /_static/guides/modal-designer/public-toggle-en.png
Click the settings icon on your modal.
Find the "Public" or "Published" toggle and enable it.
Click "Save" to apply.
Security Note: Public modals can be accessed by anyone with the embed code. Ensure your allowed origins are configured to prevent unauthorized use.