Help with editing header so that I can have a click to call button

Hi Kharis, How are you?

I have a html code for click to call button. I would like to embed it in header. Please advise a css modification so that I can insert in above menu.

Regards,
Soni

Hello there,

I am good! Thank you for asking.

You can use jQuery code to insert some additional HTML code to the header area. Please share your code here, so I could provide you with the exact result you wanted.

Regards,
Kharis

Thanks Kharis,

I would like to put the code above search but would not like to disturb the alignment as well.

Please find the code below

<div class=“tools-ringme-ringmeLink” onclick=‘var wind = window; var winop = wind.open; winop(“https://portal.btcloudphone.bt.com/ringme/?uc=67E203D1EDC92EE1DA622C6716BB4C1831451021909064,0,,1,0&s=no&v=2&s_=7710”, “Callback_RingMe”, “resizable=no,width=650,height=460”); return false;’></div>

Hi Kharis,

I have provided you with the code, please advise.

Thanks
Soni

Hello there,

I am sorry for the delay. Try doing the below steps, please.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  var html  = '<div class="ring-me"><div class="tools-ringme-ringmeLink"';
      html += "onclick='var wind = window; var winop = wind.open;";
      html += 'winop("https://portal.btcloudphone.bt.com/ringme/?uc=67E203D1EDC92EE1DA622C6716BB4C1831451021909064,0,,1,0&s=no&v=2&s_=7710", "Callback_RingMe", "resizable=no,width=650,height=460");';
      html += "return false;'>";
      html += '<img border="0" src="https://netstorage.ringcentral.com/ringme/images/ringme_6_6_8.png" /></div></div>';

  $('.site-header .col-md-8').prepend(html);    
      
})(jQuery);

  1. Update
  2. Add this CSS code into Appearance > Customize > Additional CSS.

.ring-me {
  text-align: right;
}

.ring-me .tools-ringme-ringmeLink {
  width: 141px;
  display: inline-block;
}

@media only screen and (max-width:767px) {
  
  .ring-me {
    text-align: center;
    margin-top: 10px;
  }  
  
}


Regards,
Kharis

Thanks Kharis, it worked, but I would like to keep the menu in line with the logo and the ring me. Please help

Thanks
Soni