With Jotform’s Announcement Bar Widget, you can display important messages at the top or bottom of your website to quickly grab your visitors’ attention. Whether you’re announcing a sale, sharing company updates, promoting a new feature, or highlighting an important notice, you can customize the announcement bar to match your website’s style and add it in just a few steps.

An announcement bar is a simple yet effective way to communicate with your visitors without interrupting their browsing experience. By keeping important information visible, you can increase engagement and make sure your audience doesn’t miss key updates or calls to action.

Creating Your Announcement Bar Widget and Getting the Embed Code for it

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 its embed code. This is how it’s done:

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

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

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

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these properties:
   • Heading — Enter the main message you want visitors to see in the announcement bar.
   • Badge — Add a small label, such as New, Sale, or Limited Time, to draw attention to your announcement.
   • Description — Add supporting text to provide more details about your announcement.
   • Clickable Banner — Make the entire announcement bar clickable so visitors can open a specific webpage by clicking anywhere on the banner.
   • CTA Button — Show or hide a call-to-action button within the announcement bar.

6. Then, scroll down and continue with these settings:
   • Button Text — Customize the text displayed on the call-to-action button.
   • Button Link — Enter the URL that opens when visitors click the call-to-action button.
   • Text Link — Add a clickable text link within the announcement bar as an alternative to a button.
   • 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.

7. Next, under the Styles tab, customize these properties:
   • Template — Choose a pre-designed style for the announcement bar.
   • Background Type — Select the type of background, such as a solid color or gradient, for the announcement bar.
   • Corner Radius — Adjust how rounded the corners of the announcement bar appear.
   • Jotform Branding — Show or hide Jotform branding on the widget.
   • Font — Choose the font used for the announcement text and buttons.
   • Custom CSS — Apply your own CSS code for advanced styling beyond the built-in settings.

8. Now, under the Layout tab, configure these properties:
   • Position — Choose whether the announcement bar appears at the top or bottom of your webpage.
   • Behavior — Select how the announcement bar behaves while visitors scroll, such as remaining fixed or scrolling with the page.
   • Close Button — Show or hide a button that allows visitors to dismiss the announcement bar.
   • Open Links in New Tab — Choose whether links in the announcement bar open in a new browser tab.
   • Width — Adjust the width of the announcement bar to fit your website’s layout.
   • Alignment — Choose how the content inside the announcement bar is aligned.
   • Padding — Adjust the spacing inside the announcement bar to improve its appearance and readability.
   • Devices to Display On — Choose whether the announcement bar appears on desktop devices, mobile devices, or both.
9. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

10. 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.
11. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

12. 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. 

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

That’s it! Your Graphs and Charts 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 looks on a website.