{"id":231,"date":"2015-11-27T11:29:20","date_gmt":"2015-11-27T11:29:20","guid":{"rendered":"https:\/\/www.nvecta.com\/blog\/?p=231"},"modified":"2023-03-01T16:19:58","modified_gmt":"2023-03-01T16:19:58","slug":"custom-notifications-using-visual-selector","status":"publish","type":"post","link":"https:\/\/www.nvecta.com\/blog\/custom-notifications-using-visual-selector\/","title":{"rendered":"Surveys, Feedback, custom Notifications and forms using Visual Selector"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.nvecta.com\/blog\/custom-notifications-using-visual-selector\/#_Custom_Notifications_using_Visual_Selector\" >&nbsp;Custom Notifications using Visual Selector<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.nvecta.com\/blog\/custom-notifications-using-visual-selector\/#Use_Case\" >Use Case:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.nvecta.com\/blog\/custom-notifications-using-visual-selector\/#How_It_works\" >How It works:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.nvecta.com\/blog\/custom-notifications-using-visual-selector\/#Steps_to_add_custom_rules_using_visual_selector_html_element\" >Steps to add custom rules using visual selector html element:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"_Custom_Notifications_using_Visual_Selector\"><\/span>&nbsp;Custom Notifications using Visual Selector<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><a href=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-8390 size-full\" src=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png\" alt=\"notification custom rules\" width=\"917\" height=\"358\" srcset=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 917w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 300w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 768w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 370w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 270w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png 740w\" sizes=\"(max-width: 917px) 100vw, 917px\" \/><\/a><\/p>\n<p>Now you can add notification based on rules using&nbsp;visual selector. Notifyvisitors now allows you to choose your website element visually and set rules based on same without passing any values in the integration code.<\/p>\n<p><!--more--><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Use_Case\"><\/span>Use Case:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>1. Show notification on product page if Product price is above 1000<\/p>\n<p>2&nbsp;Show notification on&nbsp;Cart page if cart is empty, has 1 or more items, has total value above 10000.<\/p>\n<p>3&nbsp;Show notification if user is loggedin.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_It_works\"><\/span>How It works:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You need to select your website html element using visual selector and add rule to specify&nbsp;value or range. When particular value appear on the website your notification will become visible.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Steps_to_add_custom_rules_using_visual_selector_html_element\"><\/span>Steps to add custom rules using visual selector html element:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-8391 size-full\" src=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png\" alt=\"customer visual notification selecter\" width=\"780\" height=\"769\" srcset=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 780w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 300w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 768w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 370w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 270w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 304w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png 740w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/a><\/p>\n<h4><strong>Step 1:<\/strong><\/h4>\n<p>Create a custom rule to display notification and update. Leave HTML element blank.<\/p>\n<h4><strong>Step 2:<\/strong><\/h4>\n<p>a. Under Visual selector, click on the key created from drop down<\/p>\n<p>b. Enter the url and click &#8220;Choose HTML element&#8221;<\/p>\n<p>c. Select the element visually and update<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;Custom Notifications using Visual Selector Now you can add notification based on rules using&nbsp;visual selector. Notifyvisitors now allows you to choose your website element visually and set rules based on same without passing any values in the integration code.<\/p>\n","protected":false},"author":3,"featured_media":7626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[19,21,22,20],"class_list":["post-231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-feedback-surveys","tag-custom-notifications","tag-custom-rules-notifications","tag-show-notification-if-cart-is-empty","tag-visual-selector"],"_links":{"self":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":21,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"predecessor-version":[{"id":18507,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/231\/revisions\/18507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/media\/7626"}],"wp:attachment":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/tags?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}