How to Add a Click-to-Call Button to Your Website

Jotform’s Click-to-Call widget makes it easy to add a customizable Call button to your website without any coding knowledge. Whether you’re running a local business, service website, clinic, or sales page, visitors can contact you instantly from supported devices with a single tap or click.

Customize the Call button’s appearance, choose when it appears, and tailor the widget to your website. In this guide, you’ll learn how to configure the widget and add it to your website.

Creating and Getting the Embed Code for Your Click-to-Call Website Widget

The first step to embedding the Click-to-Call widget on your website is to configure it and copy its embed code. Get started like this:

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

2. Then, in the window that opens up, click on Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for Click-to-Call.
4. In the search results, click on Use Widget.

5. In the Widget Properties menu on the right side of Website Widget Builder, under the General tab, set up these things:
   • Phone Number — Enter the phone number visitors can call you at directly from your website.
   • Show Button Icon — Show or hide the phone icon on the floating Call button.
     • Button Text — Enter the text you want to display on the Call button.
   • Show Button Text — Display a short call-to-action next to the floating Call button.
   • Picture — Upload an optional profile or brand image to display in the Call window.
   • Name — Enter the name displayed as the title in the Call window.

6. Then, scroll down and continue setting up these things:
   • Caption — Add an optional line to display availability, a job title, or your team name.
   • Message — Enter a short message to encourage visitors to give you a call.
   • Format Phone Number — Display North American phone numbers in a cleaner, more familiar format.

7. Next, under the Style tab, personalize the appearance of your widget with these options:
   • Jotform Branding — Show or hide Jotform branding in the widget.
   • Show Button Icon — Show or hide the phone icon in the floating Call button.
   • Button Colors — Adjust the background and icon or text colors of the floating Call button.
     • Button Color
     • Icon and Text
   • Call Window Colors — Customize the Call window background, message text, and phone number colors.

8. Then, scroll down to customize these additional settings:
   • Corner Radius — Select the corner style for the Call window.
   • Text Size — Adjust the text sizes displayed inside the Call window.
     • Name
     • Caption
     • Message
     • Phone

9. Now, scroll down to the bottom and fine-tune these appearance settings:
   • Drop Shadow — Add depth to make the Call button and window stand out from the rest of the page.
   • Custom CSS — Add custom CSS code to further customize the widget’s appearance.

10. Next, under the Layout tab, adjust these settings:
    • Widget Position — Choose where the Call button appears: Left, Right, or Inline.
    • Distance from Bottom — Adjust the distance between the floating Call button and the bottom edge of the screen.
    • Distance from Side — Adjust the distance between the floating Call button and the side edge of the screen.
    • Button Size — Adjust the Call button size.
    • Call Window Width — Set the width of the Call window on desktop devices.

11. Then, continue scrolling and set up these options:
    • Button Animation — Make the Call button pulse at regular intervals to attract visitors’ attention.
    • Display on Pages — Choose whether to display the widget on all pages, exclude specific pages, or show it only on specific pages.
      • Pages to Exclude/Include — Enter URLs for the pages that the widget should or shouldn’t be displayed on.
    • Display for Visitors — Choose whether to display the widget for all visitors, first-time visitors, or returning visitors.

12. Next, scroll down to configure the display settings, toggle Show on Desktop, Show on Tablet, and Show on Mobile on or off to show or hide the widget on each device.

13. Now, set the following:
    • Display Schedule — Toggle this on to only show the widget on selected days and working hours.
      • Monday–Sunday — Select the days the widget should be displayed on.
    • Start Time — Set the time the widget is shown each day it’s enabled.
    • End Time — Set the time the widget is hidden each day it’s enabled.
    • Time Zone — Set the time zone used for the Display Schedule. You’ll need to use a Timezone ID, such as America/New York. For a full list of Timezone IDs, check the Full IANA Timezone List.

14. Then, scroll down to finish adjusting these layout settings:
    • Time on Page Trigger — Set the number of seconds to wait before opening the Call window once a visitor lands on your page. Set it to 0 to disable it.
    • Time on Site Trigger — Set the number of seconds to wait before opening the Call window once a visitor lands on your site. Set it to 0 to disable it.
    • Scroll Position Trigger — Set the percentage of the page that visitors must scroll down before the Call window opens. Set it to 0 to disable it.
    • Exit Intent Trigger — Toggle this on to open the Call window when desktop visitors appear to be leaving the page.
    • Google Analytics Events — Send widget interaction events to gtag or dataLayer when available.
      • Widget Opened Event — Enter the event name to send when the Call window is opened.
      • Call Clicked Event — Enter the event name to send when the Call button is clicked on.

15. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

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

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

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

That’s it! Your Click-to-Call website widget is now configured and ready to be embedded on your website. Once published, visitors can easily reach you with a single click. The screenshot below shows an example of how the widget will look when embedded:

Updating Your Click-to-Call Widget

You can update your Click-to-Call widget at any time after it’s embedded on your website. Here’s a quick how-to:

1. At the top of your Workspace page, click on Filter.
2. Then, in the Dropdown menu that opens, hover your mouse over Website Widgets, and on the right side of it, click on Only.

3. Next, hover your mouse over the widget you want to edit and click on Edit Widget on the right side of the page.

4. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General, Style, and Layout tabs, edit the properties you want to change.

That’s it! Your changes will be automatically applied to your Click-to-Call widget.