Click To Call
The click to call widget has similar properties to the button widget but links directly to the phone number that has been added into the profile settings. This provides a direct way for a user to call the company, either via mobile web viewing or from a desktop calling application such as Skype. The widget uses the phone number from the profile section as a default for the link and the text in the link. These can be both changed via the Editor.
Examples
Basic usage
{{widget('clicktocall', 'clicktocalldefault', {})|raw}}
Example usage
{{widget('clicktocall', 'headerclicktocall', {
'phoneText': 'Call Now',
'italic': true,
'bold': true,
'fontSize': 18,
'align': 'widget-align-center'
})|raw}}
Resulting HTML:
<div id="page-zones__template-widgets__clicktocall-headerclicktocall" class="widget widget--template-widget" data-widget-type="clicktocall">
<div class="bk-clicktocall clicktocall widget__clicktocall widget-align-center">
<a href="tel:" class="phone-number-link icon icon--phone clicktocall__phone-number-link italic bold" style="font-size:18px">
<span class="label clicktocall__label">Call Now</span>
</a>
</div>
</div>
Widget options
You can change the following options for the widget:
-
phoneText
: The text shown in the click to call widget. -
italic
: Sets the click to call to italicised using anitalic
class on the button element,true
orfalse
respectively. -
bold
: Sets the click to call to bold using abold
class on the button element,true
orfalse
respectively. -
fontSize
: Changes the click to call font size in pixel values, options are14
,16
,18
,20
,22
,24
-
align
: Sets the button alignment using classes on the surrounddiv
element. The following options are available:widget-align-left
: To align the text to the left.widget-align-center
: To align the text to centre.widget-align-right
: To align the text to the right.