With Jotform’s Button Widget, you can create customizable buttons that help guide visitors to important pages, products, forms, or other online resources. You can easily personalize the button’s text, colors, size, and style to match your website’s design, then add it to your site in just a few steps.

Buttons are a simple but effective way to encourage visitors to take action on your website. Whether you want to direct them to another page, promote a product or service, or highlight an important link, the Button Widget helps make those actions more visible and accessible.

Creating Your Button Widget and Getting the Embed Code for it

Before you can add the Button Widget to your website, you’ll first need to customize its text, style, and destination, then copy its embed code. You’ll just need to do this:

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

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

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget menu, enter Button.
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:
   • Button Action — Choose what happens when visitors click the button, such as opening a webpage or performing another supported action.
   • Link URL — Enter the web address that the button will open when clicked.
   • Button Label — Set the main text displayed on the button.
   • Second Line — Add an optional second line of text below the main button label for additional context or information.
   • Show Surrounding Text — Display supporting text above or below the button to provide extra instructions or encourage visitors to click it.

6. Next, under the Styles tab, customize these properties:
   • Show Icon — Display an icon alongside the button text to make the button more visually engaging.
     • Icon Position — Choose whether the icon appears before or after the button text.
   • Button Colors
     • Background — Choose the button’s background color.
     • Text — Set the color of the text displayed on the button.
     • Hover Background — Choose the background color that appears when visitors hover over the button.

7. Then, scroll down and adjust these settings:
   • Horizontal Padding — Adjust the amount of space on the left and right sides of the button text.
   • Button Height — Set the height of the button.
   • Text Size — Adjust the size of the button text.
   • Corner Radius — Control how rounded the button’s corners appear.
   • Drop Shadow — Add a shadow around the button to make it stand out from the page.
   • Jotform Branding — Show or hide Jotform branding on the widget.
   • Custom CSS — Apply your own CSS code for advanced styling beyond the built-in settings.

8. Now, under the Layout tab, configure these properties:
   • Open New Tab — Open the linked webpage in a new browser tab when the button is clicked.
   • Display Mode — Choose how the button is displayed on your website, such as inline with your content or as a floating button.
   • Floating Placement — Select where the floating button appears on your webpage.
   • Vertical Offset — Adjust the button’s distance from the top or bottom edge of the page.
   • Side Offset — Adjust the button’s distance from the left or right edge of the page.
   • Device to Display On — Choose whether the button 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 Button widget will appear on your website just the way you customized it. See the screenshot below for an example of how it looks on a website.