{"id":20822,"date":"2023-10-12T17:30:00","date_gmt":"2023-10-12T11:30:00","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=20822"},"modified":"2023-11-09T16:37:24","modified_gmt":"2023-11-09T10:37:24","password":"","slug":"how-to-explore-hashbar-shortcodes","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-explore-hashbar-shortcodes\/","title":{"rendered":"How to Available Shortcodes"},"content":{"rendered":"\n<p>To understand how to effectively utilize this plugin, please watch the video provided below. Additionally, we have listed all the necessary codes and shortcodes for your convenience.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Introduction to HashBar - A WordPress plugin to Create WordPress Notification Bars\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/sBmDMjYshpc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/figcaption><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Shortcode Usage Examples:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h3>\n\n\n\n<p>Discover how to utilize shortcodes in HashBar to personalize your notification bars to your needs and preferences. Below, you will find some examples that demonstrate different usages of the shortcode HashBar offers<\/p>\n\n\n\n<div style=\"height:6px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Default:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h4>\n\n\n\n<p>Use the default HashBar shortcode to display a standard notification bar.<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;hashbar_btn]<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button with Custom Text:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h4>\n\n\n\n<p>Customize the button text within your notification using this shortcode<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_text=\"Button custom text\"]<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button with Link:<\/strong><\/h4>\n\n\n\n<p>Incorporate a link into the notification's button for redirecting to a specific URL.<gwmw style=\"display:none;\"><\/gwmw><gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_link=\"www.devitems.com\"]<\/code><gwmw style=\"display:none;\"><\/gwmw><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button Background Color:<\/strong><\/h4>\n\n\n\n<p>Modify the background color of the notification's button to match your website's aesthetics.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_bg_color=\"#EEC116\"]<\/code><gwmw style=\"display:none;\"><\/gwmw><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button Text Color:<\/strong><\/h4>\n\n\n\n<p>Adjust the text color of the notification button for better visibility and style.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_text_color=\"#000000\"]<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Open Button in a New Window:<\/strong><\/h4>\n\n\n\n<p>Make the button open a new browser window when clicked, using the shortcode below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;hashbar_btn btn_target=\"_blank\"]<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button Style 1:<\/strong><\/h4>\n\n\n\n<p>Apply a predefined style to the notification's button for a visually appealing design.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_style=\"style_1\"]<\/code><gwmw style=\"display:none;\"><\/gwmw><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Button Style 2:<\/strong><\/h4>\n\n\n\n<p>Implement an alternate predefined style to the notification's button for a unique look and feel.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_style=\"style_2\"]<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Usage of All Parameters Together:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h4>\n\n\n\n<p>Combine multiple parameters within the shortcode to create a fully customized notification bar, with custom text, link, background color, text color, and style for the button that opens a new browser window upon clicking.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&#91;hashbar_btn btn_text=\"Button custom text\" btn_link=\"www.devitems.com\" btn_bg_color=\"#EEC116\" btn_text_color=\"#000000\" btn_style=\"style_2\" btn_target=\"_blank\"]<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>Newsletter HTML Code:<\/strong><gwmw style=\"display:none;\"><\/gwmw><\/h3>\n\n\n\n<p>Utilize this HTML code example to integrate a subscription form within your notification, allowing users to subscribe to your newsletter effortlessly.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"ht_notification_newsletter\"&gt;\n  &lt;h2&gt;Subscribe to our Newsletter&lt;\/h2&gt;\n  &lt;p&gt;Get Latest Updates via Email&lt;\/p&gt;\n\n  &lt;p&gt;\n      &lt;input type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/&gt;\n      &lt;input type=\"submit\" value=\"Subscribe\" \/&gt;\n  &lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Feel free to use these shortcodes and HTML code examples to customize and enhance your<strong> notification bar<\/strong> according to your requirements. If you have any further questions or need additional assistance, <a href=\"https:\/\/hasthemes.com\/contact-us\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">don't hesitate to reach out!<\/mark><\/a><\/p>\n\n\n\n<p><gwmw style=\"display:none;\"><\/gwmw><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To understand how to effectively utilize this plugin, please watch the video provided below. Additionally, we have listed all the necessary codes and shortcodes for your convenience. Shortcode Usage Examples: Discover how to utilize shortcodes in HashBar to personalize your notification bars to your needs and preferences. Below, you will find some examples that demonstrate [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[249],"doc_tag":[],"class_list":["post-20822","docs","type-docs","status-publish","hentry","doc_category-how-to-use-hashbar-notification-bar"],"acf":[],"year_month":"2025-11","word_count":417,"total_views":"1594","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Kausar mamun","author_nicename":"mamun","author_url":"https:\/\/hasthemes.com\/author\/mamun\/"},"doc_category_info":[{"term_name":"HashBar","term_url":"https:\/\/hasthemes.com\/docs-category\/how-to-use-hashbar-notification-bar\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Kausar mamun","author_link":"https:\/\/hasthemes.com\/author\/mamun\/"},"uagb_comment_info":0,"uagb_excerpt":"To understand how to effectively utilize this plugin, please watch the video provided below. Additionally, we have listed all the necessary codes and shortcodes for your convenience. Shortcode Usage Examples: Discover how to utilize shortcodes in HashBar to personalize your notification bars to your needs and preferences. Below, you will find some examples that demonstrate&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=20822"}],"version-history":[{"count":13,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20822\/revisions"}],"predecessor-version":[{"id":22007,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/20822\/revisions\/22007"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=20822"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=20822"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=20822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}