You can use this to display various types of messages on the page through JS like:<\/p>\n\n\n\n
- \n
- Success:<\/strong> Indicates a successful operation<\/li>\n\n\n\n
- Notice:<\/strong> Provides important information or updates<\/li>\n\n\n\n
- Warning:<\/strong> Alerts users about potential issues<\/li>\n\n\n\n
- Error:<\/strong> Informs users about errors or unsuccessful operations<\/li>\n<\/ul>\n\n\n\n
Here\u2019s an example JS syntax of the dispatch message array for the Hyv\u00e4 theme:<\/p>\n\n\n\n
window.dispatchMessages([\n {\n type: \"success\",\n text: \"Great job! Your profile has been updated successfully.\"\n }\n], 2000);<\/pre>\n\n\n\nIn the above code, the type <\/strong>attribute defines the message type and the text<\/strong> attribute contains the actual message to be shown. Optionally, you can also define the message duration in milliseconds (ms).<\/p>\n\n\n\n
The above code will display the following message:<\/p>\n\n\n\n
![\"Hyva](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/hyva-theme-message-example-using-js.png\")
<\/figure>\n\n\n\nYou can trigger the message dynamically using JavaScript in specific conditions.<\/p>\n\n\n\n
Using JS to Display Messages on Hyv\u00e4 Based on Conditions<\/h2>\n\n\n\n
The dispatchMessage global function can be used site-wide to show messages. You can use it to display messages, errors, and warnings on the front end based on triggers and events.<\/p>\n\n\n\n
Let\u2019s understand it through an example.<\/p>\n\n\n\n
Hyv\u00e4 Message Example<\/h3>\n\n\n\n
You can use the success message type in Hyv\u00e4 to display a success message on the page. This can be useful for events like successful form submission and order placement.<\/p>\n\n\n\n
For example, here\u2019s a Javascript notifications Hyv\u00e4 theme code that displays a success message on form submission:<\/p>\n\n\n\n
document.querySelector(\"#submit-button\").addEventListener(\"click\", function() {\n \/\/ Simulating successful form submission\n window.dispatchMessages([\n {\n type: \"success\",\n text: \"Your form has been submitted successfully!\"\n }\n ], 3000); \/\/ Message disappears after 3 seconds\n});<\/pre>\n\n\n\nHere\u2019s what it looks like:<\/p>\n\n\n\n
![\"Hyva](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/hvya-theme-message-example.png\")
<\/figure>\n\n\n\nLikewise, you can display notice, warning, and error messages in Hyv\u00e4 by implementing a similar JavaScript. And also use different Hyv\u00e4 JavaScript helper functions<\/a> to make your storefront more accessible.<\/p>\n\n\n\n
FAQs<\/h2>\n\n\n\n
Can I Customize the Appearance \/ Colors of Hyv\u00e4 Messages?<\/h3>\n\n\n\n
Yes, you can customize the appearance of Hyv\u00e4 theme messages. To do so, you can override the default styles applied in the Tailwind CSS file.<\/p>\n\n\n\n
Do Hyv\u00e4 Messages Support HTML Formatting?<\/h3>\n\n\n\n
No, you can not use HTML content inside Hyva’s messages.<\/p>\n\n\n\n
How Do I Remove a Message Before its Timeout?<\/h3>\n\n\n\n
There are many ways to do this — you can use PHP to remove messages from the session or <\/p>\n\n\n\n
- Notice:<\/strong> Provides important information or updates<\/li>\n\n\n\n