Creating a Click-to-Call Button in the Visual Builder
Introduction
This tutorial provide an example of a ‘Click-to-Call’ button using the Visual Builder editor.
What is a Click-to-Call action button?
A click-to-call button is a clickable element on a website or app that lets users instantly initiate a phone call with just one tap, typically by opening their device's dialer with a pre-filled number. It enhances user experience by removing the need to manually enter a phone number, especially on mobile devices.
Why use Click-to-Call instead of the Contact Us page?
A ‘Click-to-Call’ button is a inobtrusive method if initiating phone call communication.
Why Choose Click-to-Call?
Click-to-Call offers distinct advantages over a traditional "Contact Us" page. Here's why:
Feature | Click-to-Call | Contact Us Page |
|---|---|---|
Immediacy | Instant connection with a representative. | Requires filling out forms and waiting for a response. |
User Effort | Single click to initiate a call. | Multiple steps: navigate, fill fields, submit. |
Problem Resolution | Direct conversation allows for quicker and more nuanced problem-solving. | Often involves back-and-forth communication, delaying resolution. |
Customer Experience | More personal and often leads to higher satisfaction. | Can feel impersonal and less efficient. |
How is the Click-to-Call button created
Creating a Click-to-Call action button in it’s most basic form is to create a hyperlink button that initiates a phone call, which we will implement using an anchor (<a>) element with the href attribute set to tel: followed by the phone number.
For example, the following HTML code creates a button that, when clicked, opens the device's phone dialer:
<a href="tel:+1234567890">Call Us</a>Using Anchor Links In Your Storefront
Implementing anchor links in your storefront using the Visual Builder editor is accomplished using the Link element, assigning the element ID to the URL.
Steps
In this tutorial, we are adding a link to the into the header of our storefront, so that it remains immediate available to the customer during their entire shopping session.
From the Storefronts menu in the UltraCart Backend, Click ‘Browse your Store’.
In the Storefront Developers menu, click ‘Edit’
Click ‘Hierarchy’ in the Visual Builder menu that appears along the right side of the web browser window.
In the ‘Container-Header’ Container, The first element is the ‘SUBHEADER’ section, click the ‘+' button, then choose 'Add Child’:
In the search field that appears, enter ‘Row’ then select the row element that appears.
Then select the column width of 12:
Next, click the ‘+' for the column element, then choose ‘Add Child’ and search for and then select ‘Image’. In the settings panel of the image, click the folder icon in the ‘Image URL’ field then browse for your image and then select it.
In this case we created an image using a stock photo of an old telephone handset icon combined with our phone number:Click the ‘X' button to close the image settings panel, then in the hierarchy, mouse over the three dots menu for the image element, then choose ‘Wrap’, then choose ‘Link’. In the link settings, configure the ‘Link URL’ with the phone number, optionally set the ‘Link URL Target’, to ‘NewTab/Window, then enter 'Call +1-209-383-9870' into the 'Alt Text’.
Click the ‘Save’ button which will be highlighted in the Visual Builder Editor.
Click the exit button to exit the Visual Builder Editor.