biorkes / phoneBanner

Phone Banner

A Self invoking script that creates a fixed top banner containing a phone number. When clicked it triggers phone dialing to the phone number your specified. You can change some of the styles of the elements by passing data- attributes with values ( see the example and the table below ). The banner contains id properties so you can always write your own css and overwrite the default values.

Minimum usage

The minimum usage of this script must implement two data- attributes which are mandatory.

• data-name - This attribute contains the script name property that is used to invoke itself. This value should not be changed, otherwise the script will not find its data- attributes.
• data-telnumber - This is the actual phone number that you need to pass. You can pass the phone number as e164 format or pass it as a local number with missing leading 00 or country code.

Example

<script type="text/javascript" 
  src="phoneHeader.js" 
  data-name="phoneNumberBanner" 
  data-telnumber="[phone]">
</script>

Advanced Usage

Phone Banner allows you to modify some of the default style values of the element, but you can always overwrite the styles with your own css classes and styles.

Example

<script type="text/javascript" 
  src="phoneHeader.js" 

  data-name="phoneNumberBanner" 
  data-background="#f3f3f3"
  data-padding="10px"
  data-position="absolute"

  data-telnumber="[phone]"
  data-teltext="Call us now!"
  data-telcolor="black"
  data-telfontsize="1em"
  data-telfontweight="500"
  
  data-iconsrc="https://urltosomeicon/icon.png"
  data-iconwiggle="0"
  data-iconwidth="1.3em"
  data-iconmargin=".4em">
</script>

Required Fields

Property	Description	Required	Default
data-telnumber	Phone Number for dialing	✔️	your-phone-number
data-name	Name Property of the DOM element	✔️	phoneNumberBanner
data-background	Changes the banner background color	❌	#414141
data-padding	Banner Padding. Accepts single or multiple values	❌	5px
data-position	Banner Position	❌	fixed
data-teltext	Display Different text as tel like Call Us	❌	data-telnumber
data-telcolor	Phone number text color	❌	#fff
data-telfontsize	Phone number font size	❌	16px
data-telfontweight	Phone number font weight	❌	600
data-iconwiggle	Activates or Disables phone icon wiggle effect	❌	1
data-iconwidth	Padding of the icon	❌	20px
data-iconmargin	Margin of the icon	❌	0 10px 0 0
data-iconsrc	Url to an image or emoji	❌	inline svg