How to Add Announcement Bar to Your Website

Summarize with:

With Jotform’s Announcement Bar Widget, you can keep important messages front and center on your website. Use it to announce sales, share updates, promote new features, or highlight important notices, and then customize the bar to match your site and add it in just a few steps.

Before you can add the Announcement Bar Widget to your website, you’ll first need to customize your message, personalize the widget’s appearance, and copy the embed code for it. This is how it’s done:

On the top-left side of your Workspace page, click on Create.

Workspace page highlighting the Create button in the top-left corner to start creating a new project

Then, in the menu that opens up, select Website Widget.

Create menu displaying the Website Widget option ready to be selected

Next, in the Search bar in the upper-left corner of the Choose Website Widget page, enter Announcement Bar.
Then, at the bottom of the search results, click on Use Widget.

Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
- Badge — Leave this enabled to add a small label, such as New, Sale, or Limited Time, to draw attention to your announcement.
- Heading — Keep this on to enter the main message you want visitors to see in the Announcement bar.
- Description — Keep this enabled to add supporting text to provide more details about your announcement.
- Coupon — Display a coupon or promotional code that visitors can use during a sale or special offer.
- Timer — Show a countdown timer to create urgency for time-sensitive promotions or announcements.

Website Widgets Widget Properties menu showing the Badge, Heading, Description, Coupon, and Timer settings for customizing the announcement bar with a label, main message, supporting text, promotional code, and countdown timer

Then, scroll down and continue with these settings:
- CTA Button — Toggle this on to show the Call-to-Action (CTA) button within the Announcement bar.
- Button Text — Customize the text displayed on the CTA button.
- Button Link — Enter the URL that opens when visitors click the CTA button.
- Clickable Banner — Turn this on to make the entire announcement bar clickable, letting visitors open a specific webpage by clicking anywhere on the banner.

Website Widgets Widget Properties menu showing the CTA Button, Button Text, Button Link, and Clickable Banner settings for adding a call-to-action button, customizing its label and destination URL, and making the entire announcement bar clickable

Next, under the Styles tab, customize these properties:
- Theme — Choose a pre-designed theme to quickly change the overall look and feel of your chart.
- Corner Radius — Adjust how rounded the corners of the Announcement bar appear.
- Jotform Branding — Show or hide Jotform branding on the widget.
- Font — Toggle this on to select and match your website’s font.
- Custom CSS — Turn this on to add custom CSS code and apply advanced styling to the widget.

Announcement bar Styles tab showing options to customize the Theme, adjust the Corner Radius, show or hide Jotform Branding, match the website’s font using Font, and apply advanced styling with Custom CSS

Now, under the Layout tab, configure these properties:
- Behavior — Choose Inline to place the announcement bar within the page content, or Floating to make it hover over the page.
- Full Width — Keep this enabled to extend the announcement bar across the available width.
- Text Alignment — Choose Left, Center, or Right to align the text within the announcement bar.
- Devices to Display On — Click on the Downward Arrow icon and select whether the Announcement bar appears on desktop devices, mobile devices, or both.
Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

Announcement bar Layout tab showing the Behavior, Full Width, Text Alignment, and Devices to Display On settings for controlling the bar’s placement, width, text alignment, and device visibility, with the Publish button in the pink navigation bar at the top of the page

Note

You’ll be asked to log in to your Jotform account if you’re not already, or sign up for one. Once you’ve done that, you’ll be able to get the embed code for your widget.

Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

Copying the Announcement Bar widget embed code or selecting Platforms to view platform-specific embedding instructions

Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

Selecting a website platform or using the search bar in the Platforms section to view Announcement Bar widget embedding instructions

Then, follow the steps in the How to Embed Your Widget section to add it to your website.

Following the How to Embed Your Widget instructions to embed the Announcement Bar widget on a supported website platform

That’s it! Your Announcement Bar widget will appear on your website with the design and settings you selected for it. See the screenshot below for an example of how it’ll look.

Sample website showing the Graphs and Charts widget with customized styling and interactive data visualizations

Note

You can manage the website widgets you’ve created at any time from your account. For a full breakdown of how to do it, head over to our guide on How to Manage Website Widgets.

Pro Tips

Keep your announcement short and easy to read. A clear, concise message is more likely to catch visitors’ attention than a long block of text.
Be sure to keep your announcement up-to-date. If you’re promoting a limited-time offer or event, remember to update or remove the announcement once it’s ended.