Skip to main content

Announcement Bar

The Announcement Bar addon allows you to display a notification bar at the top of your website to inform your users about news, promotions, or important alerts.

warning

This addon requires ClientXCMS version v2.14.9 or higher.

Configuration​

You can manage the announcement bar configuration in Admin Panel > Settings > Customizations > Announcement Banner

Banner HTML: You can add HTML in the text field to customize the announcement bar content. Display Start: You can set the start date and time for the announcement bar display. Display End: You can set the end date and time for the announcement bar display. Enable Banner: You can enable or disable the announcement bar.

info

Make sure the theme you are using supports the announcement bar display. Some custom themes may not display this feature.

How to support the addon on a theme?​

For the announcement bar to display correctly, your theme must include the following code in your layouts/client.blade.php or layouts/front.blade.php file or equivalent, right after the <body> tag:

    {!! app('seo')->header() !!}

Announcement bar display examples:​

Preview:​

img

Source code:​

<div class="bg-gray-400 backdrop-blur-lg dark:bg-neutral-900/60">
    <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
        <!-- Grid -->
        <div class="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
            <div class="flex items-center gap-x-3 md:gap-x-5">
                <div class="grow">
                    <p class="md:text-xl text-gray-800 font-semibold dark:text-neutral-200">
                        Get started today.
                    </p>
                    <p class="text-sm md:text-base text-gray-800 dark:text-neutral-200">
                        Use promo code <span class="font-semibold text-primary">"TEST"</span> for a 5% discount on your first order.
                    </p>
                </div>
            </div>
            <div class="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
                <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="/store">
                    Get Started
                </a>
                <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-gray-800 text-gray-800 hover:border-gray-500 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-white dark:text-white dark:hover:text-neutral-300 dark:hover:border-neutral-300" href="/client/support/submit">
                    Contact Us
                </a>
            </div>
        </div>
    </div>
</div>

How to add a close button?​

You can add a close button to the announcement bar using the following HTML and JavaScript code:

<button  type="button" data-announcement-dismiss><i class="bi bi-x-lg"></i></button>
<!-- or -->
<button type="button" onclick="clientxAnnouncementBarHide()"><i class="bi bi-x-lg"></i></button>