{"id":9347,"date":"2024-10-21T06:13:45","date_gmt":"2024-10-21T06:13:45","guid":{"rendered":"https:\/\/www.infinitivehost.com\/knowledge-base\/?p=9347"},"modified":"2024-10-21T06:26:53","modified_gmt":"2024-10-21T06:26:53","slug":"add-a-notification-pop-up-in-open-source-crm-easily","status":"publish","type":"post","link":"https:\/\/www.infinitivehost.com\/knowledge-base\/add-a-notification-pop-up-in-open-source-crm-easily\/","title":{"rendered":"Add a Notification Pop-Up in Open-Source CRM Easily"},"content":{"rendered":"<div class='epvc-post-count'><span class='epvc-eye'><\/span>  <span class=\"epvc-count\"> 1,456<\/span><span class='epvc-label'> Views<\/span><\/div>\n<p>To display a notification pop-up box in an open-source CRM like vTiger, you&#8217;ll typically need to modify the front-end code, usually written in JavaScript or jQuery. Here\u2019s a general approach you can follow:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Add a Notification Pop-Up Box<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Locate the Template Files<\/strong>:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Find the appropriate template file where you want to display the notification. This could be in the <code><mark style=\"background-color:#fcb900\" class=\"has-inline-color\">layouts<\/mark><\/code> or <code><mark style=\"background-color:#fcb900\" class=\"has-inline-color\">modules<\/mark><\/code> folder of your CRM installation.<\/li>\n<\/ul>\n\n\n\n<p>    2. <strong>Add HTML for the Notification<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the selected template file, add the HTML structure for your notification pop-up. Here\u2019s a simple example:<br><code>html<\/code><br><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;div id=\"notification\" style=\"display:none; position:fixed; top:20px; right:20px; background-color:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:15px; z-index:1000;\"> Your notification message here. <br>&lt;button onclick=\"closeNotification()\">Close&lt;\/button> <br>&lt;\/div><\/mark><\/code><\/li>\n<\/ul>\n\n\n\n<p>    3. <strong>Add CSS Styles<\/strong> (optional):<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can add custom CSS styles in your main CSS file to make the notification look nicer.<\/li>\n<\/ul>\n\n\n\n<p>     4. <strong>Add JavaScript to Show\/Hide the Notification<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use JavaScript to control when the notification appears. Add the following script either in the same template or in a linked JS file: <code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">function showNotification(message) { document.getElementById('notification').innerText = message; document.getElementById('notification').style.display = 'block'; setTimeout(closeNotification, 5000); \/\/ Automatically close after 5 seconds } function closeNotification() { document.getElementById('notification').style.display = 'none'; }<\/mark><\/code><\/li>\n<\/ul>\n\n\n\n<p>    5. <strong>Trigger the Notification<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Call <code><mark style=\"background-color:#fcb900\" class=\"has-inline-color\">showNotification('Your message here')<\/mark><\/code> at appropriate places in your JavaScript code to display the notification based on specific events (e.g., after a successful form submission).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Example Usage:<\/h3>\n\n\n\n<p>You can trigger the notification when a user saves a record:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/\/ Example after saving a record\nshowNotification('Record saved successfully!');<\/mark><\/code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Testing:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After making the changes, refresh your CRM page.<\/li>\n\n\n\n<li>Trigger the event to see if the notification displays correctly.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Note:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Always back up your files before making modifications.<\/li>\n\n\n\n<li>Test your changes in a development environment if possible to avoid disrupting the live system.<\/li>\n<\/ul>\n\n\n\n<p>This should help you implement a simple notification pop-up in your open-source CRM! If you have specific features in mind, feel free to ask!<\/p>\n\n\n\n<p><strong>Conclusion<\/strong><\/p>\n\n\n\n<p>To show a pop-up box related to notification in an open-source and freely available CRM such as vTiger, you just often need to change the front-end programs, generally written in jQuery or JavaScript. The above steps guide you through this whole process. Make sure that you have the <a href=\"https:\/\/www.infinitivehost.com\/managed-vtiger-solutions\"><mark style=\"background-color:#8ed1fc\" class=\"has-inline-color\"><strong>best Vtiger hosting<\/strong><\/mark><\/a> solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1,456 Views To display a notification pop-up box in an open-source CRM like vTiger, you&#8217;ll typically need to modify the front-end code, usually written in JavaScript or jQuery. Here\u2019s a general approach you can follow: Steps to Add a Notification Pop-Up Box 2. Add HTML for the Notification: 3. Add CSS Styles (optional): 4. Add [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[204],"tags":[],"class_list":["post-9347","post","type-post","status-publish","format-standard","hentry","category-vtiger-solutions"],"_links":{"self":[{"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/9347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=9347"}],"version-history":[{"count":2,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/9347\/revisions"}],"predecessor-version":[{"id":9351,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/9347\/revisions\/9351"}],"wp:attachment":[{"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=9347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=9347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infinitivehost.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=9347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}