{"id":231,"date":"2015-11-27T11:29:20","date_gmt":"2015-11-27T11:29:20","guid":{"rendered":"http:\/\/www.notifyvisitors.com\/blog\/?p=231"},"modified":"2021-01-05T11:33:42","modified_gmt":"2021-01-05T11:33:42","slug":"custom-notifications-using-visual-selector","status":"publish","type":"post","link":"https:\/\/stagewp.notifyvisitors.com\/blog\/custom-notifications-using-visual-selector\/","title":{"rendered":"Surveys, Feedback, custom Notifications and forms using Visual Selector"},"content":{"rendered":"<h1 style=\"text-align: center;\">\u00a0Custom Notifications using Visual Selector<\/h1>\n<p><a href=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/notification-custom-rules1-1.png\"><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\u00a0visual 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>Use Case:<\/h3>\n<p>1. Show notification on product page if Product price is above 1000<\/p>\n<p>2\u00a0Show notification on\u00a0Cart page if cart is empty, has 1 or more items, has total value above 10000.<\/p>\n<p>3\u00a0Show notification if user is loggedin.<\/p>\n<h3>How It works:<\/h3>\n<p>You need to select your website html element using visual selector and add rule to specify\u00a0value or range. When particular value appear on the website your notification will become visible.<\/p>\n<h3>Steps to add custom rules using visual selector html element:<\/h3>\n<p><a href=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2015\/11\/custom-notifications-visual1.png\"><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>\u00a0Custom Notifications using Visual Selector Now you can add notification based on rules using\u00a0visual 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],"yst_prominent_words":[1690,1687,1686,1683,943,1679,222,1688,1681,1678,1685,1689,1680,1682,1677,1457,1684,1676,1691,146],"_links":{"self":[{"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/posts\/231"}],"collection":[{"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":0,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/media\/7626"}],"wp:attachment":[{"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/tags?post=231"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/stagewp.notifyvisitors.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}