Smart Announcer

---

Contents

Before You Begin

info IMPORTANT: Disable the Squarespace Default Announcement Bar before installing the Smart Announcer plugin. The plugin will not work if the default bar is enabled.

To disable the default announcement bar:

1. Go to Pages > Website Tools (Under Utilities)

2. Find Announcement Bar (under Messaging)

3. Ensure it is disabled

Set Up

You will only need to install the code snippets once. Then you can proceed to schedule as many announcements as you would like in the events pages.

1. Plugin Installation

1. Navigate to Pages > Website Tools > Code Injection

2. Copy and paste the following code into the Footer Code Injection area:

<!-- LAZ-I.COM SMART ANNOUNCER -->
<link rel="stylesheet" href="https://lizasem.com/laz-i/smart-announcer/styles.min.css">  
<script src="https://lizasem.com/laz-i/smart-announcer/script.min.js"></script>  
<!-- LAZ-I.COM SMART ANNOUNCER -->

(Optional) If you want to customize global settings, add the following code below the installation code:

<!-- LAZ-I.COM SMART ANNOUNCER GLOBAL SETTINGS -->
<script>
window.announcementPluginConfig = {
    // The URL slug of your Announcements page. Change this if you named your page differently.
    announcementPageSlug: "announcements",

    // If true, announcements will always show in the Squarespace editor, regardless of scheduling.
    keepOpenInEditMode: true,

    // If true, all announcements will use the marquee effect by default.
    marqueeAll: false,

    // Speed of the marquee effect in pixels per second. Lower number = faster. To change individual announcements you can add the speed in the tag settings.
    marqueeDuration: 50,

    // Direction of all marquee text effect. Can be "left" or "right".
    marqueeDirection: "left",

    // If true, all marquee will pause when the user hovers over it.
    pauseOnHover: false,

    // If true, users cannot close any announcement bar.
    disableCloseButton: false
};
</script>
<!-- LAZ-I.COM SMART ANNOUNCER GLOBAL SETTINGS -->

You can modify these settings as needed.

2. Add an Events Page

1. Go to the "Not Linked" area in Pages

2. Create a new Events Page

3. Name it "Announcements" (ensure the URL slug is "announcements")

   • If you name it something else please match it to the global config settings above.

4. Hide the page from SEO

5. Delete any default Event Items

3. Set up the Events Page

For easier management, add this custom code to the Events Page:

1. Go to Advanced > Page Header Code Injection for the Announcements page

2. Add the following code:

<!-- LAZ-I.COM SMART ANNOUNCER INSERT IN ANNOUNCEMENT PAGE SETTINGS-->
<link rel="stylesheet" href="https://lizasem.com/laz-i/smart-announcer/announcement-page-styles.min.css">

This code will enhance the usability of your Announcements page.

Creating and Scheduling Announcements

1. On your Announcements page, click the plus button to add a new announcement

2. Name your announcement (this is for your reference only, not visible to users)

3. Set the start and end event date time, then hit save.

4. Add your announcement content in the CONTENT field

   • Keep formatting simple (bold, italic, underline are okay)

   • Avoid using special blocks

5. Click on "DURATION" to open more settings

6. Go to "Options" > “Status” and tick the "Schedule Post". Set the date time the same as the start event date time.

7. Save your announcement and refresh the page to preview changes.

info Note: The "Schedule Post" date time controls when the announcement goes live, not the start event date time. For best practice and avoid confusion, make the Schedule Post date time the same as your start event date time.

Customizing Your Announcements

Make the Entire Announcement Bar Clickable

1. Go to event item settings > Content > Source Link

2. Add your URL to the Source Link area

3. By default, the link opens in a new tab

4. To open in the same window, add the tag "no-tab" in event settings > Options > Tags

Live Demo

Add a countdown timer

A simple automatic countdown timer counting down the days, hours, minutes, and seconds to the end date and time.

1. Go to event item settings > Options > Tags

2. Add the tag "countdown"

Live Demo

Marquee Text

Best for very long text or to add some motion.

1. Go to event item settings > Options > Tags

2. Add the tag "marquee"

3. Optional: Adjust speed with tag "speed=number" (higher number = slower)

4. Optional: Allow pause on hover with tag "pause"

Live Demo

Disable the Close Button

1. Go to event item settings > Options > Tags

2. Add the tag "no-close"

Live Demo

Previewing Announcements

• Refresh your Announcements page after saving an announcement

• The preview will be visible when you're in the Squarespace editor and viewing the specific announcement's page

Additional Information

• You can schedule multiple announcements

• Choose between adding a link in the content OR using the Source Link feature

• Closed announcements reappear after 12 hours or when users clear their cache/cookies

• Announcement styles match the default Squarespace announcement bar (customizable in site styles panel)

• Preview announcements on their individual event pages within Squarespace