Click-to-call web widget
Click-to-call widget is a button for your website that allows your customers to make a call over VoIP without leaving the website.
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 Widget connection](/docs/md-ad-generator/assets/images/guides-voice-zingaya-connection.png)
![Microphone settings Microphone settings](/docs/md-ad-generator/assets/images/guides-voice-zingaya-microphone.png)
Contents
How to use
The setup consists of two parts: VoxEngine cloud setup and the widget's source code setup.
VoxEngine setup
- Create an application.
- Create a user to log in to the widget.
- Create a scenario for the microphone check. Copy this code into your scenario and save it:
- Create another scenario for the call itself. You can call a phone number, a Voximplant user, or a SIP address. Depending on your destination, copy the suitable code example into your scenario.
Use this code if you are going to call a user:
Use this code if you are going to call a phone number:
Use this code if you are going to call a SIP address:
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 confirmation code.
- Make a routing rule for the microphone testing scenario. Set the mask pattern to
testmic
and place the rule on the top. - Make another routing rule for the call scenario. Place the rule below the microphone testing scenario.
The VoxEngine setup is done, now start with the widget itself.
Application setup
- Download the widget repository
- Run
yarn install
ornpm install
in the widget directory - Rename the .env.example file to .env
- In the .env file:
Fill your user credentials into the
VUE_APP_USER
andVUE_APP_PASSWORD
properties.Add the number to call to the
VUE_APP_NUMBER
property.Fill the
testmic
string to theVUE_APP_TEST_NUMBER
property.
- Run
yarn serve
ornpm run serve
to run the development build. - Open the http://localhost:8080/ URL to test the application.
- Once the application works correctly, you can assemble the application.
- If you do not plan to upload the application to the webserver root folder, set up the
publicPath
property in thevue.config.js
file. See the instruction. - To make a production build, run
yarn build
ornpm run build
. - The
dist
directory contains the production build ready to upload to the server.
Folder descriptions
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
The get parameters starting with
x-
are sent as headers to the VoxEngine scenarioYou can see the widget example in a new window at: http://localhost:8080/button
Download our demo
Here you can download our click-to-call widget demo for your instance: