Making a Phone Number Link with clickable "tel:" URL (Bongo4U)

Making a Phone Number Link with clickable "tel:" URL (Bongo4U)

Bongo4U Embed Tag "phone_link"

If you wish to convert a phone number, other than the "Contact Phone Number" defined in Site Properties (which has a special "contact_phone" embed tag), then use the following “phone_link” embed tag to generate a link using the passed phone number as the link text. It will also convert the passed phone number into a “tel:” URL which is clickable on mobile devices that have phone service.

Details are described within this article.

Quick Summary

{{bongo4u=phone_link|555-333-4444}} generates the following link: 555-333-4444
{{bongo4u=phone_link|555-333-4444 ext 777}} generates the following link: 555-333-4444 ext 777

Details

Area Code & Number Formats

This function accepts the passed phone number in a few different formats. The “nnn-nnn-nnnn” hyphenated format is preferred if possible instead of the “(nnn) nnn-nnnn” bracketed format.

The number can also be entered using spaces ("nnn nnn nnnn") or no delimiters ("nnnnnnnnnn"), or as a hybrid ("nnn nnn-nnnn", "nnn nnnnnnn", "nnn-nnnnnnn"), but the hyphenated format is preferable ("nnn-nnn-nnnn").

For other country formats, the delimiters can be added anywhere within the phone number (e.g. "nn-nnnn-nnnn").

Any included round brackets, e.g. "(" or ")", will be stripped out of the “tel:” URL as if no brackets were ever there.

Square brackets, e.g. "[" or "]", and squiggly brackets, e.g. "{" or "}", are not supported and will probably make the resulting "tel:" URL invalid.

Remember that the format of the phone number as passed is how it will be displayed in the link text, so it should be easily human readable for the intended audience.

Leading “1-”

Exclude the long-distance leading “1-” for North American phone numbers (i.e. skip/avoid it).

In this way, the system will add the appropriate telephone system country number at the beginning of the “tel:” URL based upon the country specified in Site Properties (e.g. "1-" for Canada & USA, "44-" for UK), but it will not do this if “1-” is already at the beginning of the passed phone number.

Extensions

If “x”, “ext”, “ext.” or “extension” (case insensitive) trail the phone number with an optional space on one or both sides, then the “tel:” URL will have a couple of commas appended (for dialing delay/wait) before specifying the extension number.

Hyphens Override

By default, the resulting “tel:” URL will retain any hyphens found in the passed phone number. In addition, if the telephone system country number is prepended, it will also add a hyphen between the prepended country number and the phone number. However, if you add an optional second input parm of “hyphens=n” then the hyphens in the resulting “tel:” URL will be stripped out. Typically, the hyphens are and should be left in.

CSS

The generated link HTML will use CSS class “b4u_phone_number” for consistent styling of all phone_link links across the entire website.

Examples

{{bongo4u=phone_link|555-333-4444}}
{{bongo4u=phone_link|555-333-4444 ext 777}}
{{bongo4u=phone_link|555-333-4444 ext 777|hyphens=n}}
{{bongo4u=phone_link|1-888-333-4444 X4321}}     (the leading “1-” is not needed unless wanted for the link text)