1. Guides
  2. Solutions
  3. Click-to-call web widget
Rate this page:

Click-to-call web widget

A click-to-call widget is a button on your website that enables customers to make a VoIP call without leaving the site.

Key features:

  • Call a Voximplant user/SIP address/phone number.

  • You can dial an extension number after the call establishes.

  • You can mute/unmute your microphone during the call.

  • You can choose the microphone and test it by recording your voice and playing it back.

  • You can see the connection status and quality.

Widget connection
Microphone settings

Contents

Copy URL

How to use

Copy URL

The setup consists of two parts: VoxEngine cloud setup and the widget's source code setup.

VoxEngine setup

  1. Create an application.
  2. Create a user to log in to the widget.
  3. Create a scenario for the microphone check. Copy this code into your scenario and save it.
Microphone check scenario
Copy

Microphone check scenario

  1. Create a separate scenario for the call itself. You can choose to call a phone number, a Voximplant user, or a SIP address. Depending on the destination, copy the appropriate code example into your scenario.

Use this code if you are going to call a user:

Destination — a Voximplant user
Copy

Destination — a Voximplant user

Use this code if you are going to call a phone number:

Destination — a phone number
Copy

Destination — a phone number

Use this code if you are going to call a SIP address:

Destination — a SIP address
Copy

Destination — a SIP address

Caller ID notice

If you want to call a phone number, you need a verified Caller ID. You can buy a phone number from Voximplant or use any phone number that is verified via an automated call from Voximplant and a confirmation code.

  1. Make a routing rule for the microphone testing scenario. Set the mask pattern to testmic and place the rule at the top.
  2. Make another routing rule for the call scenario. Place the rule below the microphone testing scenario.

The VoxEngine setup is complete. Now, let us begin with the widget itself.

Application setup

  1. Download the widget repository.
  2. Run yarn install or npm install in the widget directory.
  3. Rename the .env.example file to .env.
  4. In the .env file:

  • Fill your user credentials into the VUE_APP_USER and VUE_APP_PASSWORD properties.

  • Add the number to call to the VUE_APP_NUMBER property.

  • Fill the testmic string to the VUE_APP_TEST_NUMBER property.

  1. Run yarn serve or npm run serve to run the development build.
  2. Open the http://localhost:8080/ URL to test the application.
  3. Once the application works correctly, you can assemble the application.
  4. If you do not plan to upload the application to the webserver root folder, set up the publicPath property in the vue.config.js file. See the instruction.
  5. To make a production build, run yarn build or npm run build.
  6. The dist directory contains the production build ready to upload to the server.

Folder descriptions

Copy URL

  • public — Project's static materials, such as favicon and the index.html template, where you can add any additional code, such as action counters.

  • src — Zingaya project code.

  • src/assets — assets: images and sounds.

  • src/components — application source code.

  • src/router — application routing files.

  • src/views — application pages: Home.vue is the default page, Button.vue is the button page to be placed on the website.

Miscellaneous

Copy URL

  • The get parameters starting with x- are sent as headers to the VoxEngine scenario

  • You can see the widget example in a new window at: http://localhost:8080/button

Download our demo

Copy URL

Here you can download our click-to-call widget demo for your instance: