Use floating call widget

Just like chat widgets, you can also add few lines of Javascript code to the header of your website and have a floating call button available on every page.

You can add the following code to the <header> section of your website to make the button appear on every single page. You don’t need to worry about where to put the button, just pick where you want it to appear by modifying placement property.

Step 1 : Configure calling behaviour using widget properties

You can view our call widget generator on our portal. Simply go to Configure DIDs section, search and find the number you want to place test calls to, then click on the magic want to configure calling behaviour. You can review the full list of options available here.

The main parameter for the floating button is the display_button. It must be set to true.

var customClick2vox = {         
        display_button: "true",
       custom_button_color: "#ff9900", 
       did: "14848453155", //The Voxbone number you want to call 
       incompatible_browser_configuration: "hide_widget", 
       server_url: "https://click2vox.com", 
       use_default_button_css: "true", 
       div_css_class_name: "btn-style-round-a", 
       placement: "bottom-right", 
       draggable: "true", 
       caller_id: "developersVoxboneCom", 
       basic_auth: "true",  
       https_popup: "false", 
       voxbone_webrtc_username : "YourWebRTCUsername", //Voxbone WebRTC username 
       voxbone_webrtc_password : "YourWebRTCPassword" //Voxbone WebRTC Password. Go to https://www.voxbone.com/portal/account-settings?tab=webRTC to setup 
}

Step 2 : Reference our libraries

Properly load the latest version of our JavaScript SDKs. Note the custom Click2vox object passed to the library. You can change this name to whatever you want.

<script type="text/javascript">; 
!function(t,e,c,n){t.click2voxObject=c;var o=function(){var t=e.createElement("script"),c=e.getElementsByTagName("script")[0];t.src="https://www.voxbone.com/click2vox/click2vox.js",t.async=1,t.dataset.button_id=n,c.parentNode.insertBefore(t,c)};t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document,customClick2vox); 
</script>

Well, that’s pretty much it!

If you are looking to do this on a WordPress site, you can use a plugin such as “Insert Headers and Footers” to add these lines to the <header> section