How to add click to Call button in google sites

In this tutorial I’ll show you how to add click to Call Us button to google sites which is normally not possible. You have to add a valid link like https://google.com etc or select the inner pages only that you created for your google site. It does not accept something like tel:+9223456789112 so you can’t add a beautiful looking icon or button and even if you add a link or button via the embed it will not look good or won’t be responsive. So we have found a way of adding a click to call button to the new google sites that is not only beautiful but also responsive.

Just add two of your favorite icons and we’ll show you how to add the click to call us button or icon using the embed feature, just click on the embed and then click on the Embed code and then add the following code to the Embed code.

<style type="text/css">
* {
max-width: 100vw;
max-height: 100vh;
}
img {
display: block;
margin-top: -8px;
margin-left: -8px;
width: 100vh;
height: auto;
}
</style>
<a href="tel:+923451234567"><img src="https://www.pngkit.com/png/full/82-829739_phone-icon.png"></a>

What we have done here is we have added an image tag with an image link “https://www.pngkit.com/png/full/82-829739_phone-icon.png” (You can change it to the link of your icon or image) and have linked that to tel:+923451234567. Then we made img element block by applying display: block and then gave it a negative margin -8px to the top and negative margin of -8px to the left to move it to a position where it match the position of the other icons. Finally we made the width equal to 100vh which mean we made 100% the height of the viewport and set the width to auto And that’s how you add a click to call us button to your google site. To see a demo of the click to call button kindly click on the button below.

---

Adding Callable button without image

There are some disadvantages in adding an image button like you cannot have those beautiful hover effects and the image url. First you have to find an external source like imgur and then you have to upload your images/images there and then copy the link and then putting the url in the embed section. You might be thinking why not upload an image to a Google Sites page and then copy the link and use it in the embed section but you’ll be disappointed to know that Google Sites keeps updating the url from time to time and thus making it difficult or impossible for people to link it from outside sources. And hence we’ll embedding it inside Google sites but the problem is an embed is actually an iframe and it’s on a completely different server for security & safety reasons and thus the url won’t update itself automatically and hence it’s of no use to us.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<style>
* {
max-width: 100vw; 
max-height: 100vh; 
}
body { 
margin: unset !important; 
}
a { 
font-size: 24px; 
color: #fff; 
background: #333;
width: 100vw; 
height: 100vh;
display: flex; 
justify-content: center;
align-items: center; 
text-decoration: none;
border-radius: 100%;
}
a:hover { background: #000; }
</style>

<a href="tel:+923011234567"><i class="fas fa-phone-alt"></i></a>

First Go to fontawesome and create an account there, then copy the CDN link from there. Paste it at the top of the embed section. Afterwards add some styling using CSS. Finally add your a tag and inside your link tag put the font-awesome code <i class=”fas fa-phone-atl”></i>. As you can see we never used an image and used font-awesome instead and our button look neat and clean and now we add some nice hover effect if want.