{"id":20328,"date":"2025-12-24T08:22:54","date_gmt":"2025-12-24T08:22:54","guid":{"rendered":"https:\/\/notificationx.com\/?post_type=docs&#038;p=20328"},"modified":"2025-12-24T08:24:29","modified_gmt":"2025-12-24T08:24:29","password":"","slug":"how-to-show-announcement-using-notificationx","status":"publish","type":"docs","link":"https:\/\/notificationx.com\/id\/docs\/how-to-show-announcement-using-notificationx\/","title":{"rendered":"How to Show Announcement on WordPress Website with NotificationX"},"content":{"rendered":"<p class=\"wp-block-paragraph\">With NotificationX, you can easily display announcements to show promotional offers, videos, collect feedback and leads within your WordPress website. With this freemium feature, you can now customize your announcement, manage its visibility and add targeted content with ease.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s see how to configure the <strong>\u2018Announcement\u2019<\/strong> notification type with NotificationX.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Configure Announcement in NotificationX<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow this step-by-step process to show an announcement on your website with NotificationX. Before getting started, make sure you have <a href=\"https:\/\/notificationx.com\/id\/docs\/install-activate-notificationx\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>diinstal dan diaktifkan NotificationX<\/strong><\/a> and NotificationX PRO on your website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Langkah 1: Tambahkan Pemberitahuan Baru<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buka Dashboard WordPress Anda dan arahkan ke <strong>wp-admin -&gt; NotificationX<\/strong>. Then, right at the top, click on <strong>\u2018Add New\u2019.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 1\" fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"862\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6.png\" alt=\"Add new button for NotificationX announcement feature\" class=\"wp-image-20329\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-300x162.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-1024x552.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-768x414.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-1536x828.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-18x10.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/image-6-360x194.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Select \u2018Announcement\u2019 as Your Notification Type<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah Anda selesai dengan langkah 1, Anda akan diarahkan ke <strong>&#039;Sumber&#039;<\/strong> Tab page of your NotificationX. You can also put a title. From the options, select <strong>\u2018Announcement\u2019<\/strong> sebagai jenis Sumber Anda.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 2\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/2.-Doc-Select-Announcement.gif\" alt=\"Select NotificationX announcement type\" class=\"wp-image-20331\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Choose the Announcement Theme &amp; Design<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dari<strong> &#039;Rancangan&#039; <\/strong>tab, you can choose a theme based on your needs. The first 4 themes, which include showcasing ongoing offers and collecting visitors&#8217; messages without their email addresses, are FREE.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next 3 themes, where your website visitors can send a message and give their email, are included in the PRO version. From the \u2018<strong>Tema<\/strong>\u2019 section, the chosen layout is how the \u2018<strong>Announcement<\/strong>\u2019 will be displayed on your website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 3\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/3.-Doc-Themes.gif\" alt=\"Select announcement design &amp; theme\" class=\"wp-image-20332\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, to make the theme customizable, enable the \u2018<strong>Desain Lanjutan<\/strong>\u2019 button. There you will be able to change the color of background color, overlay background color and control the popup width. You can even change the close button color for the popup.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will also be able to adjust the typography and font\/ size weight, content message color. Change the button design to a customized color in the button by adjusting font size, radius, padding and width.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-advanced-image  root-eb-advanced-image-b16cw\"><div class=\"eb-parent-wrapper eb-parent-eb-advanced-image-b16cw\"><figure class=\"eb-advanced-image-wrapper eb-advanced-image-b16cw no-effect\" data-id=\"eb-advanced-image-b16cw\"><div class=\"eb-image-wrapper\"><div class=\"eb-image-wrapper-inner eb-img-style-square\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 4\" decoding=\"async\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/3.1-Doc-Advanced-Design-5.gif\" alt=\"How to Show Announcement on WordPress Website with NotificationX\"\/><\/div><\/div><\/figure><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Customize the Content for Announcement<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking the \u2018<strong>Next\u2019<\/strong> button, you will find the <strong>&#039;Kandungan&#039;<\/strong> tab. Here, you can choose the content for the popup. From the <strong>\u2018Title\u2019<\/strong>, choose the title you want to showcase for your popup. You can give a catchy headline in the title section. Next, enable the Name, Email, or Message field to collect users&#8217; names, email addresses, or their messages, respectively. You also have available option to choose a catchy CTA for the button.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below, you will also find an option to add a custom link for the CTA. After the setting, click on the <strong>&#039;Lanjut&#039;<\/strong> button to control the visibility of the announcement.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 5\" loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/4-Doc-Content.gif\" alt=\"Customize the content on announcement\" class=\"wp-image-20336\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Control the Visibility<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, from the <strong>&#039;Tampilan&#039;<\/strong> tab, select the visibility option where you want to show\/ hide the announcement on your website. You can also select to whom you want to display this notification type.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 6\" loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/5-Doc-Display.gif\" alt=\"Control announcement visibility\" class=\"wp-image-20335\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: Configure the Customization&nbsp;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, under the <strong>&#039;Sesuaikan&#039;<\/strong> tab, you can choose the Appearance of the announcement. That means in which position on your website you want to display the notification. Adjust the notification size and choose the type of device you want to display the close button and notification visibility. You can also control the notification reappearance for the users.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 7\" loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/6-Doc-Apprarance.gif\" alt=\"Customization in announcement\" class=\"wp-image-20337\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, you will find popup settings where you can enable or disable the <strong>\u2018Show Close Button\u2019<\/strong> dan <strong>\u2018Close on Button Click.\u2019 <\/strong>You can also adjust the close button position. Next, in the Animation section, you can animate the popup and set up the delay. Set the Timing to show a delay before the first notification. Click on the <strong>&#039;Menerbitkan&#039;<\/strong> button to make the announcement live on your website.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 8\" loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1494\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/7-Doc-Popup-Settings.gif\" alt=\"Set animation and timing for announcement\" class=\"wp-image-20340\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Hasil akhir<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By following these steps and a bit more modification, this is how your Announcement will appear on your WordPress website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img title=\"How to Show Announcement on WordPress Website with NotificationX 9\" loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"637\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2025\/12\/8-Doc-Final-Outcome.gif\" alt=\"Final outcome of Announcement\" class=\"wp-image-20338\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Jika Anda menghadapi masalah, Anda dapat menghubungi kami <a href=\"https:\/\/wpdeveloper.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tim pendukung<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Step-by-step guide of how to use announcement feature in NotificationX<\/p>","protected":false},"author":44,"featured_media":20338,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"rankmath","_thinkrank_focus_keywords":["announcement","announcement notificationx","Choose the Announcement Theme","Configure Announcement","collect leads"],"_thinkrank_focus_keyword":"announcement","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"","_thinkrank_advanced_robots_meta":"","_thinkrank_primary_category":0,"_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[306,186,1617,156],"class_list":["post-20328","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-elementor","doc_tag-email-subscription","doc_tag-feature","doc_tag-notificationx"],"year_month":"2026-07","word_count":622,"total_views":"4246","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"name":"Maahi","author_nicename":"maahi","author_url":"https:\/\/notificationx.com\/id\/blog\/author\/maahi\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/id\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Elementor","term_url":"https:\/\/notificationx.com\/id\/docs-tag\/elementor\/"},{"term_name":"Email Subscription","term_url":"https:\/\/notificationx.com\/id\/docs-tag\/email-subscription\/"},{"term_name":"Feature","term_url":"https:\/\/notificationx.com\/id\/docs-tag\/feature\/"},{"term_name":"NotificationX","term_url":"https:\/\/notificationx.com\/id\/docs-tag\/notificationx\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/docs\/20328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/users\/44"}],"version-history":[{"count":3,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/docs\/20328\/revisions"}],"predecessor-version":[{"id":20405,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/docs\/20328\/revisions\/20405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/media\/20338"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/media?parent=20328"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/doc_category?post=20328"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/id\/wp-json\/wp\/v2\/doc_tag?post=20328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}