Documentation
v1.8
GETTING STARTED
DYNAMIC ISLAND
Premium element
Interaction
Smart Notify
Smart Notify allows users to subscribe via email using a customizable and responsive form. It includes validation, error handling, and feedback messages, ensuring a seamless user experience.
Preview
Open previewQuick Setup
data-notify
Required
Add this attribute to the div element for the notification form.
Specify the email address where notifications will be sent.
Font & Text Styling
data-font-family
Optional
Sets the font family for the entire form, including input field, button, and messages.
Default: system-ui
data-font-size
Optional
Controls the font size of the input field and button.
Default: 16px
data-text-color
Optional
Sets the main text color for the form, affecting the input text and success message.
Default: #ffffff
Font & Text Styling
data-input-bg
Optional
Background color of the email input field.
Default: #1a1a1a
data-input-border
Optional
Border color of the input field in its normal state.
Default: rgba(255, 255, 255, 0.1)
data-input-focus-border
Optional
Border color of the input field when it receives focus.
Default: #2563eb
data-input-text
Optional
Placeholder text displayed in the email input field when empty.
Default: Enter your email
data-placeholder-color
Optional
Color of the placeholder text in the input field.
Default: #9ca3af
Button styling
data-button-bg
Optional
Background color of the submit button.
Default: #2563eb
data-button-text-color
Optional
Text color for the button text.
Default: #ffffff
data-button-hover
Optional
Background color of the button when hovered (if empty, no hover effect is applied).
data-button-text
Optional
Text displayed on the submit button.
Default: Notify Me
Layout & Spacing
data-gap
Optional
Space between the input field and the button.
Default: 8px
data-border-radius
Optional
Corner radius for both the input field and button.
Default: 8px
data-form-max-width
Optional
Maximum width of the form container (useful for responsive layouts).
Default: none
Feedback & Messaging
data-success-text
Optional
Message displayed after successful form submission.
Default: Thanks for subscribing!
data-error-text
Optional
Message shown when an error occurs during form submission.
Default: There was an error. Please try again
data-loading-text
Optional
Text displayed while the form is submitting.
Default: Sending...
data-invalid-text
Optional
Message shown when an invalid email format is entered.
Default: Please enter a valid email
data-error-color
Optional
Color used for error messages.
Default: #ff4444
data-success-bg
Optional
Background color of the success message popup.
Default: rgba(255, 255, 255, 0.1)
data-overlay-opacity
Optional
Opacity of the dark overlay shown behind the success message.
Default: 0.2
data-success-duration
Optional
Duration in milliseconds that the success message remains visible.
Default: 3000
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours