How to Add a Webphone Button in your Website

Photo Source: Interactive Powers, Pexels. Creative Commons

In this post we will show you how to add a Webphone button in your website using our customizable webcall widget.

Step one: Installation

To install the Webphone Button in your webpage you need to download our webcall widget webcall_widget_noflash.zip and uncompress it in the directory of your website.

To insert it, you first need to add the CSS Stylesheet file to your webpage.

<link rel="stylesheet" href="assets/webcall_widget.css">

Then you need to import the main JavaScript file of the widget.

<script src="webcallWidget.js"></script>

Finally, you need to create a WebcallWidget instance.

<script type="text/javascript">
	var webcallWidget = new WebcallWidget('WEBPHONE_URL', 'DESIGN','ALIGN', 'COLOR');
	webcallWidget.create();
</script>

Step 2: Available configurations

It is possible to configure some parameters to give your button a custom style: design, horizontal align and main color.

Webphone URL: URL to the webphone to open

Design selection: top, top-corner, middle, bottom

Horizontal align: left, right

Color: you can insert any color code that is compatible with HTML and CSS

Step 3: Customizing our button

In our case we will configure the button to open our webclient product.

In addition, we have chosen to place it at the top right and with the corporate colour of IntPowers.

var webcallWidget = new WebcallWidget('http://webphone.ivrpowers.com', 'top', 'right', ’#FF6E5F’);
webcallWidget.create();

The result below:

webphone button

Step 4: Try it on your website

If you want, you can check now how it looks on your web-site in the following link: http://webclient.ivrpowers.com/

Feel free to reach out if you have any questions or comments bellow or just want to show off what kind of cool stuff you’ve built with VideoRTC.js.

Email: support@ivrpowers.com · Twitter: @ivrpowers · Github: IVRPowers