--- title: "Configuring smart bars" slug: "smart-bar" description: "Now display a banner/bar of info messages overlaying the Document360 knowledge base at the site level or article level based on certain conditions." tags: ["Smart bar"] updated: 2026-01-08T00:41:46Z published: 2026-01-31T09:30:11Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Configuring smart bars The **Smart bar** feature in **Document360** allows you to display customizable banners or bars across your Knowledge base site. These bars can convey information, announcements, or messages, tailored to specific conditions such as user location, browser type, or project language settings. By leveraging **Smart bar****s**, you can enhance user engagement and direct attention to critical updates effortlessly. Imagine you are rolling out a new feature update for your product. To ensure all users are aware, you can create a **Smart bar** to display a notification about the update at the top of every article in the Knowledge base site. You can even localize the bar to show it in different languages based on user preferences. ![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_New_Screenshot-Smartbars_Knolwedge_base_site_view.png) --- ## **Smart bar****overview** The **Smart bar** overview page consists of several key elements: ![Document360 interface showing smart bars settings and language selection options.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Screenshot-Smart_bar_overview.png) 1. **Select language**: Displays the global language and any existing project languages along with the number of **Smart bar****s** configured for each. For example, **Spanish (2)** means two **Smart bar****s** exists in Spanish. 2. **Status**: Indicates whether a **Smart bar** is active. If the **Status** toggle is turned off, the **Smart bar** will not appear in the Knowledge base site. 3. **Details**: Shows the name, position, and a preview option for each **Smart bar**. 4. **Show rules**: Lists conditions under which the **Smart bar** will appear. 5. **Hide rules**: Lists conditions under which the **Smart bar** will be hidden. 6. **Edit** (**): Hover over a **Smart bar** to access the Edit (**) option. 7. **Delete** (**): Hover over a **Smart bar** to delete (**) it. 8. **Filters**: Use the filter panel to sort **Smart bar****s** by name, location, show rules, or hide rules. 9. **New smart bar**: Click to create a new **Smart bar**. --- ## Creating a new **Smart bar** To create a new **Smart bar**: 1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Knowledge base site** > **Smart bar****s**. 3. Click **New smart bar**. 4. In the **Name** field, enter a suitable name. 5. By default, the **Status** toggle is turned on. You can turn it off if needed. #### Configuring the content 1. Expand the **Content** section to define the message. 2. Use the **Global** toggle to set the **Smart bar** visibility for all languages or specific ones. 1. **Global On**: The message appears across all Knowledge base site pages and languages. 2. **Global Off**: A language dropdown appears to select specific languages. 3. Add the desired content using basic formatting tools such as Bold (**), Italics (**), Underline (**), Hyperlink (**), and Code view (**). #### Customizing **Design and location** 1. Expand the **Design and location** section to personalize the **Smart bar**. 2. Select a position from these options: ![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/4_Screenshot-four_positions_of_Smart_bar.png) 1. **Site top** 2. **Site bottom** 3. **Article top** 4. **Article bottom** 3. Choose a color theme: 1. **Light theme**: The background color is grey, and the text color is black. 2. **Dark theme**: The background color is black, and the text color is white. 3. **Custom theme**: Customize the background color, CTA background color, text color, and CTA text color using the color picker or by entering Hex, RGB, or HSL codes. **Advanced display conditions (optional)** 1. Configure visibility rules for showing or hiding the **Smart bar** based on: | **Condition** | **Description** | **Example** | | --- | --- | --- | | **URL** | Define specific URLs to include or exclude. | To display a promotional banner only on the product page URLs of your website. | | **Query strings** | Use query parameters with operators like Exists, Equals, or Not Equals. | To show a discount code banner when a specific campaign query string is present in the URL. | | **IP address** | Target specific IP addresses or ranges. | To restrict the visibility of an internal update **Smart bar** to office network IP ranges. | | **Browser** | Display **Smart bar****s** based on the user’s browser. | To display a compatibility warning for users accessing the site with older browser versions. | | **Device** | Target devices such as desktops, mobiles, or tablets. | To show a mobile app download banner only for users on mobile devices. | | **Project** | Configure visibility for specific projects, categories, or tags. | To announce a new feature release to users accessing content in a specific project category. | | **Language** | Available only if **Global** toggle is turned on. | To display a localized welcome message based on the user’s preferred language. | 1. Select **AND**/**OR** computation for multiple rules (when adding more than one rule): - **AND**: All conditions must be true to show/hide the **Smart bar**. - **OR**: Any conditions must be true to show/hide the **Smart bar**. 2. Click **Delete** (**) icon next to each rule to delete that rule alone. 3. Click **Add**. The **Smart bar** overview page will display the newly added **Smart bar**. ![Settings for a new smart bar including content, design, and display conditions.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Screenshot-Smart_bar_create_new.png) --- ### FAQs #### **How do I edit a****Smart bar****?** To modify or update a **Smart bar**, 1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Knowledge base site** > **Smart bar****s**. 3. Hover over the desired **Smart bar** and click the **Edit** (**) icon. 4. Modify the name, content, design, or visibility rules. 5. Click **Update** to save changes. #### **How do I delete a****Smart bar****?** To delete a **Smart bar**, 1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Knowledge base site** > **Smart bar****s**. 3. Hover over the desired **Smart bar** and click the **Delete** (**) icon.