--- title: Hello Bar Documentation --- - [Home](https://awwaldesign.com) - [Testimonials](https://awwaldesign.com/testimonials) - [Hubspot Themes](https://awwaldesign.com/hubspot-themes) - [Awwal blog theme](https://awwaldesign.com/hubspot-themes/awwal-blog-theme) - [Nue blog theme](https://awwaldesign.com/hubspot-themes/nue-blog-theme) - Hubspot Modules - [Hello Bar](https://awwaldesign.com/modules/hello-bar) - [Compare Image Slider](https://awwaldesign.com/modules/compare-image-slider-module) - [Countdown Timer](https://awwaldesign.com/modules/countdown-timer-module) - [Interactive World Map](https://awwaldesign.com/modules/interactive-map-module-for-hubspot) - [Interactive USA Map](https://awwaldesign.com/modules/interactive-usa-state-map-module-for-hubspot) [Get in touch](https://awwaldesign.com/contact?hsLang=en) - GENERAL - [Home](https://awwaldesign.com) - [About](https://awwaldesign.com/about-awwal-design) - [Testimonial](https://awwaldesign.com/testimonials) - [Contact](https://awwaldesign.com/contact) - PRODUCTS - [HubSpot Themes](https://awwaldesign.com/hubspot-themes) - [HubSpot Modules](https://awwaldesign.com/hubspot-modules) - SUPPORT - [Documentation](https://awwaldesign.com/docs) - [Theme Support](https://awwaldesign.com/support) - BLOG - [Blog](https://awwaldesign.com/blog) - [HOME](https://awwaldesign.com) - [TESTIMONIALS](https://awwaldesign.com/testimonials) - [HUBSPOT THEMES](https://awwaldesign.com/hubspot-themes) - [Awwal blog theme](https://awwaldesign.com/hubspot-themes/awwal-blog-theme) - [Nue blog theme](https://awwaldesign.com/hubspot-themes/nue-blog-theme) - HUBSPOT MODULES - [Hello Bar](https://awwaldesign.com/modules/hello-bar) - [Compare Image Slider](https://awwaldesign.com/modules/compare-image-slider-module) - [Countdown Timer](https://awwaldesign.com/modules/countdown-timer-module) - [Interactive World Map](https://awwaldesign.com/modules/interactive-map-module-for-hubspot) - [Interactive USA Map](https://awwaldesign.com/modules/interactive-usa-state-map-module-for-hubspot) - [SUPPORT](https://awwaldesign.com/support) - [Documentation](https://awwaldesign.com/docs) - [Awwal Bog Theme Docs](https://documentation.awwaldesign.com/awwal-blog-theme) - [Nue Blog Docs](https://documentation.awwaldesign.com/nue-blog-theme) - [Hello Bar Docs](https://awwaldesign.com/docs/hello-bar) - [Compare Image Slider Docs](https://awwaldesign.com/docs/compare-image-slider-module) - [Countdown Timer](https://documentation.awwaldesign.com/countdown-timer-module) - [Interactive Map](https://documentation.awwaldesign.com/interactive-map-module) - [Theme Support](https://awwaldesign.com/support) - [ABOUT](https://awwaldesign.com/about-awwal-design) - [BLOG](https://awwaldesign.com/blog) [Get in touch](https://awwaldesign.com/contact?hsLang=en) # Getting Started Created By Awwal Team Thank you for choosing to purchase this module! After you've purchased and installed the module, it will automatically be added to your HubSpot account.  You should be able see it under the **Settings** > **Marketplace Downloads** ---   **For ease of reading, we've organized this documentation into four sections** 1. **Installation** 2. **Content options** 3. **Design and styling** 4. **Features** Let's explore each of them individually. > **IMPORTANT NOTE**:  If your navbar is set as 'fixed' you have to add your navbar class or ID inside the Hello Bar module so it can dynamically adapt the padding. See the [instruction here](https://awwaldesign.com/docs/hello-bar#dyanamic-height).     --- ### **1. Installation** Open any page where you like to display the Hello Bar On the left panel search the module and simply drag and drop it onto the page. **Note: Please remember to refresh the page after dropping the module for the changes to take effect.** Check out this quick video yo see how it works   **Great, you've just added the module, now let's personalize it.** ### **2. Content options** ##### ➤ Add texts ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-02-32-2106-PM.png?width=362&height=593&name=image-png-Apr-04-2024-12-02-32-2106-PM.png)   ##### ➤ Add Button ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-00-40-1657-PM.png?width=293&height=102&name=image-png-Apr-04-2024-12-00-40-1657-PM.png)   ##### ➤ Add button text ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-00-58-0353-PM.png?width=354&height=184&name=image-png-Apr-04-2024-12-00-58-0353-PM.png)   ##### ➤ Add Button link ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-01-21-5126-PM.png?width=358&height=356&name=image-png-Apr-04-2024-12-01-21-5126-PM.png)   ##### ➤ Open link in the new tab ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-02-08-5416-PM.png?width=358&height=256&name=image-png-Apr-04-2024-12-02-08-5416-PM.png) --- ### **3. Design and styling** #### **Bar Style** ##### **![Regular_Size](https://awwaldesign.com/hs-fs/hubfs/Awwal_website_2024/HubSpot%20Modules/Regular_Size.png?width=1440&height=980&name=Regular_Size.png)** ##### ➤ **Bar Color** Select from pre-defined color options or customize your own. **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-14-59-7848-PM.png?width=360&height=347&name=image-png-Apr-04-2024-12-14-59-7848-PM.png)**   ##### ➤ **Bar Custom Colors** Add your own custom colors. ##### ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-21-50-3235-PM.png?width=355&height=454&name=image-png-Apr-04-2024-12-21-50-3235-PM.png) ##### ➤ **Background Image** Looking to spice up design? Add  ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-24-36-3740-PM.png?width=360&height=627&name=image-png-Apr-04-2024-12-24-36-3740-PM.png)   ##### ➤ **Bar Size** **![Thin_size](https://awwaldesign.com/hs-fs/hubfs/Awwal_website_2024/HubSpot%20Modules/Thin_size.png?width=1396&height=428&name=Thin_size.png)** Choose between Normal and Thin options to customize the appearance of the bar. ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-15-21-3420-PM.png?width=359&height=249&name=image-png-Apr-04-2024-12-15-21-3420-PM.png)   ##### ➤ **Button Style** Select from pre-defined color options or customize your own. **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-16-19-9149-PM.png?width=377&height=331&name=image-png-Apr-04-2024-12-16-19-9149-PM.png)**   **Show Text, Text with icon or just an icon** ##### **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-16-06-9374-PM.png?width=353&height=310&name=image-png-Apr-04-2024-12-16-06-9374-PM.png)** ➤ **Font sizes** Need more control over the fonts? Turn on **Font override** option and manually select the font sizes. **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-16-45-6638-PM.png?width=364&height=244&name=image-png-Apr-04-2024-12-16-45-6638-PM.png)** --- ### **4. Features** ##### ➤ **Hide Close Button** Have an important update to share with users? Hide the close button to ensure they don't miss it. ##### ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-26-33-3406-PM.png?width=338&height=71&name=image-png-Apr-04-2024-12-26-33-3406-PM.png)   ##### ➤ **Keep it hidden when dismissed (Add cookie)** Once a user dismisses the bar, it remains hidden until the cookie is cleared or expires, ensuring a seamless browsing experience for your visitors ##### ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-28-36-9747-PM.png?width=346&height=120&name=image-png-Apr-04-2024-12-28-36-9747-PM.png) ##### ➤ Set Expiration duration Manually choose the number of days until the bar is displayed again ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Apr-04-2024-12-28-47-7873-PM.png?width=365&height=143&name=image-png-Apr-04-2024-12-28-47-7873-PM.png) ##### ➤ Dynamic Height (For fixed header) Add your header's class (.header or #header) to the module and it will dynamically adapt the padding ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Oct-01-2025-06-38-43-3370-PM.png?width=365&height=340&name=image-png-Oct-01-2025-06-38-43-3370-PM.png) - [See All Themes](https://awwaldesign.com/hubspot-themes) - [Theme Documentation](https://awwaldesign.com/docs) - [Theme Support](https://awwaldesign.com/support) [![awwaldesign_white_logo](https://awwaldesign.com/hubfs/Awwal_website_2024/awwaldesign_white_logo.svg "awwaldesign_white_logo")](https://awwaldesign.com/?hsLang=en) [Get in touch](https://awwaldesign.com/contact?hsLang=en) Copyright © 2026. All rights reserved by [Awwal Design](https://awwaldesign.com/?hsLang=en).  - - - - [Privacy Policy](https://awwaldesign.com/privacy-policy) - [Terms and Conditions](https://awwaldesign.com/terms) - [Refund Policy](https://awwaldesign.com/refund-policy)