How to Add a Dynamic Text Heading to a Website

A Dynamic Text Widget is a great way to display messages on your website that automatically change or rotate over time. Whether you’re highlighting special offers, announcing important updates, or showcasing key features, dynamic text helps capture visitors’ attention and keep your content engaging.

With Jotform’s Dynamic Text Widget, you can create eye-catching text that updates automatically with smooth animations. Customize the content, adjust its appearance, and seamlessly integrate it into your website to keep visitors informed and engaged.

Creating Your Dynamic Text Widget

Before you can add the Dynamic Text Widget to your website, you’ll first need to customize the text, choose how it will be displayed, and adjust its appearance. Here’s how to set it up:

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

2. In the menu that opens up, click on Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the Dynamic Text.
4. Then, in the search results, click on Use Widget.

5. Now, in Website Widgets, under the General tab in the Widget Properties panel on the right side of the page, configure the following options:
   • Text Before Animation — Add the text that appears before the animated or rotating phrase.
   • Number of Phrases — Choose how many rotating phrases you want to include in the animation.
   • Rotating Phrases — Enter the words or phrases that will rotate or animate one after another.
   • Text After Animation — Add the text that appears after the animated phrase to complete your message.
   • Accessible Label — Provide a descriptive label to improve accessibility for visitors using screen readers.

6. Once you’re done, switch to the Styles tab and manage the following options:
   • Colors 
     • Text — Choose the color of the static text displayed before and after the animated phrase.
     • Animated Phrase — Set the color of the rotating or animated text to make it stand out.
     • Background — Choose the background color of the widget.
   • Text Size — Adjust the size of the text displayed in the widget.
   • Text Weight — Choose how bold or light the text appears.

7. Then, scroll down to the bottom and set up these other options:
   • Phrase Style — Select the animation style or visual effect used for the rotating phrases.
   • Radius Corner — Control how rounded the corners of the widget appear.
   • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
   • Custom CSS — Apply your own CSS styles for advanced customization beyond the built-in settings.

8. Following that, switch to the Layout tab and configure the following options:
   • Layout — Choose how the text is arranged within the widget.
   • Width — Adjust the overall width of the widget to fit your website’s layout.
   • Alignment — Set how the text is aligned, such as left, center, or right.
   • Show on Desktop — Choose whether the widget is displayed on desktop devices.
   • Show on Mobile — Choose whether the widget is displayed on mobile devices.
   • Animation — Select the animation effect used when rotating between phrases.
   • Rotation Interval — Set how long each phrase remains visible before the widget switches to the next one.

That’s it. Your Dynamic Text Widget is now set up and ready. Next, you’ll copy its embed code so you can add it to your website.

Getting Your Dynamic Text Widget Embed Code

Once you’ve finished customizing your Dynamic Text Widget, you’re ready to get its embed code. It’s easier than you think:

1. In Website Widget, in the pink navigation bar at the top of the page, click on Publish.

2. Then, click on Copy Code.
3. Or, if your website is built on a supported platform, click on Platforms in the menu on the left. 

4. Next, in the Search bar at the top of the Platforms page, search for the specific platform.

5. For this example, we’ll use the Blogger platform. Click on its icon.

6. Finally, click on Copy Code, and you’re done.

That’s it. Simply paste the embed code into your website, and the widget will automatically display the current time for your visitors. Take a look at the screenshot below to see how it appears on a sample website.