Add a widget at the footer of the Service Portal Homepage with the Service Desk Phone Number and a reference to 24x7 support.

[SNOW46]

Hi All,

I have one query that I want to add one section like widget at the bottom of the Service Portal Homepage which will contain Service Desk Phone Number and a reference to 24x7 support within it.

Can anyone let me know how to achieve this requirement?

Thanks,

SNOW@Das

[SNOW46]

Hi Vignesh,

Can you please let me know how can I add the three boxes type design as per the below image.

Along with the icons besides the heading of each.

[VigneshMC]

try something like below. Below is not properly tested.

<div class="container">
    <div class="row">
      <div class="col-md-4 text-center legalFooter " >
        <div class="fa fa-envelope fa-3x"></div>
        <h2>EMAIL</h2>
    <span class="text-muted">Contact by email</span>
      </div>
      <div class="col-md-4 text-center legalFooter" >
        <div class="fa fa-phone fa-3x"></div>
         <h2>CALL</h2>
    <span class="text-muted">Contact by call</span>
      </div>
       <div class="col-md-4 text-center legalFooter" >
         <div class="fa fa-comment fa-3x"></div>
        <h2>CHAT</h2>
    <span class="text-muted">Contact by chat</span>
      </div>
    </div>
  </div>

and css

.fa {
  position:absolute;
  left: 5px;
  top: 20px;
  width:12px;
  text-align: center;
}

[SNOW46]

Hi Vignesh,

I tried the same code and it works for me perfect. I just want to add only two options in the container as Email and Contact Number only. I dont need to add the Chat option.

How to re-modify the above script and I want the Email and Call to be in middle of the footer.

And can you also let me know how can I give color for Email and Call Text and icons also I need to add beside the heading.

Can you also let me know how to reduce the space from top and bottom as well.

[VigneshMC]

Update HTML to

<div class="container">
    <div class="row">
      <div class="col-md-offset-4 col-md-4 " >
         
        <h2><span class="fa fa-envelope"></span>EMAIL</h2>
    <span class="text-muted">Contact by email</span>
      </div>
      <div class="col-md-4" >
       
         <h2> <span class="fa fa-phone"></span> CALL</h2>
    <span class="text-muted">Contact by call</span>
      </div>
  </div>

and css to

.fa{
  
  padding-right:10px;
  
}

[SNOW46]

Hi Vignesh,

As per the modified code given by you I have applied the same. And still the two div's should be in some distance. But it shows that it coming close one to one.

I want that there should be some distance between Email and Call Div's.

And also I want to reduce the space marked as Red from top.

Can you please suggest me some changes to be made on the code part.

Awaiting your earliest response on the same.